Colors
The palette follows a Vaporwave Win95 aesthetic — lush green foliage surfaces with warm terracotta accents and a retro CRT feel.
Two-tier token system
| Layer | Purpose | Used by |
|---|---|---|
| Primitive | Raw named palette values | Semantic tokens only |
| Semantic | Purpose-based aliases that reference primitives | Components |
Components must reference semantic tokens only. When the theme changes, only semantic values update — components need zero changes.
Primitive palette
Core greens
--primitive-accent-green#739584--primitive-secondary-green#5a7a6a--primitive-dark-green#1a3328--primitive-header-green#516650Surfaces & chrome
--primitive-gray-50#F0F8F2--primitive-gray-100#e0ede6--primitive-gray-400#7a9488--primitive-gray-500#3a5045--primitive-gray-600#2e4038--primitive-gray-700#243530--primitive-gray-800#1a2a1e--primitive-black#0A0C05Accents
--primitive-accent-terracota#e8637a--primitive-darker-terracota#3d1f2a--primitive-accent-gold#d4a94a--primitive-text-olive#35401bBevel system
The Win95 raised/sunken border effect used across all interactive components.
Raised bevel
--bevel-highlight#8EB49D--bevel-shadow#0A0C05Sunken bevel (inputs, tracks)
--sunken-outer-dark#3c5840--sunken-outer-light#b4ccb6--sunken-inner-dark#182818--sunken-inner-light#e2f4e4Panel borders
--panel-border-outer#0A0C05--panel-border-inner#94B28ESemantic tokens — dark theme (default)
Backgrounds
--color-bg-pageprimitive-gray-50--color-bg-cardprimitive-gray-800--color-bg-inputprimitive-gray-700--color-bg-headerprimitive-header-green--color-bg-surface-mutedprimitive-secondary-greenBorders
--color-border-defaultprimitive-gray-600--color-border-subtleprimitive-gray-500--color-border-hairlineprimitive-gray-100Text
--color-text-primaryprimitive-black--color-text-secondaryprimitive-gray-400--color-text-mutedprimitive-text-olive--color-text-on-accentprimitive-black--color-text-on-vividprimitive-gray-100--color-text-on-highlightprimitive-blackAccents
--color-accent-primaryprimitive-accent-green--color-accent-dangerprimitive-accent-terracota--color-accent-highlightprimitive-accent-gold--color-accent-danger is reserved for negative/error states (Alert, form validation). Use --color-accent-highlight for non-alarming decorative emphasis instead — don't reach for danger red just because it's the only other accent available.
Alerts
--color-bg-alert-neutralprimitive-gray-800--color-bg-alert-informativeprimitive-dark-green--color-bg-alert-negativeprimitive-darker-terracotaTheme switching
Add data-theme="light" to <html> (or any ancestor element). Default (no attribute) = dark theme. Only semantic token values change — primitives stay the same.
Changelog
| Date | Change |
|---|---|
| 2026-07-23 | Add --color-bg-surface-muted — a recessed/inactive surface tone (lighter than --color-bg-header, duller than --color-accent-primary); first use is the Gym app's inactive training-day tabs |
| 2026-07-20 | Add --color-border-hairline — a very light divider tone for the page background |
| 2026-07-20 | Add --color-accent-highlight/--color-text-on-highlight (gold) — a non-danger decorative accent |
| 2026-03-27 | Document color tokens and bevel system |
| 2026-03-22 | Add Win95 bevel and panel border tokens |
| 2026-03-14 | Initial two-tier token system |