VisualAesthetic · v0.3
The system behind the site.
Tokens, type, and components rendered live from the same code the pages use. Color, washes and type show the light and dark themes side by side. Each component has its own switch, so you can flip one without changing the page. Components read semantic tokens only, never hex.
Color
Foundations and aliasesFoundations
- grey-50#f3f4f6
- grey-100#eef0f3
- grey-150#e9ebee
- grey-200#dde0e5
- grey-300#c8ccd3
- grey-400#aeb3bc
- grey-500#8d929c
- grey-600#545a64
- grey-650#4b515b
- grey-800#23262c
- grey-850#1d2027
- grey-900#15181d
- grey-950#0e1013
- slate-800#223044
- lime-400#c8f542
- green-700#396619
- green-800#2d670e
Aliases
- bggrey-150
- surfacegrey-50
- surface-2grey-200
- linegrey-300
- line-strongslate-800
- textslate-800
- text-2grey-650
- text-3grey-600
- accentlime-400
- accent-inkgreen-700
- on-accentgrey-950
- accent-markgreen-800
- focusgreen-700
- bggrey-950
- surfacegrey-900
- surface-2grey-850
- linegrey-800
- line-stronggrey-100
- textgrey-100
- text-2grey-400
- text-3grey-500
- accentlime-400
- accent-inklime-400
- on-accentgrey-950
- accent-marklime-400
- focuslime-400
Foundations are the raw colors: cool greys named by lightness, one slate ink, a lime and two greens. Aliases name a job (the page, the text, the accent) and pick a foundation in each theme, so a component asks for text and gets slate-800 in daylight and grey-100 in the dark. Accent as a fill pairs with on-accent; accent as text renders through accent-ink. Marks that point at something use accent-mark, the green in daylight because lime is too light to see on the pale ground.
Washes
Two colors per project- Colors
- Two per project, set in the CMS: a main color and a partner. The site's own pages share green and teal.
- Blobs
- Four soft radial blobs, two of each color, in a box that reaches up behind the nav and fades out into the page below the header.
- Drift
- Each blob drifts on its own loop of 41 to 59 seconds, stepped about 15 times a second so the GPU stays quiet. With reduced motion the blobs hold still.
- Frost
- The Bench rain's frost speckle rides inside each blob: a 160px tile at 6%, overlay blend.
- Daylight
- In the light theme each color mixes 48% toward white (40% on phones) and multiplies into the page; in the dark it sits at 62% (48% on phones).
- Images
- Case studies lay their lead image over the wash, lightly blurred, anchored right.
- Bookend
- The same pair closes each page behind the footer, mirrored so it rises from the bottom.
Type
Newsreader · Geist · Geist MonoDepth
Five levelsnav-inset · nav-hisurface · linenav-hi · nav-shadetrack-filter · nav-hibtn-shade · nav-hinav-inset · nav-hisurface · linenav-hi · nav-shadetrack-filter · nav-hibtn-shade · nav-hiLayers
A header is six layers, lowest first: the page ground, the color wash, the frost speckle, the blueprint guides, the film grain, then the type and nav. Hover or tap to pull them apart. The guides here are drawn lines standing in for the live ones.
Space
4 to 120Components
Rendered liveButton
Primary pill, quiet pill, underline. Hit targets never drop below 44px.
Tag
MetaList
One rule language: a HUD header (mono readout over a segmented rail) opens the list, quiet rules separate the rows. Without hud, a strong rule opens it.
Figure
Wells hold every image; captions are serif italic and numbered because the text references them.
Ticker
Pauses on hover and focus; reduced motion renders a static list.
FieldNote
An aside in the rail column, never inside the prose.
BeforeAfter
A native range input over the frame: drag, swipe, arrow keys (shift for 10), and screen readers all work for free.
Hotspots
Markers are buttons with aria-expanded; the active callout reads through an aria-live panel below the frame. The first marker opens on entry, never under reduced motion.
FlowStepper
Screen above, controls below; swipe changes step on touch. Content swaps with a cross-fade and a 12px rise on the base duration.