Foundations
Space & sizing
Spacing, type, and radii are tuned to the golden ratio (φ ≈ 1.618). One √φ ladder anchored at 16px drives both the type scale and spacing, radii follow Fibonacci, and body line-height is φ itself — so the whole system breathes on one proportion.
The golden ladder. Each step is √φ (×1.272) from the last, so every other step is an
exact φ. Spacing and type share the same values (13 · 15 · 19 · 24 · 31 · 39 · 50 · 64) — a gap and a font
size are never arbitrary relative to each other. The 4 / 8 micro-steps and container widths stay practical;
not everything benefits from φ.
Spacing scale
The golden √φ ladder, shared with the type scale. Micro-steps (4, 8) stay on a practical grid.
space-1 4px
space-2 8px
space-3 13px
space-4 15px
space-5 19px
space-6 24px
space-8 31px
space-10 39px
space-12 50px
space-16 64px
Radius
Soft, never sharp. Radii follow Fibonacci (5 · 8 · 13 · 21 · 34) — ratios that converge on φ.
sm
5px · chips, inputs
md
8px · buttons
lg
13px · cards
xl
21px · panels, modals
pill
999px · badges
Elevation
Depth signals focus, not flair. Two practical levels plus a hairline.
xs
resting cards
sm
raised content
md
popovers, hover
lg
modals, dialogs
Layout tokens
| Token | Value | Use |
|---|---|---|
--phi | 1.618 | Golden ratio — governs the type & space ladder |
--sidebar-w | 264px | Navigation rail (practical) |
--topbar-h | 60px | Sticky context bar |
--content-max | 832px | Readable content column (practical) |
breakpoint | 900px | Rail collapses to bottom tabs below this |