OpenSkillIndex← back to search
claude-code

Designer-skills design-token

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

install
source · Clone the upstream repo
git clone https://github.com/Owl-Listener/designer-skills
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/Owl-Listener/designer-skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/design-systems/skills/design-token" ~/.claude/skills/owl-listener-designer-skills-design-token && rm -rf "$T"
manifest: design-systems/skills/design-token/SKILL.md
source content

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