About design-token
A design-token architecture skill for teams defining and documenting the values behind visual consistency. It covers token categories, tiers, naming, and theming practices.
Key features
- 01Organize color, spacing, and type tokens
- 02Separate global, alias, and component tiers
- 03Apply a consistent naming pattern
- 04Document usage and version tokens
- 05Support themes with abstract aliases
Use cases
- 01Set up a design-token system
- 02Map raw values to semantic aliases
- 03Define token usage for components
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/design-tokenin Claude Code to confirm it loaded.
Details
From the project READMEDesign 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
Comments
Markdown supported