UI/UX Design

Design Token Naming Convention System

Describe your design system and get a complete token naming architecture - from global primitives to component-specific tokens with migration guide.

By The Prompt Black Magic Team

Paste into any LLM with your current color and typography values. Use the output to restructure your design tokens for scalability.

You are a design systems engineer who has built token architectures for design systems serving 500+ developers and 100+ designers.

Current state: [NO TOKENS/CSS VARIABLES/PARTIAL SYSTEM/MIGRATING]
Design tool: [FIGMA/SKETCH/ADOBE XD]
Code platform: [CSS/TAILWIND/STYLED-COMPONENTS/SCSS/SWIFT/KOTLIN]
Multi-brand support: [SINGLE BRAND/MULTI-BRAND/WHITE-LABEL]
Dark mode: [YES/NO/PLANNED]

Build a complete token naming system:

**1. Token Architecture (3 tiers)**

Global/Primitive Tokens (raw values):
- color.blue.50 through color.blue.900 (full scale)
- color.neutral.0 through color.neutral.1000
- space.1 through space.13 (4px base: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128)
- font.size.xs through font.size.4xl
- font.weight.regular, medium, semibold, bold
- radius.none, sm, md, lg, xl, full
- shadow.sm, md, lg, xl
- Naming convention: [category].[property].[scale]

Semantic/Alias Tokens (meaning):
- color.bg.default, color.bg.subtle, color.bg.muted, color.bg.emphasis
- color.fg.default, color.fg.subtle, color.fg.muted, color.fg.on-emphasis
- color.border.default, color.border.subtle, color.border.emphasis
- color.interactive.default, color.interactive.hover, color.interactive.active
- color.status.success, color.status.warning, color.status.error, color.status.info
- Naming convention: [category].[context].[variant]

Component Tokens (specific):
- button.bg.primary, button.bg.primary.hover, button.bg.primary.active
- input.border.default, input.border.focus, input.border.error
- card.bg, card.border, card.shadow
- Naming convention: [component].[property].[variant].[state]

**2. Naming Rules**
- Delimiter: dot (Figma) or dash (CSS)
- Case: kebab-case for CSS, camelCase for JS
- No color names in semantic tokens ("primary" not "blue")
- State order: default (omitted) > hover > active > focus > disabled
- Direction: for multi-value properties, use t/r/b/l or x/y

**3. Theme Token Mapping**
- Light mode: semantic token to global token mapping
- Dark mode: same semantic tokens, different global values
- High contrast mode: increased contrast values
- Brand themes: different primitive palettes, same semantic structure

**4. Token Documentation**
- Token catalog format (name, value, usage, do/don't)
- Figma variable structure mirroring token architecture
- Code variable generation (CSS custom properties, SCSS, JS/TS)
- Change log format for token updates

**5. Migration Guide**
- How to audit current hardcoded values
- Mapping old values to new tokens
- Find-and-replace strategy
- Gradual rollout plan (page by page, component by component)
- Validation: how to catch unresolved tokens

**6. Governance**
- Who can add new tokens
- Request process for new tokens
- Deprecation process (mark, warn, remove timeline)
- Token review in PR process

Provide the actual token names, not just the naming convention. Include 50+ tokens as a starter set with real values.

When to Use This Prompt

Expected Results

How to Customize This Prompt