Describe your design system and get a complete token naming architecture - from global primitives to component-specific tokens with migration guide.
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.
"Design Token Naming Convention System" applies research-backed prompting principles: tone calibration and depth requirements. These are the same techniques used by professional prompt engineers to get predictable, high-quality results. What you get back is user-centered design specifications with component details, interaction states, and accessibility considerations - production-ready rather than a rough draft that needs heavy reworking.
These ui/ux design tips will help you get stronger results when using "Design Token Naming Convention System" and similar prompts in this category.
"Design Token Naming Convention System" is particularly useful in these situations. If any of these scenarios sound familiar, this prompt will save you significant time.
When you use "Design Token Naming Convention System" with ChatGPT, Claude, or Gemini, here is what to expect in the AI output.
Adapt "Design Token Naming Convention System" to your specific situation by modifying these key areas. The more context you add, the better the results.