π¨ Design Token Generator
π Client-side β Your data never leaves your browser
β
100% Free β No signup, no limits
β‘ Instant β No server processing
Visually build Design Tokens and CSS variable systems - Multi-format export
π¨ Color Tokens
π Spacing Tokens
π€ Font Tokens
π¦ Export
FAQ
Q1: What are Design Tokens?
Design Tokens are system-level design values stored as key-value pairs (Color, Font, Spacing, etc.). They link design and development, ensuring consistent UI properties. Tokens can be exported as CSS variables, SCSS variables, JSON configs and more, supporting cross-platform use (Web/iOS/Android).
Q2: What is the difference between Design Tokens and CSS Variables?
CSS variables are Web-platform specific and can only be used in CSS. Design Tokens are a higher-level concept that is independent of platform. A token can be exported as CSS variables, SCSS variables, Android XML, iOS Swift and other formats. Tokens also support naming conventions (such as --color-primary instead of --blue-500) and theme switching.
Q3: How to organize Design Token naming?
Use a hierarchical structure: category.attribute.variant, such as color.primary.500, spacing.md.4, font.size.lg. Use semantic names for concrete values: use --color-danger instead of --red-500, so themes only need to change the value without changing the structure. Layer tokens from Base tokens (raw values) to Semantic tokens (aliases) to Component tokens (specific usage).