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.