Design Token
SkillMediaDefine and organize design tokens (color, spacing, typography, elevation) with naming conventions and usage guidance.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the Design Token skill
What this skill tells your AI
The instructions your AI receives, as published by infrasity-labs/dev-gtm-claude-skills in .claude/skills/design-token/SKILL.md and read by ahel’s review.
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
Signals
- GitHub stars
- 124
- Forks
- 10
- Last commit
- Jun 2026
Advanced
- Catalog kind
- skill
- Gateway key
design-token- Source
- github.com/infrasity-labs/dev-gtm-claude-skills