Foundation demo // Palette perception
Hues must prove themselves on real surfaces, not isolated swatches.
Palette perception tests every brand hue against light and dark tonal tiers so color combinations stay legible across themes, screen technologies and ambient-light conditions.
Dark & light tested
Chroma aligned
Ambient-safe
Act I // Contextual perception
A swatch in isolation lies. The same green reads differently on Noir vs Earth surfaces.
OKLCH perceptual lightness lets us predict how a hue shifts against varying backgrounds, but only a direct comparison reveals whether the effect is comfortable or jarring.
Act II // Shared chroma logic
Accent colors relate to neutrals through a shared chroma channel.
Every neutral in the system carries a trace of the primary hue angle (145°). This shared chroma root means accents and backgrounds feel like they belong together instead of colliding.
Primary C 0.19
Neutral C 0.015
Ratio ~12.7×
H 145° shared
chroma relationship
--vl-primary: oklch(72% 0.190 145);
--vl-neutral-50: oklch(96% 0.015 145);
--vl-neutral-900:oklch(14% 0.015 145);
harmony rule
/* Accent chroma ÷ 12 ≈ neutral chroma */
/* Same hue angle keeps family feel */
/* Light mode flips L, keeps C & H */
Act III // Decision capture
Every palette decision is recorded as a token for design-tool and code handoff.
Designers get named Figma variables, developers get CSS custom properties, and both reference the same source of truth inside the Library. No color value exists without a documented reason.
Handoff rule
One source, two outputs.
Figma variables and CSS tokens are generated from the same JSON token file.
Act IV // Applied palette
Perception, harmony and documentation close the loop from concept to production.
Test on real surfaces, align chroma across the family, then document every decision so the palette is reproducible without tribal knowledge.