Design system

An appendix: every design token the site is built from, with the measured contrast ratio that admitted it.

Color

Two palettes, each selected and measured against its own ground rather than derived from the other. A token showing one swatch keeps that value in both schemes: a filled color field carries its own ground with it, so re-stepping it would only weaken the identity.

--bone #f7f2e9 light · #1a1613 dark
Page ground
--paper #fffdf9 light · #221d18 dark
Raised ground
--bench #f2ebdd light · #14100d dark
Recessed ground
--stage #e6dfd0 light · #1e1915 dark
Viewer stage
--rail-bg #efe7d9 light · #201b16 dark
Rail ground
--band-1 #efe3cd light · #302820 dark
Rail tint, group 1
--band-2 #e9e2d0 light · #29221a dark
Rail tint, group 2
--band-3 #e3ddcb light · #231d17 dark
Rail tint, group 3
--ink #191512 light · #f2ebdd dark
Body text
--ink-soft #3d362f light · #d9cfbd dark
Secondary text
--ink-2 #5f564c light · #b3a795 dark
Muted and italic text
--rule #ded3c1 light · #3a3229 dark
Hairline rule
--rule-2 #cabda6 light · #4a4036 dark
Emphasized rule
--link #b84a19 light · #d9662b dark
Orange as text — steps lighter in dark, not darker
--grid #ded3c1 light · #332c24 dark
Chart gridline
--code-bg #221e1a light · #12100d dark
Code ground
--mark #8d8375 light · #a19582 dark
Data mark, de-emphasized
--mark-emphasis #b84a19 light · #e0a32e dark
Data mark, emphasized — orange on light, amber on dark
--ink-block #2a2521 · both schemes
Dark filled field
--ink-on-dark #e9dfcc · both schemes
Text on the dark field
--ink-dim-on-dark #b7aa93 · both schemes
Muted text on the dark field
--cta #b84a19 · both schemes
Orange as a filled field
--cta-ink #fff3ea · both schemes
Text on the orange field
--amber #e0a32e · both schemes
Brand amber, filled fields only — never text, never a data mark on light
--amber-ink #2b1e04 · both schemes
Text on the amber field

Contrast

Every pairing used as text, in both schemes, with its measured ratio. WCAG AA at body size is 4.5, and each of the 20 pairings below clears it.

Measured contrast ratio of every text pairing, in each scheme
Pairing	Role	Light	Dark
--ink on --bone	Body text on the page	16.27	15.16
--ink on --paper	Body text on a raised ground	17.86	14.08
--ink on --bench	Body text on a recessed ground	15.30	15.95
--ink on --stage	Viewer text on its stage	13.68	14.69
--ink-soft on --bone	Lede and prose	10.66	11.65
--ink-soft on --paper	Prose on a raised ground	11.70	10.83
--ink-2 on --bone	Asides and numerals	6.44	7.60
--ink-2 on --paper	Asides on a raised ground	7.07	7.06
--ink-2 on --bench	The unlanded-prose notice	6.06	8.00
--ink-2 on --rail-bg	Rail chrome	5.85	7.22
--ink-2 on --band-1	Rail numerals, group 1	5.66	6.12
--ink-2 on --band-2	Rail numerals, group 2	5.56	6.64
--ink-2 on --band-3	Rail numerals, group 3	5.29	7.05
--link on --bone	Links on the page	4.67	5.04
--link on --paper	Links on a raised ground	5.13	4.68
--cta-ink on --cta	The orange link block	4.78	4.78
--amber-ink on --amber	The amber link block	7.32	7.32
--ink-on-dark on --ink-block	The dark link block	11.47	11.47
--ink-dim-on-dark on --ink-block	Muted text on the dark block	6.63	6.63
--paper on --ink	The skip link	17.86	14.08

The data marks are graphical rather than text, so their threshold is 3: --mark on --bone 3.34 light, 6.11 dark.--mark-emphasis on --bone 4.67 light, 8.09 dark. The brand amber measures 1.99 on the light page ground, so it can carry neither text nor a mark there — which is why the emphasized mark in a chart is the orange on light and the amber on dark, the opposite of what brand instinct wants.

Type

One family, display through captions. Monospaced type appears only inside a real code block.

--t-display Hero

--t-h1 Page heading

--t-h2 Section heading

--t-h3 Subheading

--t-body Body

--t-small Aside

--t-tiny Numeral

Space

A 4px base, used for padding, gaps and rhythm alike.

--s1 4px

--s2 8px

--s3 12px

--s4 16px

--s5 24px

--s6 32px

--s7 48px

--s8 64px

--s9 96px

Measure

Two bounds, and every route obeys both. Prose stops at the measure; a table, a chart or a figure is allowed past it and stops at the content cap. The cap bounds what a full-bleed strip lays out, never the strip: a band’s ground and its top rule still run the whole column.

--measure 62ch — Prose

--content-max 1120px — A page frame’s content

--rail-w 290px — The navigation rail