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 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.

| Property | CSS | Class examples | BP | |---|---|---|---| | p | padding | -p:5, -p:20, … | ○ | | px | padding-inline | -px:10, -px:30, … | ○ | | py | padding-block | -py:15, -py:40, … | ○ | | m | margin | -m:10, -m:20, … | ○ | | mx | margin-inline | -mx:10, -mx:20, … | ○ | | my | margin-block | -my:10, -my:20, … | ○ | | mbs | margin-block-start | -mbs:10, -mbs:20, … | ○ | | g | gap | -g:10, -g:20, … | ○ |

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.).

| Property | CSS | |---|---| | ps | padding-inline-start | | pe | padding-inline-end | | pbs | padding-block-start | | pbe | padding-block-end | | pl, pr, pt, pb | Physical direction padding | | ms | margin-inline-start | | me | margin-inline-end | | mbe | margin-block-end | | ml, mr, mt, mb | Physical direction margin | | cg | column-gap | | rg | row-gap |

Margin Auto Support

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

| Property | CSS | Class | |---|---|---| | m | margin | -m:auto | | mx | margin-inline | -mx:auto | | my | margin-block | -my:auto | | ms | margin-inline-start | -ms:auto | | me | margin-inline-end | -me:auto | | mbs | margin-block-start | -mbs:auto | | mbe | margin-block-end | -mbe:auto |

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