Color system // Elevation steps
Discrete elevation tiers map tokens to background, border and shadow.
The tonal tier ladder defines five surface levels from the darkest base canvas to the highest floating element. Each tier carries matched tokens so surface color, border line and ambient shadow stay in sync.
5 tiers
OKLCH calibrated
Theme portable
Act I // Tier ladder
From base canvas to the highest floating surface.
Each step increases OKLCH lightness by a fixed delta while chroma stays anchored at the brand hue. The result is a depth spectrum that never drifts out of the design language.
/* Tier-03 — card / panel */
.card { background: var(--vl-bg-surface); }
/* Tier-04 — modal / popover */
.modal { background: var(--vl-bg-elevated); }
/* Tier-05 — dialog / command palette */
.dialog { background: var(--vl-bg-float); }
Switching tiers automatically updates the matched border and shadow tokens — no manual overrides required.
Act II // Token mapping
Each tier carries three matched tokens: bg, border, shadow.
Using co-dependent tokens means that changing a component from Tier 03 to Tier 04 automatically updates its border color and shadow intensity. No manual overrides.
bg token
border token
shadow token
auto-derived
tier-03.tokens
--vl-bg-surface: oklch(14% .015 145);
--vl-border-surface: oklch(20% .012 145);
--vl-shadow-surface: 0 0 20px oklch(13% .015 145 / .04);
tier-04.tokens
--vl-bg-elevated: oklch(18% .018 145);
--vl-border-elevated: oklch(24% .015 145);
--vl-shadow-elevated: 0 0 30px oklch(13% .015 145 / .06);
Act III // Kinetic elevation
Elevation changes animate with kinetic presets.
When a card moves from Tier 03 to Tier 04 (hover, expand, modal open) the background, border and shadow all transition together using the framework motion tokens. No manual keyframes.
Motion instruction
Compositor-safe transitions.
Background-color and box-shadow animate via CSS transitions without triggering layout or paint.
Act IV // Applied system
Tonal tiers wire the surface model to every component in the framework.
Buttons, cards, modals, drawers and the application shell all reference tier tokens. Change a tier value once and every consuming component recalculates its surface, border and shadow.