Spacing

Two scales and one rule. A shape never writes a length: it spends a step, which is what keeps two components written a year apart from being two pixels out of rhythm.

Spacing steps

Nine steps, from a hairline to a page margin. Padding, gaps and margins all come from here — a value between two steps is a value that has not been decided.

--space-1

--space-2

--space-3

--space-4

--space-5

--space-6

--space-7

--space-8

--space-9

Sizes

The widths and heights a region is given: a column, a panel, a reading measure. Larger than a spacing step and used for the same reason.

--size-1

--size-2

--size-3

--size-4

--size-5

--size-6

Density

Compactness belongs to a region and not to a widget. A bar declared compact makes what it holds compact too, because the tokens carrying it inherit — no component below is told where it stands.

A toolbar at its own density, and the buttons it holds

The same toolbar declared compact — nothing was said about the buttons

A region declared compact without being a shape of its own