A semantic color system should be evaluated in context, not as isolated swatches. This lab tests neutrals, interaction states, and accents treated as emitted light rather than flat paint — with live WCAG contrast diagnostics to ensure visual polish never comes at the expense of accessibility.
Preview
Tony Walt — product design & front-end engineering. Building the connective tissue between design intent and production code. Select this text to preview the selection token.
A cross-platform token pipeline that keeps Figma, iOS and web in lockstep — this lab is part of that system.
Last synced 2 hours ago · text-subtle caption
✓ Selected filterTokens shipped this quarter across three platforms.
Status colors
For messages & status only — success/warning/error/info are not UI chrome. Each has a base (text/icon), a subtle background, and a border. Don't use them to color buttons, links or structural elements.
Interaction states
Hover / active / disabled / focus, derived from tokens — not hand-picked colors.
Overlay & scrim
Modal/drawer backdrop — a translucent scrim that sits between the page and a surface sheet.
Unsaved edits to this token set will be lost.
Contrast diagnostics — reference only, not part of the design
Raw WCAG ratios for every semantic pair in the active theme. Click a failing row to jump to the control that owns it AND see where it's applied in the System preview. This panel is a measurement tool, not a preview of applied UI.
Adjusts the undertone of the neutral palette from cool blue-slate to warm near-black. Spread expands or compresses the contrast steps across backgrounds, surfaces, and borders.
Neutral ramp — dark theme
Neutral ramp — light theme
text-muted & text-subtle — applied lightness
Applied lightness for secondary and subtle text hierarchy, tuned to guarantee WCAG AA compliance across themes.
The core brand accent. Base hue and saturation generate the full 100–900 tint ramp, while applied lightness is tuned per theme for interactive contrast.
Tints & shades (100–900) — active theme
accent-subtle provides low-opacity tints for badges, selected states, and code syntax highlights.
A distinct secondary accent for badges, dual-meter charts, and secondary highlights. Can be chosen independently or harmonized mathematically from the primary hue.
Triadic (±120° from primary) creates clear visual distinction while maintaining color balance.
Tints & shades (100–900) — active theme
Selects the source color for surface glow effects (primary hue, warm grey, or disabled). Geometric falloff and opacity are handled by the Effect lab.
Directional gradients treated as emitted light: gradient-accent powers luminous edge treatments and chart fills, while gradient-surface adds depth to raised panels.
Preview — active theme:
Semantic messaging colors (success, warning, error, info). Each generates a text/icon base, subtle alert background, and border token tuned for readability.
Dedicated link palette with distinct default, hover, and visited states to ensure text hyperlinks remain clearly distinguishable from standard UI buttons.
Modal backdrop scrims, text selection highlights, and semi-transparent utility tokens calibrated for layered depth across light and dark themes.