Industry-standard design token format. Compatible with Style Dictionary, Figma Tokens, and design systems tools.
Generate design tokensExport your brand as design tokens in industry-standard JSON format. Use with Style Dictionary, Figma Tokens, or any design system tooling.
Here's what you get with Design Tokens
{
"color": {
"primary": {
"value": "#6366F1",
"type": "color",
"description": "Primary brand color"
},
"accent": {
"value": "#F59E0B",
"type": "color"
},
"background": {
"value": "#FAFAFA",
"type": "color"
}
},
"typography": {
"heading": {
"fontFamily": { "value": "Cal Sans" },
"fontWeight": { "value": "700" }
},
"body": {
"fontFamily": { "value": "Inter" },
"fontWeight": { "value": "400" }
}
},
"spacing": {
"xs": { "value": "0.25rem" },
"sm": { "value": "0.5rem" },
"md": { "value": "1rem" }
}
}Everything included with this feature to help you build faster
W3C Design Tokens format compatible with all major tools.
Generate tokens for web, iOS, Android from one source.
Import directly into Figma with token plugins.
Design Tokens integrates seamlessly with popular frameworks and tools
Design Tokens is especially useful when building these types of projects
Create a dashboard design system that's consistent, usable, and on-brand. Data-friendly colors included.
Stores that convert. Design system optimized for product pages, carts, and checkout.
App-ready design system. Colors and typography optimized for iOS and Android.
Common questions about this feature
60 seconds. $49. All features included.
Generate design tokensNo account required to try
Design tokens are the single source of truth for your brand's visual properties. Learn how to implement them in your project for consistent, maintainable styling.
Design tokens replace hardcoded colors, spacing, and fonts with a single source of truth. Here's how to generate them in seconds — with code examples.
Your marketing site, docs, dashboard, and mobile app all need the same brand. Here's how to share design tokens across repos without losing your mind.