Spacing & shape
One spacing scale for every gap and padding, plus radii, shadows, borders and layers. Layout margins and the gutter are grid tokens, not spacing steps (see Layout grid).
Spacing scale
4 · 8 · 16 · 24 · 32 · 48 · 64, and 128 (--spacing-edge) for the widest page margin
and the top of a page under the nav. Badges have their own small padding.
| Token | Base | Note |
| --spacing-xs | 4px | |
| --spacing-sm | 8px | |
| --spacing-md | 16px | |
| --spacing-lg | 24px | |
| --spacing-xl | 32px | |
| --spacing-2xl | 48px | |
| --spacing-3xl | 64px | |
| --spacing-edge | 128px | |
| --spacing-badge-x | var(--spacing-sm) | |
| --spacing-badge-y | 2px | |
Radius
Tags and badges are small, images and cards medium; the article's band and device use their own
larger radii (Figma), and buttons and pills are fully round.
| Token | Base | Note |
| --radius-none | 0px | |
| --radius-tag | 6px | |
| --radius-badge | 4px | |
| --radius-md | 8px | |
| --radius-lg | 16px | |
| --radius-screen | 10px | device illustration: screen |
| --radius-device | 24px | device illustration: body |
| --radius-band | 30px | article hero band |
| --radius-full | 9999px | |
Shadows
| Token | Base | Note |
| --shadow-medium | 0 0 8px rgba(0,0,0,0.10), 0 20px 60px rgba(0,0,0,0.10) | |
| --shadow-device | 0 -4px 20px rgba(0, 0, 0, 0.10) | |
| --shadow-card | 0 20px 60px rgba(0, 0, 0, 0.10) | story visuals |
Borders, links and focus
Hairlines are always --border-width-thin. Text links thicken their underline on hover; focus shows a ring in currentColor.
| Token | Base | Note |
--border-width-device | 2px | |
--border-width-thin | 1px | |
--link-underline-thickness | 1px | |
--link-underline-thickness-hover | 2px | |
--link-underline-offset | 0.2em | |
--focus-ring-width | 2px | |
--focus-ring-offset | 3px | |
Layers
| Token | Base | Note |
--z-sticky | 50 | article chapter bar |
--z-nav | 100 | site nav, above everything |