Color System
Standard uses mathematical color spaces based on the OKLCH chromatic space.
The entire palette adapts dynamically to guarantee perfect contrast and
harmony.
The OKLCH Color Space
Unlike traditional color spaces (sRGB, HSL) which fail to respect the human
eye’s perception of lightness (yellow appears much brighter than blue at the
same lightness value), OKLCH accurately models human vision:
- L (Lightness): perceived lightness, 0% to 100%.
- C (Chroma): color purity or saturation, 0 to ~0.4.
- H (Hue): hue angle on the color wheel, 0° to 360°.
All contrast and theme-generation formulas rely on this space to guarantee
automatic accessibility (WCAG/APCA compliance).
The System Pigment Spectrum
Six base hues, generated via OKLCH angle rotations, keep semantic roles
clearly distinct:
| Token | Hue Angle | Semantic Role |
|---|---|---|
--pigment-red |
25° |
Errors, fatal alerts (--color-error) |
--pigment-yellow |
85° |
Warnings, focus/attention (--color-warning) |
--pigment-green |
145° |
Success, valid states (--color-success) |
--pigment-cyan |
190° |
System info, metadata (--color-info) |
--pigment-blue |
240° |
Hyperlinks, active focus (--color-link) |
--pigment-purple |
300° |
Decorative elements, magic themes |
Automatic Accent Strategies
The active accent color (--color-accent) can be derived automatically from
the primary text foreground, via three geometric strategies:
- Triadic (default) —
+120°rotation. Balanced, modern, natural contrast. - Complementary —
+180°rotation (opposite hue). Aggressive, maximum contrast — ideal for calls to action. - Analogous —
+30°rotation. Soft, harmonious camaïeu effect, for minimal interfaces.
Light/Dark Themes and Deterministic Inversion
Toggling between light and dark modes follows a strict, deterministic rule:
- Foreground/background inversion — dark background becomes light text and vice versa.
- Accent preservation — the accent keeps its relative hue, only its lightness (L) adjusts to stay readable against the new background.
- Auto-generated dark palette — derived from the light theme via
color-mix(in oklch, light 80%, white), avoiding a harsh pure-black background.
Surface Elevation & Shadows
Interface depth comes from progressively tinting surfaces (lighter in dark
mode, darker in light mode) plus composed layered shadows:
| Elevation | Relative Lightness (Tint) | Shadow Preset | Use Cases |
|---|---|---|---|
lowest |
14% (canvas background) |
None | Page background |
low |
7% |
--shadow |
Cards, input fields |
base |
3% |
--shadow-lg |
Raised panels, popovers |
high |
7% |
--shadow-xl |
Drawers, overlay menus |
highest |
14% |
--shadow-xl |
Modals, toast notifications |