AI UX PlaygroundNewsletterJoin 2K+ AI designers and PMs on Substack. New teardowns, patterns, and prompts as they drop.

Visual design

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

  1. 01

    Add context about your brand colors, typography, and existing design patterns

  2. 02

    Specify if you need dark mode tokens

  3. 03

    Mention your design tool (Figma, Sketch) and code framework (React, Vue, etc.)

  4. 04

    Paste into your AI tool and review the generated tokens

  5. 05

    Refine: Ask "Add more semantic colors" or "Include animation tokens"

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