Espaciado

Dos escalas y una regla. Una forma nunca escribe una longitud: da un paso, que es lo que evita que dos componentes escritos a un año de distancia estén a dos píxeles de desincronización.

Niveles de espaciado

Nueve pasos, desde una línea delgada hasta un margen de página. El relleno, los espacios y los márgenes provienen de aquí: un valor entre dos pasos es un valor que no ha sido decidido.

--space-1

--space-2

--space-3

--space-4

--space-5

--space-6

--space-7

--space-8

--space-9

Tamaños

Los anchos y alturas que se le dan a una región: una columna, un panel, una medida de lectura. Más grandes que un paso de espaciado y utilizados por la misma razón.

--size-1

--size-2

--size-3

--size-4

--size-5

--size-6

Densidad

La compacidad pertenece a una región y no a un widget. Una barra declarada compacta hace que lo que sostiene también sea compacto, porque los tokens que la transportan heredan: ningún componente debajo se le dice dónde se encuentra.

Una barra de herramientas en su propia densidad, y los botones que sostiene

La misma barra de herramientas declarada compacta — no se dijo nada sobre los botones

Una región declarada compacta sin ser una forma propia