design-systemlisted

# /design-system > If you see unfamiliar placeholders or need to check which tools are connected, see [CONNECTORS.md](../../CONNECTORS.md). Manage your design system — audit for consistency, document components, or design new patterns. ## Usage ``` /design-system audit # Full system audit /design-system document [component] # Document a component /design-system extend [pattern] # Design a new component or pattern ``` ## 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 1. **Consistency over creativity** — The system exists so teams don't reinvent the wheel 2. **Flexibility within constraints** — Components should be composable, not rigid 3. **Document everything** — If it's not documented, it doesn't exist 4. **Version a