Build your design tokens visually

Create your visual language with colors, typography, spacing, radius and shadows.
See it in real UI and export the tokens for your next project.

Untitled

Color scales

Action/Primary

Name	Light mode
background
hovered
pressed
border
text

Action/Secondary

Name	Light mode
background
hovered
pressed
border
text

Surfaces

Name	Light mode
canvas
default
subtle
subtlest
hovered
pressed
selected
disabled
inverted

Borders

Name	Light mode
default
subtle
selected
focus

Text

Name	Light mode
default
subtle
subtlest
disabled
placeholder
inverted

Feedback/Success

Name	Light mode
background
border
text

Feedback/Warning

Name	Light mode
background
border
text

Feedback/Danger

Name	Light mode
background
border
text

Feedback/Info

Name	Light mode
background
border
text

Chart

Name	Light mode
1
2
3