Design Tokens
Design Systems VocabularyNamed entities that store visual design attributes (colors, typography, spacing) as reusable values, enabling consistent design across platforms and products.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Design Tokens coming soon.
How It Works in Apps/Websites
Design tokens are the atomic values of a design system. Instead of hardcoding #3b82f6, you define --color-primary: #3b82f6. Tokens can be primitive (raw values), semantic (purpose-based like 'text-primary'), or component-specific. They enable easy theming, dark mode, and cross-platform consistency (web, iOS, Android).
How AI Interprets This Term
When you say 'design tokens', AI understands: a system of named variables for design values. Expects: color tokens (primary, secondary, background, text), spacing tokens (xs, sm, md, lg, xl), typography tokens (headings, body sizes), border radius tokens, shadow tokens. Usually as CSS variables or JSON.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create color design tokens for a brand
Design a token system: Colors (--color-primary: #3b82f6, --color-bg: #ffffff, --color-text: #1a1a1a), Spacing (--space-xs: 4px through --space-xl: 32px), Typography (--text-sm: 14px, --text-base: 16px), Borders (--radius-sm: 4px, --radius-md: 8px). Include dark mode variants.
Show tokens applied in light mode vs dark mode for the same component
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
Usage Guidelines
When to Use
- •Design systems
- •Multi-platform products
- •Theming support
- •Large-scale applications
When NOT to Use
- •One-off projects
- •Simple static sites