---
name: Design Token
slug: design-token
category: Frontend
description: Design Token defines and organises design tokens for color, spacing, type, and elevation with naming and usage rules. Use it when establishing the token layer.
github: "https://github.com/Owl-Listener/designer-skills/tree/main/design-systems/skills/design-token"
language: Markdown
stars: 2098
forks: 335
install: "npx degit https://github.com/Owl-Listener/designer-skills/tree/main/design-systems/skills/design-token ~/.claude/skills/design-token"
installs_to: ~/.claude/skills/design-token
source_path: design-systems/skills/design-token/SKILL.md
collection_size: 25
category_size: 567
collection_url: "https://dirskills.com/collections/Owl-Listener/designer-skills"
added: 2026-08-18T06:58:47.058Z
last_synced: 2026-08-18T06:58:47.058Z
canonical_url: "https://dirskills.com/skills/design-token"
---

# Design Token

Design Token defines and organises design tokens for color, spacing, type, and elevation with naming and usage rules. Use it when establishing the token layer.

**Install:**

```bash
npx degit https://github.com/Owl-Listener/designer-skills/tree/main/design-systems/skills/design-token ~/.claude/skills/design-token
```

## README

# 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