How do you implement design systems and component libraries?

Design systems provide consistent, reusable building blocks for UI development. Components: define a core component library (Button, Input, Select, Modal, Card, Table, Toast, Badge, Avatar) with consistent APIs, styling, and behavior. Architecture: atomic design (atoms: Button, Input; molecules: SearchBar, FormField; organisms: Header, DataTable; templates: PageLayout; pages: Dashboard) provides a scalable hierarchy. Implementation: build with a component framework (React, Vue), style with a consistent system (Tailwind CSS with design tokens, CSS-in-JS, or CSS Modules), document with Storybook (interactive component showcase with usage examples and controls), and test with visual regression tools (Chromatic, Percy). Design tokens: abstract design decisions into variables: colors (primary, secondary, accent, success, warning, error with multiple shades), spacing (4px base unit: 4, 8, 12, 16, 24, 32, 48, 64), typography (font families, sizes, weights, line heights), shadows, border radii, and breakpoints. Component API design: use composable patterns (children, render props, compound components), implement consistent prop naming (size: sm/md/lg, variant: primary/secondary/outline), support all standard HTML attributes via prop spreading, and implement proper TypeScript types for all props. Accessibility: all components must be keyboard navigable, implement ARIA attributes correctly, test with screen readers, and follow WAI-ARIA authoring practices for complex components (dialogs, tabs, menus). Versioning: use semantic versioning for the component library, publish as an npm package for consumption across projects, maintain a changelog documenting all changes, and implement visual regression tests in CI to catch unintended visual changes.