Visual design·
Share
Design Tokens Definition
Create a comprehensive design tokens system for design systems.
Use Case
Creating design tokens systems for design systems, component libraries, and design operations.
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
Tags
design-tokensdesign-systemtokensfoundationsdesign-ops
Related Prompts
Branding
Logo System Spec Writer
Turn a chosen logo direction into production-ready logo system specs: lockups, spacing, sizing, color, and usage rules.
logo-designbrand-guidelinesdesign-system
Visual design
UI Component Specification
Generate a detailed UI component specification with states, variants, and interaction patterns.
uicomponentsspecification
Visual design
Visual Hierarchy Design
Design effective visual hierarchy for layouts to guide user attention and improve readability.
visual-hierarchygraphic-designlayout
Visual design
Design System Component Visual Spec Writer
Developer-friendly visual specs: anatomy, tokenized properties per variant/state, spacing, responsive behavior, and accessibility for one component cluster.
visual-designdesign-systemcomponents