Spacings

One scale on a 1.25 ratio, from the typography base - so space and text move together. Each square is drawn at the token it names.

Click any specimen to copy the token it documents, as var(--token).

How it works

Steps. Fourteen, 2xs to 9xl, on a 1.25 ratio - three under the base and ten over it. --root-s--md is the base.

The base is the type base. --root-t--font-size--base, 1.6rem: space is generated from the same number as text, so the two cannot drift. The ratio is steeper than typography's 1.125, because two adjacent gaps have to be told apart at a glance where two text sizes do not.

One length, either axis. The square below is the token wide and the token tall - a gap is that one length in whichever direction the layout spends it.

What to write. A step, for gap, padding and margin - never a literal, and never calc() over a step, which is how half-values creep back in.

Scale basis

--root-s--ratio

1.25

--root-t--font-size--base

1.6rem

Spacings

How it works

Scale basis

Tokens