Spacing Tokens

This page covers Lism’s Fibonacci-based spacing tokens and the property classes that use them.

SPACE: Spacing Scale

Spacing is built on a scale derived from 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, because those gaps can feel too coarse in practice, 5 and 15 are added as fine-tuning steps at 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 work with padding, margin, and gap property classes, but not every property has a preset class.

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

These properties have no preset spacing-token classes, but 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.

For details on each property class, see the Property Class reference table.