Internal reference
Switch the mode in the header and everything below changes with it. Lossless only ever had one look; light and vibrant are derived from it, following the approach in context-v/blueprints/Three-Modes-Derivation.md.
One file serves every mode today. Parts of it are near-white, which washes out on light mode's newsprint; a print-ink variant is still needed.
Light
A newspaper, or a vintage annual investor report
Newsprint and ink. Newsreader serif for headlines and body, IBM Plex Mono for labels and figures. Hairline and double rules. One oxblood accent. No brand gradients: every gradient token collapses to solid ink.
Dark
The Lossless look as it has always been
A near-black violet ground, Inter, and the cyan → purple → crimson → orange gradient on marks, rules, and display type.
Vibrant
Gradient glass
Dark-based. The gradient stops become a fixed aura behind the page, glass surfaces with backdrop blur, radiant shadows, and glowing gradient type.
What components read. Values shown are for the current mode.
Background
--background
Foreground
--foreground
Card
--card
Muted
--muted
Muted text
--muted-foreground
Border
--border
Primary
--primary
Secondary
--secondary
Accent
--accent
Ring
--ring
The raw Lossless palette. The same in every mode.
--brand-cyan
#22A6B5
--brand-purple
#9138E0
--brand-crimson
#D9233B
--brand-orange
#F59C49
--brand-lime
#BFEF47
--brand-aqua
#04E5E5
Full in dark, louder in vibrant, and solid ink in light.
Lossless
Display
--typeface-display
Notes from a 2 Year Rabbit Hole
Body
--typeface-body
Coding agents are good at writing a whole, coherent page of HTML and CSS in one go.
Mono
--typeface-mono
No. 06 · 1,166 context files
The --fx-* dial: quiet in light, a lift in dark, glass and glow in vibrant.
.fx-surface
A card that prints flat, lifts in dark, and turns to glass in vibrant.
.fx-text-glow
Radiant type