# Design Token

> Define and organize design tokens (color, spacing, typography, elevation) with naming conventions and usage guidance.

- Skill: `infrasity-labs/design-token` (Agent Skill)
- Install (CLI): `npx skillmds@latest add infrasity-labs/design-token`
- Raw SKILL.md: https://api.skillmd.com/api/skills/infrasity-labs/design-token/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: infrasity-labs (https://skillmd.com/u/infrasity-labs)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/infrasity-labs/design-token

---

# 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
1. **Global tokens** — Raw values (e.g., blue-500: #3B82F6)
2. **Alias tokens** — Semantic references (e.g., color-action-primary)
3. **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