Foundations
Space & shape
The page gutter, the measures, and the four radii.
Measures are capped in ch rather than px, so they track the type they are set in. --measure-record is a ceiling on a listed record’s description, not a width: a narrower column still wins.
There are four radius steps and there is no fifth. A 50% circle is geometry rather than a corner and is not a step here.
Layout
| Token | Value | Notes | |
|---|---|---|---|
--pad | clamp(18px, 4.4vw, 64px) | ─── Space & measure ─── | |
--sec | clamp(54px, 7vw, 96px) | — | |
--sec-tight | clamp(40px, 5vw, 68px) | — | |
--maxw | 1288px | — | |
--col | 8.3333% | — | |
--row | 52px | — | |
--secondary-text | var(--ink-3-aa) | — | |
--page-pad | var(--pad) | ─── Layout ───────────────────────────────────────────────────────────── | |
--w-page | var(--maxw) | — | |
--w-reading | 46rem | Caps the prose track only, which is what a 73ch measure is for. | |
--measure-record | 66ch | The cap on a listed record's description — a row, a card, a CV entry. In `ch` rather than px so it tracks the type it is set in, and one token rather than the six hand-picked widths surfaces had drifted into. A ceiling, not a width: a narrower column still wins. | |
--scroll-offset | 88px | How far below the viewport top an anchored heading comes to rest — a fixed masthead plus a line of air. |
Radius
| Token | Value | Notes | |
|---|---|---|---|
--radius-sm | 6px | ─── Radius ───────────────────────────────────────────────────────────── Four steps, and there is no fifth. The old law was "0 everywhere"; the White Reset replaces that with a scale small enough to stay quiet on a white page. A 50% circle is geometry rather than a corner and is not a step here. | |
--radius | 8px | images, thumbnails, media frames | |
--radius-lg | 14px | inputs, buttons, small plates | |
--radius-pill | 999px | feature panels, dark plates |
Icons
| Token | Value | Notes | |
|---|---|---|---|
--ico-s | 14px | ─── Icons ─── one stroke weight, three sizes. | |
--ico-m | 16px | — | |
--ico-l | 20px | — | |
--ico-stroke | 1.5 | — |
Stacking order
| Token | Value | Notes | |
|---|---|---|---|
--z-rule | 1 | ─── Stacking ─── seven ranks, named for what sits at each. | |
--z-sticky | 10 | — | |
--z-drawer | 100 | — | |
--z-scrim | 200 | — | |
--z-modal | 210 | — | |
--z-palette | 220 | — | |
--z-toast | 300 | — | |
--z-dropdown | var(--z-drawer) | ─── Stacking ─── five component-facing names onto the seven ranks. ───── | |
--z-overlay | var(--z-scrim) | — |