Spacing Tokens

This page covers Lism’s spacing tokens — a Fibonacci-based harmonic scale with selected lower-end filler values — and the property classes that use them.

SPACE: Spacing Scale

The main scale from --s40 upward follows the Fibonacci sequence ((0, 1,) 1, 2, 3, 5, 8, 13, 21, 34, …). The base unit is --s-unit (default calc(var(--fz--base) * 0.5) ≈ 8px).

Because Fibonacci-only steps would leave the lower end too coarse, --s5 (4px), --s15 (12px), --s25 (20px), and --s35 (32px) are added as selected filler values between the main scale tokens.

:root,
.set--var\:s {
  /* Spacing base unit ≈ 8px */
  --s-unit: calc(var(--fz--base) * 0.5);

  --s10: var(--s-unit);            /* ≒ 8px */
  --s20: calc(var(--s-unit) * 2);  /* ≒ 16px */
  --s30: calc(var(--s-unit) * 3);  /* ≒ 24px */
  --s40: calc(var(--s-unit) * 5);  /* ≒ 40px */
  --s50: calc(var(--s-unit) * 8);  /* ≒ 64px */
  --s60: calc(var(--s-unit) * 13); /* ≒ 104px */
  --s70: calc(var(--s-unit) * 21); /* ≒ 168px */
  --s80: calc(var(--s-unit) * 34); /* ≒ 272px */

  /* Lower-end fillers (up to s40) */
  --s5:  calc(var(--s-unit) * 0.5); /* ≒ 4px */
  --s15: calc(var(--s-unit) * 1.5); /* ≒ 12px */
  --s25: calc(var(--s-unit) * 2.5); /* ≒ 20px */
  --s35: calc(var(--s-unit) * 4);   /* ≒ 32px */
}

.set--var\:s {
  --s-unit: 0.5em;
}

Adding the set--var:s class swaps --s-unit to 0.5em within that scope, recalculating --s10–--s80 against the current font size. This is useful for parts like Buttons or Badges where internal spacing should follow the element’s font size.

<!-- Button padding scales with the button's own font-size -->
<button class="set--var:s -fz:s -py:10 -px:20">...</button>

<!-- You can also override --s-unit with any value -->
<button class="set--var:s -p:10" style="--s-unit: .4375em">...</button>

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, 25, 30, 35, 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 (--ps, etc.) or JSX props (ps="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.