design-tokens

Overview

Design tokens are the single source of truth for design decisions. This skill covers token taxonomy, color scales, typography, spacing systems, dark mode, and implementation via CSS custom properties and Tailwind.

Capabilities

• Define color scales with semantic naming (primary, success, error)
• Build typography scales with consistent line heights and weights
• Create spacing systems based on a base unit (4px or 8px)
• Implement dark mode via token swapping
• Export tokens to CSS custom properties, Tailwind, and Figma

When to Use

Trigger phrases:

• "design tokens"

• "designing tokens"

• "Design token systems — color, typography, spacing, and theme architecture for co"

• Starting a new design system from scratch

• Inconsistencies in colors, fonts, or spacing across the app

• Need to support dark mode or multiple themes

• Syncing design decisions between Figma and code

When NOT to Use

• Task is about content strategy, not creation (use strategy skills)
• Task is about content distribution (use distribution skills)
• You need to analyze content performance (use analytics skills)
• Task is about content moderation (use moderation tools)
• You don't have content guidelines
• Task requires domain expertise (consult experts)

Pseudo Code

The design-tokens workflow follows a standard pipeline pattern.

Core flow:

# design-tokens primary flow
input = prepare(raw_data)
result = process(input, config={architecture, color, consistent, design, spacing})
validate(result)
deliver(result)

Error handling:

on error:
  log(error_details)
  retry_with_backoff(max=3)
  if still_failing: alert_and_escalate()

Core Workflow

# design-tokens primary flow
input = prepare(raw_data)
result = process(input, config={architecture, color, consistent, design, spacing})
validate(result)
deliver(result)

Error Handling

on error:
  log(error_details)
  retry_with_backoff(max=3)
  if still_failing: alert_and_escalate()