Colour & tokens
Every colour is a CSS variable with a light and a dark value. Each swatch shows both; click to copy the token.
Canvas & surfaces
The stack of surfaces from the page canvas up to elevated menus. Warm near-black in dark, cool off-white in light.
Borders & dividers
Hairlines carry all structure — there are three weights and nothing heavier.
Text
Three levels of emphasis. Primary for content, secondary for support, tertiary for muted meta.
Accent — electric yellow
One primary accent. Use the fill for borders/swatches, accent-fg for readable text/icons (it darkens to gold on light surfaces).
State — info & success
Each state has a foreground, a wash background, and a border line so chips and banners re-skin per theme.
Severity
A four-step severity ramp — critical, high, medium, low — each with foreground, wash, and line.
Glass & ambient
Translucent fills for frosted surfaces plus the aurora wash and dotted texture. Shown over each theme's canvas so the alpha reads.
Scalars
Non-colour tokens.
--blur