Foundation demo // Perceptual color
OKLCH ramps give the framework perceptual uniformity across every surface.
The color system is built on calibrated OKLCH scales: primary, neutral and semantic ramps that maintain readable contrast when combined with typography tokens and ambient shadow layers.
oklch() native
Perceptually uniform
Theme portable
Act I // Color ramps
Primary, neutral and semantic each serve a different job in the interface.
The primary ramp drives action and focus. Neutrals build surfaces and reading layers. Semantic scales (error, success, warning) provide system feedback without conflicting with brand color.
/* OKLCH ramp token quick-reference */ --vl-color-primary: oklch(72% 0.19 145); /* Kinetic Green — action, focus, CTA */ --vl-color-error: oklch(58% 0.21 25); /* Destructive — alerts, form errors */ --vl-color-success: oklch(68% 0.18 155); /* Positive — confirmations, badges */ --vl-color-warning: oklch(74% 0.16 85); /* Caution — notices, warnings */ --vl-text-primary: oklch(92% 0.005 145); /* Primary ink — headings, body text */
All ramp stops share the same hue (145°) so semantic colors stay perceptually coherent across light and dark themes.
Act II // Surface as tonal shift
Elevation is a luminosity delta, not an arbitrary hex.
Surface tokens derive from the neutral ramp by stepping OKLCH lightness in fixed increments. This means tonal tiers, stacking rules and shadow alphas all trace back to one calibrated scale.
L 10% → base
L 14% → surface
L 18% → elevated
L 22% → float
color-system.ramps
--vl-primary-50: oklch(97% 0.04 145);
--vl-primary-500: oklch(72% 0.19 145);
--vl-primary-900: oklch(25% 0.08 145);
surface derivation
--vl-bg-main: oklch(10% .012 145);
--vl-bg-surface: oklch(calc(10% + 4%) .015 145);
--vl-bg-elevated: oklch(calc(10% + 8%) .018 145);
Act III // Contrast verification
Pair every combination with the contrast tool before release.
OKLCH perceptual uniformity makes contrast prediction easier but never eliminates the need to verify. The framework ships a contrast calculator that checks WCAG AA and AAA against every surface token.
Verification method
WCAG AA minimum, AAA target.
All surface–text pairs exceed 4.5:1. Most exceed 7:1 on Noir surfaces.
Act IV // Applied system
The color system feeds tokens, tiers, shadows and verification as a single pipeline.
Update a ramp stop and every derived surface, border and shadow recalculates. The contrast tool confirms the change is safe before anything ships.