Style guide
The system, on one page
Every token this template uses, with its name and its receipts. Change global.css and watch this page follow.
01 — Type specimen
display-xl
clamp(44–80px) · Fraunces 500
Know what they said.
display
clamp(40–64px) · Fraunces 500
The whole research loop
h1
48px · Fraunces 520
Essays on asking questions
h2
38px · Fraunces 550
Themes that show their work
h3
30px · Fraunces 580
Evidence, one click deep
h4
24px · Fraunces 600
A quieter kind of confident
body-serif
18.5px · Fraunces 420
Long-form reading happens in the serif register — blog posts, the manifesto, legal prose. It holds a line length near seventy characters and asks nothing of your eyes.
body / small / caption
Geist 400–500
UI prose sits in Geist at 16px with a 1.65 line height.
Secondary UI text steps to 14px.
Captions and meta lines land at 13px — never paragraphs.
Folio lines are Geist Mono, uppercase, tracked +6%
02 — Color tokens
--bg
#FAF6EE · #171310
Page background
--surface
#FFFCF5 · #201B15
Cards, forms
--surface-sunken
#F2ECDF · #2A241C
Alternate bands
--border
#E3DCCC · #3A3227
Hairlines (decorative)
--border-strong
#8A8070 · #7A6D58
Inputs · 3.6 / 3.7:1
--text
#211D18 · #ECE4D6
Ink · 15.5 / 14.6:1
--text-secondary
#4F4940 · #C2B6A4
8.3 / 9.3:1
--text-muted
#6C6458 · #B0A593
Meta only · 5.4 / 7.6:1
--accent
#9C3F2A · #E28B65
Links, marks · 6.2 / 7.1:1
--accent-wash
#F7E6DE · #3A2418
Chip fills
--inverse-bg
#211D18 · #2A241C
Ink bands
--success
#3F6B3F · #8FBF8A
Checks · 5.8 / 8.1:1
Hex pairs and contrast ratios read Paper · Ink; ratios are WCAG 2.x against each token's intended background (full receipts in DESIGN.md). Components reference semantic tokens only — re-brand by editing the ramps in src/styles/global.css.
Radii
xs · 4px
sm · 8px
md · 14px
lg · 22px
Elevation
shadow-1
shadow-2
shadow-3
Warm-tinted, never black. In Ink mode elevation becomes lighter surfaces; shadows 1 and 3 turn off.
Both themes, forced
Paper
The cream edition
Every token on this card is pinned to the light palette.
Ink
The night edition
Same markup, dark tokens forced via data-theme.
03 — Spacing scale
Base-4 grid. Section rhythm: 112px desktop / 72px mobile.
04 — Components & states
Buttons
Heights 36/40/48. Hover, active, focus-visible, and disabled are all designed — tab through to see rings.
Form controls
That doesn't look like an email address.
Success message style
Chips & marks
The highlighter mark is the signature — selection uses the same amber. Try selecting this sentence.
Ink band context
Inside a .band-ink section the semantic tokens remap — this button is the same component, restyled by context alone.
Both themes: use the Paper / Ink toggle in the header — every token above follows.