About design-token
A design skill for defining and documenting design tokens across visual systems. It covers token tiers, naming, and practices for consistent cross-platform mapping and theming.
Key features
- 01Color, spacing, and typography tokens
- 02Elevation, border, and motion tokens
- 03Global, alias, and component tiers
- 04Structured token naming
- 05Documentation and theming guidance
Use cases
- 01Establishing a design system token taxonomy
- 02Mapping shared values across platforms
- 03Documenting component token usage
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