Design Token System

Single source of truth for visual design decisions with accessibility compliance.

When to Use This Skill

• Building a consistent design system
• Need WCAG AA compliant color contrast
• Want type-safe token access
• Supporting multiple frameworks (Tailwind, CSS-in-JS)

Core Concepts

Design tokens provide:

1. Typography - Font families, sizes, weights, presets
2. Colors - Semantic palettes with contrast ratios
3. Type safety - TypeScript types for autocomplete
4. Framework agnostic - Export to CSS vars, Tailwind, etc.