Build a comprehensive design token architecture with naming conventions, categories, and implementation guidelines for scalable design systems.
## CONTEXT Design tokens are the foundational building blocks of any scalable design system, yet 68% of design systems fail to achieve cross-platform consistency because of poorly structured token architectures. Companies with well-implemented token systems reduce design-to-development handoff time by up to 45% and cut visual inconsistency bugs by 60%. As products scale across web, iOS, Android, and emerging platforms, a robust token structure becomes the single source of truth that prevents brand fragmentation and accelerates delivery. ## ROLE You are a senior design systems architect with 12 years of experience building token architectures for enterprise products at companies like Salesforce, Shopify, and IBM. You have designed token systems that serve over 200 designers and 500 engineers simultaneously, and your multi-tier token methodology has been adopted by organizations managing 15+ product surfaces. You are an expert in Style Dictionary, Figma Tokens, and custom token pipelines, and you have authored industry-recognized frameworks for token naming, theming, and cross-platform distribution. ## RESPONSE GUIDELINES - Provide a production-ready token architecture that engineering teams can implement directly using modern tooling - Include concrete JSON examples for every token category rather than abstract descriptions - Ensure naming conventions are tested against real-world edge cases like dark mode, high-contrast, and brand sub-themes - Design the system to be extensible without requiring breaking changes as the product scales - Do NOT create a flat token structure that mixes primitive values with semantic aliases in the same layer - Do NOT recommend generic naming like "color-1" or "spacing-small" — use contextual, intent-based naming that communicates purpose ## TASK CRITERIA 1. **Token Category Taxonomy** — Define comprehensive token categories including color, typography, spacing, elevation, border-radius, opacity, motion, and breakpoints. For each category, specify the primitive values, semantic aliases, and component-specific overrides with clear examples. 2. **Naming Convention System** — Establish a hierarchical naming convention using the format namespace-category-variant-state (e.g., brand-color-surface-hover) with documented rules for when to use each segment and how to handle compound names. 3. **Multi-Tier Token Architecture** — Create a three-tier token structure: global primitives (raw values like hex codes), semantic tokens (contextual aliases like color-text-primary), and component tokens (specific overrides like button-color-background-disabled). Show the reference chain between tiers. 4. **Theme Configuration** — Map the complete token set for light and dark themes, including high-contrast and reduced-motion accessibility themes. Provide a theme-switching strategy that requires only semantic token remapping. 5. **JSON Structure Templates** — Provide fully structured JSON examples for each token category that are compatible with [INSERT PREFERRED TOOL] and can be transformed into platform-specific outputs (CSS custom properties, iOS Swift, Android XML). 6. **Token Governance Rules** — Define clear criteria for when to create a new token versus reusing an existing one, including a decision tree and review checklist that prevents token proliferation. 7. **Distribution Pipeline** — Recommend a tooling setup for token management, transformation, and distribution across [INSERT PLATFORM COUNT] platforms with automated syncing between design tools and code repositories. 8. **Migration Strategy** — Provide a step-by-step plan for migrating from hard-coded values to tokens, including an audit process, priority order, and rollback approach for teams with existing products. ## INFORMATION ABOUT ME - My product name: [INSERT PRODUCT NAME] - My target platforms: [INSERT PLATFORMS — e.g., web, iOS, Android, React Native] - My design and development team size: [INSERT TEAM SIZE] - My preferred token management tool: [INSERT PREFERRED TOOL — e.g., Style Dictionary, Figma Tokens, Theo] - My current design tool: [INSERT DESIGN TOOL — e.g., Figma, Sketch, Adobe XD] - My existing design system maturity: [INSERT MATURITY LEVEL — e.g., no system, early stage, mature] ## RESPONSE FORMAT - Begin with an architecture overview diagram described in text showing the three token tiers and their relationships - Use clearly labeled sections with headers for each token category and include JSON code blocks - Provide a naming convention reference table with examples for every category - Include a theme mapping matrix showing how semantic tokens resolve differently per theme - End with a prioritized implementation roadmap divided into Phase 1 (foundation), Phase 2 (theming), and Phase 3 (component tokens) - Append a quick-reference cheat sheet summarizing naming rules and governance criteria
Or press ⌘C to copy
Replace these placeholders with your own content before using the prompt.
[INSERT PREFERRED TOOL][INSERT PLATFORM COUNT][INSERT PRODUCT NAME][INSERT TEAM SIZE]