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`.
Start a fresh conversation. Replace the highlighted placeholders.
Use design-token to define and document a design-token foundation for [product or design system], including global values, semantic aliases, and component tokens for color, spacing, typography, elevation, borders, and motion, with naming and usage rules.
Required inputs
[product or design system]
User-approved starter prompt based on a pinned source version; check current skill requirements before running. Task evidence ↗
SKILL.md
name: design-tokendescription: 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)