Foundations

Spacing

A 4px base. --s-N is N × 4px, so the name tells you the value. One vertical beat, --case-pad, separates every section.

Scale

--s-1 · 4

--s-2 · 8

--s-3 · 12

--s-4 · 16

--s-5 · 20

--s-6 · 24

--s-7 · 28

--s-8 · 32

--s-10 · 40

--s-11 · 44

--s-14 · 56

--s-16 · 64

--s-21 · 84

Show code

<div class="d-spec"><code>--s-1 · 4</code><span class="d-bar d-s1"></span></div>
<div class="d-spec"><code>--s-2 · 8</code><span class="d-bar d-s2"></span></div>
<div class="d-spec"><code>--s-3 · 12</code><span class="d-bar d-s3"></span></div>
<div class="d-spec"><code>--s-4 · 16</code><span class="d-bar d-s4"></span></div>
<div class="d-spec"><code>--s-5 · 20</code><span class="d-bar d-s5"></span></div>
<div class="d-spec"><code>--s-6 · 24</code><span class="d-bar d-s6"></span></div>
<div class="d-spec"><code>--s-7 · 28</code><span class="d-bar d-s7"></span></div>
<div class="d-spec"><code>--s-8 · 32</code><span class="d-bar d-s8"></span></div>
<div class="d-spec"><code>--s-10 · 40</code><span class="d-bar d-s10"></span></div>
<div class="d-spec"><code>--s-11 · 44</code><span class="d-bar d-s11"></span></div>
<div class="d-spec"><code>--s-14 · 56</code><span class="d-bar d-s14"></span></div>
<div class="d-spec"><code>--s-16 · 64</code><span class="d-bar d-s16"></span></div>
<div class="d-spec"><code>--s-21 · 84</code><span class="d-bar d-s21"></span></div>

Token	Value	Role	Status
`--s-1`	`4px`	Hairline nudges, icon optical offsets.	Spec
`--s-2`	`8px`	Icon-to-label (mono), tight stacks.	Spec
`--s-3`	`12px`	Icon-to-label (body), chip gaps, nav padding.	Spec
`--s-4`	`16px`	Popover padding, list gaps.	Spec
`--s-5`	`20px`	Card padding, tile gutter.	Spec
`--s-6`	`24px`	Card grid gaps, heading to content.	Spec
`--s-7`	`28px`	Stacked column gap, nav link gap.	Spec
`--s-8`	`32px`	Button horizontal padding (large).	Spec
`--s-10`	`40px`	Figure padding.	Spec
`--s-11`	`44px`	Page gutter, minimum touch target.	Spec
`--s-14`	`56px`	Two-column gap on case pages.	Spec
`--s-16`	`64px`	Case row gap; --case-pad at 900.	Spec
`--s-21`	`84px`	--case-pad: the one beat between sections.	Spec

Vertical rhythm

Every section pads var(--case-pad) 0 (84px, 64px at 900). Two halves stacked make every section break 168px - the same as the gap between two cases - so the page has one beat between blocks instead of 169, 244 and 40px. Heading to content is 108px in Work and About alike.

Inside components

Gap	Value
Icon to label, body text	`10px` - the flex gap replaces the whitespace node `inline-flex` drops
Icon to label, mono	`6px`
Card padding	`20px` (`--s-5`)
Card grid gap	`14px` - shipped; new grids use `--s-4`
Figure padding	`40px`, `20px` at 640