Identity / Layout and grid
Layout and grid
One 12-column grid, a 1280px maximum, an 8px spacing scale and four section patterns. Vary the pattern from section to section.
01Grid
1
2
3
4
5
6
7
8
9
10
11
12
| Token | Value |
|---|---|
--max-w | 1280px |
| Columns | 12 |
--gutter | 32px · 24px at ≤560 · 20px at ≤360 |
--sect-pad | clamp(56px, 7vw, 112px) |
| Breakpoints | 560 phone · 980 tablet · 1080 nav collapses |
02Spacing scale
--space-1--space-2--space-3--space-4--space-5--space-6--space-7--space-8--space-9--space-10--space-11--space-1203Section patterns
Split 4/8 · sticky head
Head row 6/5 · lede beside H2
Full · 68ch measure
Band · full-bleed surface or inverse
- No more than two identical section layouts in a row.
- Section head: mono number on its own line, then the H2 (44 → 28px), then an optional 18px lede.
- Alternate cream and surface bands for rhythm; the inverse band is reserved for the close.
04Radius
| Token | Value | Use |
|---|---|---|
--radius-xs | 4px | Code, tags |
--radius-sm | 6px | Small chips |
--radius-button | 8px | Buttons, inputs |
--radius-md | 10px | Cards, figures |
--radius-lg | 14px | Large panels |
--radius-full | 9999px | Pills, status dots |