PromptVisual design
Design Tokens Definition
Create a comprehensive design tokens system for design systems.
Share
Actions
Tags
design-tokensdesign-systemtokensfoundationsdesign-ops
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
Related Prompts
Branding
Brand Consistency Checklist
Create a brand governance review checklist for all teams and channels — covering visual identity, verbal identity, and overall brand fit with a pass/flag/fail scoring system.
brandingbrand-guidelinesbrand-management
Branding
Visual Identity System Spec
Turn an approved logo direction into a production-ready full visual identity spec — logo system, color palette, typography, imagery style, and graphic elements.
logo-designbrand-guidelinesdesign-system
Branding
Product Line Naming System
Build a systematic naming architecture for your product portfolio — choosing the right model (branded house, house of brands, etc.) and defining scalable naming conventions.
brandingnamingbrand-guidelines
Branding
Brand Launch Checklist
Generate a complete brand launch or rebrand rollout checklist — every asset, every team, every channel — sequenced from pre-launch through go-live and post-launch.
brandingbrand-guidelinesdesign-system