01THE LADDER · 10 named steps

all multiples of 4 · most of 8

20.125rem

--s-0· hairline · ring offset

40.25rem

--s-1· icon-text gap · chip inset

80.5rem

--s-2· ★ default gap · stack rhythm

120.75rem

--s-3· button v-pad · input pad

161rem

--s-4· ★ row gap · card stack · body lead

241.5rem

--s-5· card pad · section inset

322rem

--s-6· ★ large card · panel pad

483rem

--s-7· section v-margin · hero pad

644rem

--s-8· section break · feature gap

966rem

--s-9· page section gap

1288rem

--s-10· ★ hero v-pad · marketing only

02PADDING / INSET · how each step looks as breathing room

box = 96 × 96

s-1 · tight

s-2 · compact

s-3 · cozy

★ s-4 · default

s-5 · card

★ s-6 · large

03GAPS · flex/grid rhythms

prefer gap over per-element margins

gap-8 · tight pill row

gap-12 · chip row

★ gap-16 · default row

gap-24 · card grid

04IN CONTEXT · spacing on a real card

annotated · all 8pt-aligned

card · pad 32

Outbound call campaign

Send Mo to the leads in your CSV. Personalized voicemail · live transfer to you on answer.

★ ACTIVE

QUEUED · 248

CONVERTED · 31

START CAMPAIGN btn · pad 12 / 20 stack · gap 16 row · gap 8

05RULES OF THUMB · when to reach for what

opinionated defaults

The 8-rule

Every value is a multiple of 4; every value above 8 is a multiple of 8. If you ever need an in-between number, you don't — go up or down to the nearest step. Never use 10, 14, 18, 30.

Density first

Default pad is 16. Default gap is 8 for chips, 16 for rows, 24 for cards in a grid. Reach for 32+ when the surface is a page, not an element.

Section breath

Vertical rhythm on long pages: section v-pad 64 on dashboard, 96–128 on marketing. Use the biggest step that still feels intentional, not the most.

06TOKEN REFERENCE

--s-* · 8pt scale

--s-0hairline2px

--s-1icon gap4px

★ --s-2stack8px

--s-3input pad12px

★ --s-4row16px

--s-5card pad24px

★ --s-6large pad32px

--s-7hero pad48px

--s-8section64px

--s-9marketing96px

★ --s-10hero128px

GRID UNITbase8px (0.5rem)