Internal · Tier 1A · Publication build
Style guide.
Every token, every type level, every motion sample. This route ships deployed-but-unlinked so design review can screenshot against it. It is the visible record of the system. When a screen looks wrong, it is wrong because it left this page.
Color
Five canonical tokens, one accent, two modes. --accent is vermilion #FF4D1A in dark mode and #E04318 in light mode (90% saturation).
--bg
Page background
--fg
Primary text
--muted
Secondary text / metadata
--rule
Hairline border
--accent
Single accent — primary CTA, hover underline
--surface
Lifted card / pull-quote band
Typography
Seven type levels. Display sets the room temperature; body LF carries essays at a 680px measure; mono signals technical authority.
Hero — clamp(60, 9vw, 144)
Synthesis.
H1 — clamp(40, 5vw, 72)
Body, mind, signal, build.
H2 — clamp(28, 3vw, 44)
A publication that happens to be a person.
H3 — 24px
Section openers and stream headers.
Body LF — 19px / 1.55
The long-form column. Generous line height, single 680px measure, designed for thirty minutes of reading without fatigue.
Body UI — 16px / 1.5
Navigation, captions, and the rest of the publication chrome live here.
Caption — 13px / +0.04em / uppercase
Body · 2026-05-11 · 7 min read
Fonts
Free fallback pair is loaded via next/font/google. Tier 4E swaps to the paid faces via next/font/local once Sam licenses Pangram Pangram and Klim Type Foundry.
--font-displayDisplay (Fraunces — paid PP Editorial New pending)The quick brown fox jumps over the lazy dog. 1234567890.--font-bodyBody (Source Serif 4 — paid Tiempos Text pending)The quick brown fox jumps over the lazy dog. 1234567890.--font-sansSans / UI (Inter — paid Söhne pending)The quick brown fox jumps over the lazy dog. 1234567890.--font-monoMono (JetBrains Mono — staying free)The quick brown fox jumps over the lazy dog. 1234567890.
Motion
Locomotive-school. Heavy, well-engineered movement. No bounce.
- --motion-ease-out
- cubic-bezier(0.16, 1, 0.3, 1)
- --motion-duration-base
- 800ms
- --motion-stagger
- 40ms (per line, not per character)
- --motion-link-underline
- 240ms draw-from-left
- --lenis-lerp
- 0.08
- --lenis-duration
- 1.2
Link draw-from-left underline
Hover this link to watch the underline draw from the left at 240ms.Theme
Dark by default. The toggle in the footer flips data-theme on <html>. Both modes render below so the contrast can be checked side by side.
data-theme="dark"
Synthesis across body, mind, signal, and build.
This block lives inside data-theme="dark" so every CSS variable on the page flips locally. The publication defaults to dark; the toggle in the footer (built by Workstream 1D) sets the attribute on <html>.
--bg--fg--muted--rule--accent--surfacedata-theme="light"
Synthesis across body, mind, signal, and build.
This block lives inside data-theme="light" so every CSS variable on the page flips locally. The publication defaults to dark; the toggle in the footer (built by Workstream 1D) sets the attribute on <html>.
--bg--fg--muted--rule--accent--surfaceAnti-slop gates
Commit-blocking. If any of these appear on any rendered page, the design has drifted off the brief. Particle systems, glassmorphism, gradient blobs, animated meshes, mouse-position 3D hero objects, glowing gradient buttons, "Scroll to explore" affordances, character-level type reveals, and the eight words on the brief's lexicon list.