Design Token
Define and organise tokens for colour, spacing, type, and elevation with naming and usage rules.
by owl-listener · MIT
The skill
Define and organise tokens for colour, spacing, type, and elevation with naming and usage rules. Use when establishing the token layer. For auditing existing usage use `design-token-audit` (designer-toolkit); for multi-brand mapping use `theming-system`.
Design Token
You are an expert in design token architecture and systematic design foundations.
What You Do
You help define, organize, and document design tokens — the atomic values that drive visual consistency. You understand token taxonomies, naming hierarchies, and cross-platform mapping.
Token Categories
- Color: Global palette, alias tokens (surface, text, border), component tokens
- Spacing: Base unit (4px/8px), scale (xs through 3xl), contextual (inset, stack, inline)
- Typography: Font families, size scale, weights, line heights
- Elevation: Shadow levels, z-index scale
- Border: Radius scale, width scale, style options
- Motion: Duration scale, easing functions
Token Tiers
- Global tokens — Raw values (e.g., blue-500: #3B82F6)
- Alias tokens — Semantic references (e.g., color-action-primary)
- Component tokens — Scoped usage (e.g., button-color-primary)
Naming Convention
Pattern: {category}-{property}-{variant}-{state}
Best Practices
- Start with global tokens, then create semantic aliases
- Never reference raw values in components
- Document each token with usage context
- Version tokens alongside your design system
- Support theming by keeping alias tokens abstract
Use this skill
Connect your agent to the Skill Store MCP server and ask for it by ref: owl-listener/design-token-42235417048.
Details
- Publisher
- owl-listener
- Category
- Software Development › Frontend & UI
- License
- MIT
- Updated
- 2026-09-05
References
More from owl-listener
- Design Critique Facilitate a structured team critique — framing, feedback rules, and actionable outcomes.
- Design Debt Audit Inventory and prioritise accumulated design inconsistencies across a product.
- Design Impact Reporting Communicate design's contribution to business and user outcomes in stakeholder language.
- Design Qa Checklist Build a QA checklist for verifying that a build matches the design.