The unit
Everything spatial is a multiple of 4px. The working scale:
| Token | Value | Typical use |
|---|---|---|
--space-1 |
4px | Icon gaps, hairline padding |
--space-2 |
8px | Chip and badge padding |
--space-3 |
12px | Compact control padding |
--space-4 |
16px | Default gap |
--space-5 |
24px | Card padding |
--space-6 |
32px | Group separation |
--space-7 |
48px | Subsection separation |
--space-8 |
64px | Section-internal blocks |
--space-9 |
96px | Large section blocks |
--space-10 |
140px | Maximum section padding |
Page rhythm
Vertical section padding is fluid: clamp(56px, 9vw, 140px). Sections breathe more as the viewport grows. Never stack two full-padding sections without content between them; collapse to a single rhythm instead.
The content canvas is min(1440px, 90%), centered. Prose measures at most 72ch. Wide elements, tables, media, and interactive panels may break out of the prose measure but not out of the canvas.
Radius
| Token | Value | Use |
|---|---|---|
--radius-sm |
6px | Chips, badges, small controls |
--radius-md |
10px | Buttons, inputs, code blocks |
--radius-lg |
14px | Panels, popovers |
--radius-card |
20px | Cards and media frames |
One radius per element. Nested elements step down: a 20px card contains 10px controls, not 20px ones.
Elevation
Depth comes from three quiet layers, not from heavy shadows:
- Surface color. CRAFTSMAN BLACK ground, then the
--surface-raisedand--surface-raised-2tokens; exact values live in tokens.json. - Hairline borders. 6% white at rest, 12% on hover.
- The lift shadow.
--shadow-card-liftadds a deep drop with a faint orange glow. Hover states only.
If an element needs more separation than these three provide, the layout is too dense. Remove something.