Decide a semantic color system by seeing it applied, not as bare swatches. Tune neutrals, primary/secondary accents, glow, depth/gradient effects and status colors on the right — every group collapses to a compact chip until you open it. Toggle the preview between System (functional UI, for contrast decisions) and Brand (the accent as emitted light — glow, gradient, luminous edge). Real WCAG contrast diagnostics keep you from falling in love with an inaccessible palette. Undo/redo (⌘Z / ⌘⇧Z) covers every change. Settings persist automatically.
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.
Shifts the whole neutral ramp cool ↔ warm. Default is near-black: dark base #0E1116 / #171B22 / #232A34, light base paper #F6F5F1 / #FFFFFF.
Neutral ramp — dark theme
Neutral ramp — light theme
text-muted & text-subtle — per-theme applied lightness
The two contrast-critical steps below the primary text color. Hue/saturation follow the temperature dial above; lightness is its own per-theme token so it can be fitted to AA independently, same base-vs-applied idea as the accents.
Default signal-blue #368EF2 (tokens/color.json's accent.primary). The base color (hue+sat) shapes the whole ramp; each theme's applied shade is the contrast-critical lightness actually used on screen.
Tints & shades (100–900) — active theme
Regenerated in full from the active theme's own H/S/L; 400/500 area seeds the base accent. accent-subtle is a low-opacity tint of accent used for selected/tag/hover surfaces. Used for hover/active states and the code-block keyword token.
Default magenta #F34998 (tokens/color.json's accent.secondary). Pick a preset, harmonize from the primary, or shape base + per-theme applied shade independently.
Triadic (primary hue ±120°) is a reliable default for a secondary that reads as distinct but harmonious.
Tints & shades (100–900) — active theme
Fully regenerated on every change — used for badges/tags and secondary meter segments, kept visually distinct from primary at a glance.
Glow is its own token — it never reads from or writes to the primary accent. Choose a source per theme; opacity, size, and falloff are tuned in the effect lab. Defaults: dark = faint primary-hue glow, light = none.
Gradient tokens — the accent read as light rather than flat fill (visual-identity.md §5). gradient-accent (accent → transparent) drives glows, meters and area-fills; gradient-surface adds a subtle depth wash to raised panels.
Preview — active theme:
For messages/status (alerts, toasts, inline validation) — not UI chrome like buttons or links. Each state has full H/S/L, per theme, and resolves to three roles: base (text/icon), subtle-bg (alert surface) and border.
Link default/hover/visited, derived from a dedicated hue (not tied to accent) with full H/S/L per theme.
Scrim opacity for modals/drawers, the text-selection tint, and general-purpose alpha tokens for one-off translucency needs.