Espacement

Deux échelles et une règle. Une forme n'écrit jamais une longueur : elle dépense un pas, ce qui empêche deux composants écrits à un an d'intervalle d'être décalés de deux pixels.

Paliers d'espacement

Neuf étapes, d'une ligne fine à une marge de page. Les espacements, les interstices et les marges proviennent tous d'ici — une valeur entre deux étapes est une valeur qui n'a pas été décidée.

--space-1

--space-2

--space-3

--space-4

--space-5

--space-6

--space-7

--space-8

--space-9

Tailles

Les largeurs et hauteurs qu'une région reçoit : une colonne, un panneau, une mesure de lecture. Plus grande qu'une étape d'espacement et utilisée pour la même raison.

--size-1

--size-2

--size-3

--size-4

--size-5

--size-6

Densité

La compacité appartient à une région et non à un widget. Une barre déclarée compacte rend ce qu'elle contient compact aussi, car les éléments qui la portent héritent — aucun composant en dessous n'est informé de sa position.

Une barre d'outils à sa propre densité, et les boutons qu'elle contient

La même barre d'outils déclarée compacte — rien n'a été dit sur les boutons

Une région déclarée compacte sans être une forme à part entière