Foundations
Spacing and shape
One spacing scale, a handful of geometry tokens that every grid reads, and a short list of what shapes are allowed. Geometry values are resolved at this frame’s width.
This frame:
Scale
Paddings, gaps between text and offsets come from this scale, nothing in between.
Geometry tokens
Set once on every top-level block (.page > *), with the mobile values in the mobile block, so every grid, the menu and its blur layers agree.
| Token | Desktop | Mobile | Here | What it is |
|---|---|---|---|---|
--frame | 8px | --gap-m (5px) | The black lines: every grid gap and the outer black edge | |
--gap-m | — | 5px | The mobile line width; every mobile size that subtracts gaps reads it | |
--bar | 64px | 56px | The menu bar’s row | |
--band | 80px | 66px | The bar plus the black edge above and below it; anchors land under it | |
--inset | 56px | 20px | Panel padding at the sides; the menu’s side inset | |
--screen | 100svh (100vh where svh is missing) | One screen: every section is at least this tall | ||
Shape
- Panels have no radius, no shadow and no border: their edges are the black gaps around them.
- Strokes are 3px: illustration lines (non-scaling), the radio and checkbox squares, icons, the focus outline.
- Every link and control is at least 44px tall: the target a finger needs, whatever the text size.
- Focus is a 3px
currentColoroutline, 4px away, so it reads on every panel colour. - Radius is kept for UI drawn inside illustrations.