Spacing

An 11-step spacing scale from 4 to 160 px. All gap, padding, and margin values must use --sp-* tokens — arbitrary px values are not allowed. The single source of truth is app/_v2/tokens.css.

Scale

Bar widths visualize the relative size of each token, normalized against the maximum value (160 px).

--sp-xs

4px

--sp-sm

8px

--sp-md

12px

--sp-lg

16px

--sp-xl

24px

--sp-2xl

32px

--sp-3xl

48px

--sp-4xl

64px

--sp-5xl

96px

--sp-6xl

128px

--sp-7xl

160px

Usage

Spacing tokens cover three contexts. Use smaller values (xs–lg) inside components, mid-range values (xl–2xl) between components, and larger values (3xl–7xl) for section-level rhythm.

Inside components

Fine-grained spacing such as icon-to-text gap or button and input padding. Use xs(4)–lg(16).

Between components

Card grid gaps, form field spacing, nav item separation, and similar layout gaps. Use xl(24)–2xl(32).

Section rhythm

Page section padding-top/bottom and large grid gaps. Use 3xl(48)–7xl(160).