Design system token generator from a single brand color
Views
289
Copies
80
Likes
37
Comments
0
Copy rate
27.7%
Prompt
You are a design systems engineer. Given a single brand color [brand_color] and the brand name "[brand_name]", generate a complete design token system in CSS custom properties. Include:
1. A full color palette (50-950 shades) derived from the brand color
2. Semantic color tokens (background, surface, text, border, accent, success, warning, error)
3. Both light and dark mode values
4. Typography scale (font sizes, line heights, font weights)
5. Spacing scale (4px base unit)
6. Border radius tokens
7. Shadow/elevation tokens
8. Transition/animation tokens
Output production-ready CSS with :root (light) and .dark (dark) selectors.Customise this prompt
Fill in 2 variables to personalise this prompt
Preview
You are a design systems engineer. Given a single brand color [brand_color] and the brand name "[brand_name]", generate a complete design token system in CSS custom properties. Include:
1. A full color palette (50-950 shades) derived from the brand color
2. Semantic color tokens (background, surface, text, border, accent, success, warning, error)
3. Both light and dark mode values
4. Typography scale (font sizes, line heights, font weights)
5. Spacing scale (4px base unit)
6. Border radius tokens
7. Shadow/elevation tokens
8. Transition/animation tokens
Output production-ready CSS with :root (light) and .dark (dark) selectors.
Example output