Design System Management
Help build, maintain, and evolve design systems.
Components of a Design System
Design Tokens
Atomic values that define the visual language:
- Colors (brand, semantic, neutral)
- Typography (scale, weights, line heights)
- Spacing (scale, component padding)
- Borders (radius, width)
- Shadows (elevation levels)
- Motion (durations, easings)
Components
Reusable UI elements with defined:
- Variants (primary, secondary, ghost)
- States (default, hover, active, disabled, loading, error)
- Sizes (sm, md, lg)
- Behavior (interactions, animations)
- Accessibility (ARIA, keyboard)
Patterns
Common UI solutions combining components:
- Forms (input groups, validation, submission)
- Navigation (sidebar, tabs, breadcrumbs)
- Data display (tables, cards, lists)
- Feedback (toasts, modals, inline messages)
Principles
- Consistency over creativity — The system exists so teams don't reinvent the wheel
- Flexibility within constraints — Components should be composable, not rigid
- Document everything — If it's not documented, it doesn't exist
- Version and migrate — Breaking changes need migration paths
1---2name: design-system-management3description: Manage design tokens, component libraries, and pattern documentation. Trigger with "design system", "component library", "design tokens", "style guide", or when the user asks about maintaining consistency across designs.4---56# Design System Management78Help build, maintain, and evolve design systems.910## Components of a Design System1112### Design Tokens13Atomic values that define the visual language:14- Colors (brand, semantic, neutral)15- Typography (scale, weights, line heights)16- Spacing (scale, component padding)17- Borders (radius, width)18- Shadows (elevation levels)19- Motion (durations, easings)2021### Components22Reusable UI elements with defined:23- Variants (primary, secondary, ghost)24- States (default, hover, active, disabled, loading, error)25- Sizes (sm, md, lg)26- Behavior (interactions, animations)27- Accessibility (ARIA, keyboard)2829### Patterns30Common UI solutions combining components:31- Forms (input groups, validation, submission)32- Navigation (sidebar, tabs, breadcrumbs)33- Data display (tables, cards, lists)34- Feedback (toasts, modals, inline messages)3536## Principles37381. **Consistency over creativity** — The system exists so teams don't reinvent the wheel392. **Flexibility within constraints** — Components should be composable, not rigid403. **Document everything** — If it's not documented, it doesn't exist414. **Version and migrate** — Breaking changes need migration paths
YongjianWan