Deep blue-black, quiet glass surfaces and a single aqua accent, used sparingly. Photography of eyes and brains carries the story, framed by a HUD layer. Pages link tokens.css + components.css and never use raw values.
1 · Primitive
Raw values
Abyss neutrals, one aqua ramp, coral for negatives; type, space, radius, motion. --color-aqua-400
2 · Semantic
Meaning
What a value is for. Components read only these. --color-accent
3 · Component
Per component
Button, chip, card, media, grid. --card-radius
01 Colour · semantic
What colours mean
--gradient-aurasection atmosphere
02 Colour · primitive
The ramps
03 Typography
Geist, Geist Mono, one serif
mega · Geist 700
10 min.
headline · Geist 600
Oculometrics.
section · Geist 600
Below thought.
title · Geist 500
Pack and product testing
lead
Nobody controls these on purpose.
body
Hundreds of studies show that oculometrics are an accurate way of measuring how brain circuits respond.
Blurred surface, hairline gradient edge. .is-interactive on the grid adds hover.
.card-foot · negative verdict
.cards
Auto grid
Tune columns with --card-min.
.gridbg / .aura
Atmosphere
Optional: faint graph-paper grid and one soft aqua glow per section.
.stratum
DefaultFaint row
.is-near
NearMuted row
.is-highlight
HighlightSignal wash
The one row that matters.
05 Imagery
Eyes and brains, under a HUD
Macro eyes, rendered brains and scans. Dark-ground photos only. .media applies a violet colour tint and slight desaturation so every source sits in one palette; .is-raw skips the tint for hero shots. Add .hud for corner brackets and .hud-label for mono captions.
● .media.is-raw
.mediatint · --image-tint