design-system-patterns

Establish design token hierarchies, theming infrastructure, and component architecture for scalable design systems.

- Covers three-layer token organization: primitive tokens (raw values), semantic tokens (contextual meaning), and component tokens (specific usage)

- Includes theme switching patterns with CSS custom properties, React context providers, system preference detection, and persistent storage

- Provides component architecture patterns including compound components, polymorphic variants, and slot-based composition

- Supports multi-platform token generation via Style Dictionary for CSS, iOS, Android, and SCSS with Figma-to-code synchronization

Design System Patterns

Master design system architecture to create consistent, maintainable, and scalable UI foundations across web and mobile applications.

When to Use This Skill

- Creating design tokens for colors, typography, spacing, and shadows

- Implementing light/dark theme switching with CSS custom properties

- Building multi-brand theming systems

- Architecting component libraries with consistent APIs

- Establishing design-to-code workflows with Figma tokens

- Creating semantic token hierarchies (primitive, semantic, component)

- Setting up design system documentation and guidelines

Core Capabilities

1. Design Tokens