Design system token generator from a single brand color
Views
6.7K
Copies
1.1K
Likes
865
Comments
0
Copy rate
17.0%
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