stnd.buildSTANDARD MANUAL2026-09-20

Color

On this page

Color System

Foundation

Seed-first OKLCH color engine. Set one thing — your light foreground color — and a full light/dark palette, ten semantic hues, and a shadow/elevation scale all derive from it via oklch(from <seed> ...) relative color syntax. Override at three depths: set --color-light-foreground alone (everything else follows); set individual --color-light-* / --color-dark-* tokens for per-scheme control; or theme fully via [data-theme] selectors, which re-resolve the whole token set at any element, not just :root.

Name Description
--color-light-foreground The primary light foreground seed. Change this alone and dark mode, all ten chromatic hues, and derived surfaces/borders/shadows follow.
--color-light-background The root light background seed (default white).
--color-dark-foreground Derived dark reading foreground (default ~85% lightness matching foreground hue).
--color-dark-background Derived dark background (default ~20% lightness matching foreground hue).
--color-background Active scheme background token.
--color-foreground Active scheme foreground token.
--color-accent Active accent color token (defaults to triadic +120°).
--color-border Active border color token.
--color-surface Active elevated surface background.
--color-muted Active muted text color (~60% opacity).
--color-subtle Active subtle UI text color (~40% opacity).
--color-link Semantic link color token.
--color-success Semantic success status color (--color-green).
--color-warning Semantic warning status color (--color-orange).
--color-error Semantic error status color (--color-red).
--color-info Semantic info status color (--color-blue).
--color-light Polarity alias resolving to the lighter tone of the active scheme.
--color-dark Polarity alias resolving to the darker tone of the active scheme.
--shadow Primary ambient shadow preset.
.theme-light Forces light token set and color scheme on any subtree.
.theme-dark Forces dark token set and color scheme on any subtree.
.inverse Flips scheme to whichever mode is not currently active.
data-color-mode? Attribute forcing "light" or "dark" scheme mode.

Dark Seed Derivation

Foundation

Both dark seeds inherit hue from the light foreground seed. Warm ink begets a warm dark background and a warm soft reading foreground.

Name Description
--color-dark-background Dark background matching foreground hue at ~20% lightness and muted chroma.
--color-dark-foreground Dark foreground matching foreground hue at ~85% lightness for soft reading brightness.

Light Palette

Foundation

Full 10-hue chromatic spectrum generated from light foreground seed via inline relative color syntax.

Name Description
--color-light-red Error / Red (+25° hue offset).
--color-light-orange Attention / Orange (+55° hue offset).
--color-light-yellow Warning / Yellow (+85° hue offset).
--color-light-green Success / Green (+145° hue offset).
--color-light-cyan Info / Cyan (+190° hue offset).
--color-light-blue Link / Blue (+240° hue offset).
--color-light-magenta Magic / Magenta (+300° hue offset).
--color-light-purple Purple (+270° hue offset).
--color-light-pink Pink (+350° hue offset).
--color-light-brown Brown (+60° hue offset).
--color-light-accent-complementary Complementary accent (+180°).
--color-light-accent-analogous Analogous accent (+30°).
--color-light-accent-triadic Triadic accent (+120°).
--color-light-accent-auto Default accent strategy (triadic).
--color-light-accent Active light mode accent color.

Dark Palette

Foundation

Full 10-hue chromatic spectrum generated from dark foreground seed for comfortable dark surfaces.

Name Description
--color-dark-red Dark mode red (+25° hue offset).
--color-dark-orange Dark mode orange (+55° hue offset).
--color-dark-yellow Dark mode yellow (+85° hue offset).
--color-dark-green Dark mode green (+145° hue offset).
--color-dark-cyan Dark mode cyan (+190° hue offset).
--color-dark-blue Dark mode blue (+240° hue offset).
--color-dark-magenta Dark mode magenta (+300° hue offset).
--color-dark-purple Dark mode purple (+270° hue offset).
--color-dark-pink Dark mode pink (+350° hue offset).
--color-dark-brown Dark mode brown (+60° hue offset).
--color-dark-accent-complementary Dark complementary accent (+180°).
--color-dark-accent-analogous Dark analogous accent (+30°).
--color-dark-accent-triadic Dark triadic accent (+120°).
--color-dark-accent-auto Default dark accent strategy.
--color-dark-accent Active dark mode accent color.

Computed Palettes

Foundation

Computed scheme-specific tints for muted text, subtle UI elements, borders, and shadows.

Name Description
--color-light-muted Light muted text color (~60% opacity).
--color-light-subtle Light subtle text color (~40% opacity).
--color-light-border Light border color (~10% opacity).
--color-light-surface Light surface background (3% foreground mixed with background).
--color-light-on-accent Text color drawn on light accent backgrounds.
--color-dark-muted Dark muted text color (~65% opacity).
--color-dark-subtle Dark subtle text color (~45% opacity).
--color-dark-border Dark border color.
--color-dark-surface Dark surface background.
--color-light-shadow-base Base shadow seed for light mode.
--color-light-highlight Base specular highlight for light mode.
--color-dark-shadow-base Base shadow seed for dark mode.
--color-dark-highlight Base specular highlight for dark mode.

Semantic Tokens

Foundation

Semantic color tokens consumed across all components and styles.

Name Description
--color-background Active scheme root background.
--color-foreground Active scheme text foreground.
--color-accent Active scheme primary accent color.
--color-header Heading text color.
--color-red Semantic red hue.
--color-orange Semantic orange hue.
--color-yellow Semantic yellow hue.
--color-green Semantic green hue.
--color-cyan Semantic cyan hue.
--color-blue Semantic blue hue.
--color-magenta Semantic magenta hue.
--color-purple Semantic purple hue.
--color-pink Semantic pink hue.
--color-brown Semantic brown hue.
--color-success Status color for success states (--color-green).
--color-warning Status color for warnings (--color-orange).
--color-error Status color for errors (--color-red).
--color-info Status color for informative notices (--color-blue).
--color-link Active scheme link color.
--color-on-accent Text color for elements over accent backgrounds.

Computed Semantics

Foundation

Scheme-aware computed colors derived from active foreground and background seeds.

Name Description
--color-muted Secondary text color (~60% alpha).
--color-subtle Tertiary text and decorative icon color (~40% alpha).
--color-border Standard structural border color (~10% alpha).
--color-surface Elevated surface and card background.
--color-light Polarity alias resolving to lighter color of active scheme.
--color-dark Polarity alias resolving to darker color of active scheme.
--color-darker Dark overlay tint.
--color-glass Frosted glassmorphism background color (~80% alpha).

Surfaces & Elevation Colors

Foundation

Semantic elevation color seeds and surface hierarchy using perceptual OKLCH color spaces.

Name Description
--color-shadow Active base shadow color.
--color-highlight Active specular highlight color.
--color-surface-lowest Deepest recessed surface step.
--color-surface-lower Sub-surface step mixed with transparency.
--color-surface-low Low elevation surface step.
--color-surface Base surface color.
--color-surface-high Elevated surface step.
--color-surface-highest Highest surface elevation step.

Border Shorthands

Foundation

Pre-composed border shorthand tokens for clean layout boundaries.

Name Description
--border Standard border shorthand (var(--stroke-width) solid var(--color-border)).
--border-accent Tinted accent border shorthand (var(--stroke-width) solid oklch(...)).
--border-transparent Transparent layout placeholder border.

Theme Classes & Mixins

Foundation

Utilities and classes for forcing color modes and contextual inversion on subtrees.

Name Description
.theme-light Forces light color scheme and tokens on the applied container.
.theme-dark Forces dark color scheme and tokens on the applied container.
.inverse Contextually inverts color scheme relative to current background mode.
data-theme? Scoped theme attribute allowing local theme switching on cards or panels.
data-color-mode? Attribute setting explicit "light" or "dark" mode.
@mixin theme-light-tokens Mixin stamping active light palette tokens into a selector.
@mixin theme-dark-tokens Mixin stamping active dark palette tokens into a selector.

All classes

Other

Class Declares
.theme-light —
.theme-dark —
.inverse —