What are design tokens?

Design tokens are the visual design atoms of your product—represented as data. They store colors, typography, spacing, and more in a platform-agnostic way (like JSON) so they can be easily translated to CSS, SCSS, Tailwind, or iOS/Android formats.

Why should I preview tokens before exporting?

Tokens define the systemic relationships in your design. Previewing them ensures that your semantic colors (like error or success) contrast well against your surface colors, and that your text tokens maintain high legibility across all backgrounds.

How do I use this tool?

Edit the hexadecimal values for any token in the inspector. The UI Preview on the right will instantly update to reflect those changes, and the Contrast Inspector will warn you if any combinations fail WCAG accessibility standards.

Design Token Preview

Visually inspect, edit, and validate your color design tokens before exporting. Ensure every token combination maintains perfect contrast.

Token Inspection

Edit token values below and see them update in the UI Preview in real-time.

Color Tokens

primary

secondary

accent

Semantic Tokens

success

warning

error

info

Surface Tokens

background

surface

elevated

overlay

Text Tokens

primary

secondary

muted

inverse

Border Tokens

default

strong

focus

State Tokens

hover

active

disabled

focus-ring

Token UI Preview

Surface Component

This card uses the background, surface, text, muted, and border tokens.

Success State

Action completed successfully.

Error State

Something went wrong.

Contrast Inspector

Live validation of your current token combinations.

Text / Background

17.74:1

Muted / Background

2.54:1

Primary / Background

4.47:1

Text / Surface

16.98:1

Primary Button Text

4.47:1

Validating Your Token Architecture

A strong design system relies on semantic meaning rather than hardcoded colors. Instead of using #ef4444 directly in your components, you use a token like color.semantic.error.

The Three Tiers of Tokens

Global Tokens (Core): The raw color values (e.g., blue-500 = #3b82f6). These are usually defined in your color scales.
Semantic Tokens: Colors mapped to a specific meaning or intent (e.g., color-primary or color-success).
Component Tokens: Colors mapped to specific UI elements (e.g., button-primary-bg or surface-elevated).

This tool helps you visualize the relationship between your Semantic and Component tokens. By tweaking the values in the inspector, you can instantly see how changes ripple through the simulated UI components.