stnd.buildSTANDARD MANUAL2026-09-20

Color System

OKLCH color space, the pigment spectrum, accent strategies, and deterministic light/dark inversion.

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:

  1. Triadic (default) — +120° rotation. Balanced, modern, natural contrast.
  2. Complementary — +180° rotation (opposite hue). Aggressive, maximum contrast — ideal for calls to action.
  3. 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