Spacing
| Token | Value | Use |
|---|---|---|
gutter | 32px | Page side gutter and the gap between the hero's text and art columns. |
card-pad-y | 26px | Top padding of every card (sides and bottom 24px). |
card-pad-x | 24px | Side and bottom padding of every card. |
nav-pad-x | 22px | Nav tab side padding (13px top, 11px bottom). |
button-pad-x | 26px | Form Subscribe button side padding (14px vertical). Header button uses 22px. |
control-pad-y | 14px | Input and form button vertical padding. |
control-pad-x | 16px | Input side padding. |
section-gap | 96px | Space above a full-width band (newsletter, channel); 56px between course sections. |
torn-edge | 9px | Depth of a torn-paper edge mask; keep 26px+ padding inside a torn card so text clears it. |
Radius
| Token | Value | Use |
|---|---|---|
radius | 8px | 8px on outline cards (essay, case study, path, series, most popular, course module rows), inputs, buttons, charts, figures, dialogs and the video. Torn-paper cards and bands have no radius: their edge is the torn mask. Printed sheets are square. |
radius-pill | 999px | Pill controls: Listen, share, sort and view toggles, the theme switch; the BETA / NEW / DRAFT badges. |
radius-round | 50% | Circles: icon controls (play, scroll-down, back-to-top), icon discs, the stops on the career timeline. |
Layout
| Token | Value | Use |
|---|---|---|
wrap | 1180px | Max page width, header to footer. |
read | 712px | Essay column width. |
text-measure | 68ch | Max line length for prose outside essays. |