Preview card 03

Spacing & layout — a document rhythm, not an 8pt grid

Read from index.html
section padding, grid gaps, .wrap

The home page runs an unrounded, document-derived scale — 13px cells, 17px panel padding, 22px nav gaps. This is deliberate and should be preserved; snapping it to multiples of 8 flattens the annotated-document feel. Every value below was read from the source, deduped and named.

Scale

RulerTokenValueWhere it is used in the source
--sp-14pxRecord-field cell gap
--sp-28pxButton icon gap, chip inner gap
--sp-312pxButton padding-block, panel row padding-y
--sp-416pxCard grid gap
--sp-520pxCard padding-inline, mobile gutter
--sp-622pxNav gap, issue-card padding-top
--sp-726pxSection head → content
--sp-828pxPage gutter
--sp-938pxMargin note → content column
--sp-1048pxHero column gap
--sp-1164pxBand padding-block
--sp-1266pxDark featured band padding-block

Vertical rhythm

TokenValueSection
--hero-y56px.hero padding-top (8px bottom — the panel carries the gap)
--field-y60px.field — the white corpus band
--band-y64pxsection.band — method, issues, ethos
--band-y-dark66px.feat — the dark featured slab sits 2px taller
--footer-y52pxfooter padding-top (56px bottom)
--header-h62pxSticky masthead
--topline-h3pxTri-segment ribbon above everything

Layout columns

Max width 1180px, gutter 28px (20px at ≤560px). Every grid in the page is asymmetric — nothing is a 50/50 split.

--col-note
172px
.doc content — gap --sp-9 38px
.hero editorial — 1.12fr
filing panel — .88fr · gap 48px
.feat argument — 1.1fr
ledger — .9fr · gap 44px
.fieldhead heading — 1fr
--col-cap 240px, right-aligned
64px
method title — 1fr
explanation — 1.15fr
footer brand — 1.5fr
.8fr
.8fr · gap 40px

Breakpoints

Max widthWhat changes
1000px.doc → 1 col (note rule thins 2px→1px) · card grids and standards → 1 col · footer → 2 col
960pxDisclaimer tag hidden · nav → ≡ drawer · hero and featured → 1 col · method row → 64px/1fr/1.15fr becomes 44px/1fr with prose wrapping to column 2
860px.fieldhead → 1 col, caption left-aligns
560pxGutter 28px→20px · record cell 13px→11px · footer → 1 col

overflow-x:hidden on body; no horizontal scroll at any width. Row heights stay 44–52px, at or above the 44px touch minimum.

← All preview cards