Purpose
Create and maintain a consistent design system using tokens.
When to Use
- Defining colors, spacing, typography
- Replacing hardcoded styles
- Creating or improving design systems
- Adding dark mode support
Core Rules
- Always use tokens, never hardcoded values
- Prefer semantic names (e.g. color.primary)
- Keep systems simple and scalable
- Ensure consistency across components
Workflow
1. Audit
- Identify hardcoded values
- Detect inconsistencies
2. Define Tokens
Create tokens for:
- Colors
- Spacing
- Typography
Rules:
- Use clear naming
- Avoid duplicates
- Keep hierarchy simple
3. Apply
- Replace hardcoded values with tokens
- Ensure reuse across components
4. Validate
Check:
- Consistency
- Readability
- Basic accessibility (contrast)
Output Format
- Token definitions
- Before → After changes
- List of affected components
Behavior
Good output:
- Clear token structure
- Minimal, reusable system
Bad output:
- Random values
- Overcomplex token hierarchy