Design System Token Naming Convention and Governance Guide
Establish a scalable, consistent naming convention for design tokens that works across design tools and codebases, with governance rules for adding and deprecating tokens.
Create a token naming architecture that prevents duplication, enables intuitive discovery, and scales as the design system grows across multiple products and platforms.
At a glance
Access
Free prompt
Open to copy — no account or payment needed.
Prompt objective
Create a token naming architecture that prevents duplication, enables intuitive discovery, and scales as the design system grows across multiple products and platforms.
Real use case
A fintech with 4 product teams has 340 color tokens with inconsistent names like 'blue-dark', 'primaryBlue', 'brand_700', and 'cta-bg-hover'. Developers waste hours mapping design tokens to code variables.
Customize these fields first
Replace the placeholders with your own context before you run the prompt. That usually improves the first output more than adding more instructions later.
Prompt
Define a complete design token naming convention and governance guide for [COMPANY NAME]'s design system used across [NUMBER] products.
**Naming Architecture (3-tier):**
Tier 1 — Primitives (raw values):
- Format: {category}-{scale}-{variant}
- Examples: color-blue-500, spacing-4, font-size-16
- Rules: kebab-case, numeric scales, no semantic meaning
Tier 2 — Semantics (context-aware):
- Format: {property}-{context}-{state}
- Examples: bg-primary-default, text-heading-lg, border-input-error
- Rules: describe purpose, not value
Tier 3 — Components (specific):
- Format: {component}-{element}-{property}-{state}
- Examples: button-primary-bg-hover, card-header-padding
- Rules: only when semantic tokens are insufficient
**Governance Rules:**
- Who can create new tokens (core team vs. contributors)
- Request process: proposal → review → approval → implementation
- Deprecation process: mark deprecated → migration period → removal
- Documentation requirements for each new token
- Naming review checklist
**Cross-Platform Mapping:**
- Figma Variables → CSS custom properties
- Figma Variables → React Native StyleSheet
- Figma Variables → iOS/Android native values
- Automated sync pipeline
**Migration Guide:**
- Audit existing tokens and map to new convention
- Phased rollout plan
- Codemod scripts for automatic renaming
- Communication plan for affected teams
Include a complete token registry template and naming decision tree.Open directly in an AI — the text is pre-filled:
How to use this prompt
- 1Replace the key placeholders first: COMPANY NAME, NUMBER.
- 2Replace any bracketed placeholders like [this] with your own context.
- 3Add extra background information when you want more tailored results.
- 4Combine multiple prompts in one conversation when you need a richer output.
- 5Save your best-performing prompts so they are easy to reuse later.
Next best step
Open the guide first, then branch only if you still need more.
A starter guide to the first prompt categories and patterns worth using when you need better output without prompt guesswork.
If this prompt is close but not quite right, generate variants next. If the job is recurring, move into the course library after the guide.
Related prompts
View allColor System for Digital Products with WCAG AA Accessibility Compliance
Generates a complete color palette with semantic tokens, light/dark mode support, and WCAG AA compliance validation.
Best for
Define a robust, accessible color system that works across all UI contexts, reducing ad hoc decisions and ensuring visual consistency throughout the product.
Typography Hierarchy System for Responsive Web and Mobile Interfaces
Defines a complete typographic scale with fluid typography, weights, and spacing for web and mobile platforms.
Best for
Establish a typographic hierarchy that ensures readability across all resolutions, from mobile 320px to desktop 1920px, using a modular scale system.
Responsive Layout System with Grid Architecture for Complex Data Dashboards
Designs a flexible grid system for dashboards featuring cards, tables, and charts that adapt to any viewport size.
Best for
Create a layout system based on a responsive grid that organizes dense dashboard information clearly, prioritizing data hierarchy and optimal information density for each screen size.
Micro-Interaction Library for Engagement and Visual Feedback
A catalog of micro-interactions for component states, transitions, and visual feedback that elevate perceived product quality.
Best for
Design a cohesive micro-interaction system that communicates states, actions, and transitions intuitively, increasing perceived product quality.
Explore other prompt categories
Move sideways into adjacent libraries when the current category is not the full answer.
Every prompt here is free. The course teaches the thinking behind them.
Copy as many prompts as you like. When you want to move from single prompts to a repeatable AI workflow, Learn AI in 30 Days walks through it, one day at a time.
Buy the course once ($15/$20 by length), or go all-access for $10/mo with a verifiable certificate.