Design Tokens Definition
Create a comprehensive design tokens system for design systems.
Prompt
Create a design tokens system for a design system. Include:
1. Color Tokens
- Primary colors (brand colors)
- Semantic colors (success, error, warning, info)
- Neutral colors (grays, backgrounds)
- Dark mode variants
- Usage guidelines for each
2. Typography Tokens
- Font families
- Font sizes (scale)
- Font weights
- Line heights
- Letter spacing
- Usage guidelines
3. Spacing Tokens
- Spacing scale (4px, 8px, 16px, etc.)
- Usage guidelines
- When to use each spacing value
4. Border Radius Tokens
- Radius values
- Usage guidelines
5. Shadow Tokens
- Elevation levels
- Shadow definitions
- Usage guidelines
6. Breakpoint Tokens
- Responsive breakpoints
- Usage guidelines
Format tokens in a way that works for both design tools (Figma) and code. Include naming conventions and usage examples.How to use
- 1Add context about your brand colors, typography, and existing design patterns
- 2Specify if you need dark mode tokens
- 3Mention your design tool (Figma, Sketch) and code framework (React, Vue, etc.)
- 4Paste into your AI tool and review the generated tokens
- 5Refine: Ask "Add more semantic colors" or "Include animation tokens"
Pro Tips
- • Start with what you have, refine later
- • Use semantic naming (primary, secondary, not color1, color2)
- • Document usage guidelines clearly
- • Consider both design tools and code implementation
