Spacing Tokens

This page covers Fibonacci-based spacing tokens and the property classes that support them.

SPACE: Spacing Scale

Spacing uses a scaling system based on the Fibonacci sequence ((0, 1,) 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, …).

By default, 0.5rem ≈ 8px is used as the scaling unit, with token values 10, 20, 30, … 80 defined accordingly. However, since those intervals can feel too large in practice, 5 and 15 are included as fine-tuning exceptions for the lower end of the scale.

:root {
  /* Fibonacci scale with spacing unit of 8 */
  --s-unit: calc(var(--REM) * 0.5); /* ≒ 8px */
  --s5: calc(0.5 * var(--s-unit)); /* exception */
  --s10: var(--s-unit);
  --s15: calc(1.5 * var(--s-unit)); /* exception */
  --s20: calc(2 * var(--s-unit));
  --s30: calc(3 * var(--s-unit));
  --s40: calc(5 * var(--s-unit));
  --s50: calc(8 * var(--s-unit));
  --s60: calc(13 * var(--s-unit));
  --s70: calc(21 * var(--s-unit));
  --s80: calc(34 * var(--s-unit));
}

Supported Property Classes

Spacing tokens can be used with padding, margin, and gap property classes. However, not all properties support them.

Full Support (Token Values 5–80)

The following properties have property classes for all spacing tokens: 5, 10, 15, 20, 30, 40, 50, 60, 70, 80.

gap also supports inherit.

No Preset Classes

The following properties do not have preset spacing token property classes. However, you can still specify values via CSS custom properties (--px-s, etc.) or JSX props (px-s="20", etc.).

Margin Auto Support

Margin properties also have auto property classes in addition to spacing tokens.