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 (colors, type, spacing)
• Implementing light/dark theme switching
• Building multi-brand theming systems
• Architecting consistent component libraries
• Establishing design-to-code workflows (Figma -> React)

Workflow

1. Define Primitives: Define the raw pallets (Core Colors, Font families, Spacing scale).
2. Define Semantics: Create aliases based on intent (text-primary vs gray-900).
3. Build Components: Use semantic tokens to build component-specific variables (btn-bg).
4. Implement: Use CSS Variables, React Context, or a library like shadcn/ui / cva.

Instructions