3.1 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 (for instance, yellow appears much brighter than blue at the same lightness value), OKLCH accurately models human vision:

• L (Lightness): Perceived lightness from 0% to 100%.
• C (Chroma): Color purity or saturation (from 0 to ~0.4).
• H (Hue): Hue angle on the color wheel (from 0° to 360°).

All of our contrast and theme generation formulas rely on this space to ensure automatic accessibility (WCAG/APCA compliance).

The System Pigment Spectrum

Standard defines six base hues (pigments) generated via specific OKLCH angle rotations to ensure a clear distinction of semantic roles:

Automatic Accent Strategies

To preserve visual harmony, the active accent color (--color-accent) can be automatically derived from the primary text foreground using three geometric strategies:

1. Triadic (Default): A rotation of +120° on the color wheel. Provides a balanced, modern, and natural contrast.
2. Complementary: A rotation of +180° (opposite hue). Produces aggressive, maximum contrast, ideal for call-to-action elements.
3. Analogous: A subtle rotation of +30°. Creates a soft, harmonious camaïeu effect, perfect for minimal interfaces.

Light/Dark Themes and Deterministic Inversion

Standard applies a strict, deterministic inversion rule when toggling between light and dark modes:

• Foreground/Background Inversion: Dark background becomes light text, and light text becomes dark background.
• Accent Preservation: The accent color retains its relative chromatic hue while adjusting its lightness ((L)) to remain readable against the new background.
• Auto-Generated Dark Palette: The dark theme is derived from the light theme using a color-mix(in oklch, light 80%, white) blend to avoid harsh, fatiguing pure black backgrounds.

Surface Elevation & Shadows

Interface depth is managed by progressively tinting surfaces (increasing relative lightness in dark mode, decreasing in light mode) and applying composed layered shadows: