Design Tokens
Name Generator
Create consistent and scalable design token naming conventions for your design system
Token Configuration
Default structure: component-category-state-role (e.g., button-background-primary-hover)
Add components to generate component-specific tokens, or leave empty for semantic tokens
background
info
text
headline
border
size
icon
content
link
Select states to define variations of your tokens (e.g., primary, secondary, success)
primary
secondary
success
error
neutral
weak
strong
info
outline
body
highlight
required
Choose interaction states or contexts where tokens will be applied (e.g., hover, active, disabled)
hover
active
focused
disabled
No tokens generated yet
Use the form above to generate tokens