Design system

Scales

Spacing, radius and layout tokens, with what each one is for.

Spacing

TokenValueUse
gutter32pxPage side gutter and the gap between the hero's text and art columns.
card-pad-y26pxTop padding of every card (sides and bottom 24px).
card-pad-x24pxSide and bottom padding of every card.
nav-pad-x22pxNav tab side padding (13px top, 11px bottom).
button-pad-x26pxForm Subscribe button side padding (14px vertical). Header button uses 22px.
control-pad-y14pxInput and form button vertical padding.
control-pad-x16pxInput side padding.
section-gap96pxSpace above a full-width band (newsletter, channel); 56px between course sections.
torn-edge9pxDepth of a torn-paper edge mask; keep 26px+ padding inside a torn card so text clears it.

Radius

TokenValueUse
radius8px8px 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-pill999pxPill controls: Listen, share, sort and view toggles, the theme switch; the BETA / NEW / DRAFT badges.
radius-round50%Circles: icon controls (play, scroll-down, back-to-top), icon discs, the stops on the career timeline.

Layout

TokenValueUse
wrap1180pxMax page width, header to footer.
read712pxEssay column width.
text-measure68chMax line length for prose outside essays.

The Bets & Ships newsletter

Get the next one by email

For product leaders and hiring managers: how product work is changing after AI, with the evidence attached.

  • One essay every TuesdayHow product work is changing.
  • The evidence attachedCharts, numbers, every source.
  • Case studies from the buildThe tools, and what broke.

Free. You’ll get one email to confirm first.