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--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--s {
  --s-unit: 0.5em;
}

Adding the set--s class swaps --s-unit to 0.5em within that scope, recalculating --s10–--s80 against the current font size. Use this for components like Buttons or Badges where internal spacing should scale with the element’s font size.

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

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

Supported Property Classes

Spacing tokens work with every property class in the padding, margin, and gap families.

Supported Properties (Token Values 5–80)

The following properties have property classes for the spacing tokens 5, 10, 15, 20, 25, 30, 35, 40, 50, 60, 70, 80. All of them support breakpoint variants as well.

gap also supports inherit.

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.