Color.
// one accent · no gradients · no github primer hexes--bg #1C1D21page background
--card #1E2025cards, panels
--surface #22242Acode blocks, inputs
--hairline #2A2C33rules, resting borders
--border #3A3D47interactive borders (#4A4E5C hover)
--muted #8F93A3labels, comments, folios
--text-2 #A0A4B2body secondary
--text-1 #C7CAD6body, links at rest
--ink #F4F4F0headlines, wordmark
--accent #A7B5F2periwinkle — spots only: brackets, periods, keywords, CTAs
--error #D98C85form validation only (functional)
Type scale.
// newsreader · hanken grotesk · jetbrains monoDisplay.newsreader 500 · clamp(44, 6.4vw, 84) / 1.02
Page title.newsreader 500 · clamp(38, 4.8vw, 64) / 1.05
Section.newsreader 500 · clamp(30, 3.6vw, 46) / 1.1
Card headingnewsreader 500 · clamp(19, 2.1vw, 27) / 1.2
Lede paragraphhanken 400 · clamp(16, 1.5vw, 18–19) / 1.65
Body copyhanken 400 · 14.5–15 / 1.65
Card body / captionshanken 400 · 13.5 / 1.6
nav / buttons / data — 12.5mono 400–700
[ EYEBROW — 11 / LS 0.1EM ]mono 400 · uppercase · accent brackets
// comment label — 10.5–11.5 italicmono 400 italic · lowercase
Spacing.
// one scale — no ad-hoc values4
8
12
16
24
32
48
64
96
128
Radii & elevation.
// depth from layers, not shadowsr-0 · e-0 flat
r-2 chips/inputs
r-3 · e-1 card
e-2 stacked planes
e-h hover glow
Motion.
// "flows into place" — each element glides once, then holds--t-hover 150mshover, focus, copy feedback
--t-flow 1100mssection flow-in — eased in, never flung
--t-hero 1500mshero sequence only — opt in with data-flow-dur="hero"
--t-nav 300msmasthead condense on scroll
--t-veil 560msveil holds opaque this long — reveals read it back and wait, so the splash dissolves into the assembly
--t-veil-fade 420msthe dissolve itself
--t-veil-rm 440msshorter hold under reduced motion
--stagger 120msbetween blocks, reading order
--easecubic-bezier(0.16, 1, 0.3, 1) — hover, nav
--ease-flowcubic-bezier(0.4, 0, 0.2, 1) — reveals
--lift -5pxcard / panel hover raise + --shadow-lift depth
travelpaired columns ±56px in from their own side (data-flow left/right) · stacked blocks 44px from below (up) · below 768 everything flows up, since the columns have collapsed · glide, never drop
stagger ruleoffset is rank among the data-flow-i values arriving together, not the authored index — a lone late block starts at once instead of waiting out the section
hero 3dcode block on 2 offset planes; planes drift +10/+5px over first 360px of scroll
ambient 3ddepth particle grid — accent points on --bg, 10% alpha ceiling (above ~10.5% a lit point drops --muted under 4.5:1), ~31s drift, ≤5° pointer tilt, ≥24ms between redraws · scroll dollies the camera (~5600px per z-pass) — the field registers through relative movement, not alpha · skipped on coarse pointer, <768px, no webgl, forced-colors
hero planesthree sheets, monotonic in fill AND border (--plane-3 → --plane-2 → --plane-1); deepest is translucent so the ambient field shows through it
back / forwardreads as a return, not an arrival: $ cd -, 200ms hold, and content already on screen is never re-animated
page veilroute label + role line on every navigation; static markup so it covers from first paint, CSS-cleared, JS backstop, watchdog if the navigation never commits
reduced motionreduce, not remove: cross-fades stay (520ms / 70ms stagger); the veil still greets on arrival as a pure fade, but never delays an exit; no travel, parallax or drift; ambient layer paints one still frame; cursor blink off
Breakpoints.
// exactly three390single column, stacked hero, wrapped nav
7682-up grids, hero side-by-side
14403-up case grid, content well 1200