Foundation demo // Token spotlight
Isolate one token, stress-test it everywhere, then trust it at scale.
The spotlight method picks a single semantic token—Surface Noir—and places it across hero, card and footer layouts to confirm it holds up before the token ships to production.
Single token focus
Three layout zones
Two themes
Act I // Spotlight method
Place the token in hero, card and footer—if it survives all three, it ships.
Each zone stresses the token differently: the hero tests full-bleed contrast, cards test elevation stacking, and footers test reduced emphasis and fine print legibility.
Act II // Noir vs Earth
The same semantic token resolves to different values across editorial themes.
In Noir, Surface resolves to a deep blue-green. In Earth tech, it shifts warmer. The spotlight comparison proves each resolution maintains readability without manual overrides.
Noir: L 14% C 0.015
Earth: L 16% C 0.022
ΔL +2%
ΔC +0.007
Noir theme
--vl-bg-surface: oklch(14% .015 145);
--vl-text-primary: oklch(92% .005 145);
/* contrast ratio: 11.4:1 */
Earth tech theme
--vl-bg-surface: oklch(16% .022 55);
--vl-text-primary: oklch(90% .008 55);
/* contrast ratio: 10.1:1 */
Act III // Export & naming
Naming conventions bridge Figma variables and CSS custom properties.
The spotlight document exports each token with its semantic name, resolved OKLCH value, Figma variable path and usage note—ready for design-tool and code handoff in one artefact.
Act IV // Applied spotlight
Spotlight, compare, document, ship—the four-step token release gate.
No token enters the system without surviving a spotlight audit: placed in three zones, compared across themes, documented with naming paths and shipped with verified contrast.