Design Token

If you're building or maintaining a design system, this helps you structure your design tokens properly. It guides you through the three-tier approach (global, alias, component) and covers the usual suspects: color, spacing, typography, elevation, borders, and motion. The naming convention pattern it follows is {category}-{property}-{variant}-{state}, which keeps things predictable as your token library grows. The real value is in the organizational framework. It pushes you to stop hardcoding values and instead build a proper abstraction layer that can handle theming and cross-platform mapping without turning into a mess six months later.

skills.sh installs: 2.4K
GitHub stars: 3.3K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add owl-listener/designer-skills --skill design-token --agent claude-code

Installs into .claude/skills of the current project.

Files

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