design-tokens

# Design Tokens Design token architecture, CSS custom properties, and theme system implementation. ## When to Use This Skill | Use this skill when... | Use another skill instead when... | |------------------------|-----------------------------------| | Setting up a design token system | Writing individual component styles | | Implementing light/dark theme switching | Accessibility auditing (use accessibility skills) | | Organizing CSS custom properties | CSS layout or responsive design | | Integrating tokens with Tailwind/frameworks | Framework-specific component patterns | ## Core Expertise - **Token Architecture**: Organizing design tokens for scalability - **CSS Custom Properties**: Variable patterns and inheritance - **Theme Systems**: Light/dark mode, user preferences - **Component Integration**: Applying tokens consistently ## Token Structure ### Three-Tier Architecture ```css /* 1. Primitive tokens (raw values) */ :root { --color-blue-50: #eff6ff; --color-blue-100: #dbeafe; --color-blue-500: #3b82f6; --color-blue-600: #2563eb; --color-blue-700: #1d4ed8; --spacing-1: 0.25rem; --spacing-2: 0.5rem; --spacing-4: 1rem; --spacing-8: 2rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; } /* 2. Semantic tokens (purpose-based) */ :root { --color-primary: var(--color-blue-600); --color-primary-hover: var(--color-blue-700); --color-background: white; --color-surface: var(--color-gray-50); --color-text: var(...