#component-library

Build comprehensive design system that scales across teams and products. Foundation elements: 1. Color palette: primary (3-5 colors), secondary, semantic colors (success, warning, error). 2. Typography scale: modular scale ratio (1.125, 1.25, 1.5), weight hierarchy (regular, medium, bold). 3. Spacing system: 8px base unit, scale (8, 16, 24, 32, 48, 64px). 4. Iconography: consistent style, 24px base size, stroke width standardization. Component library: 1. Atomic level: buttons, inputs, labels with all states (default, hover, active, disabled). 2. Molecular level: search bars, form fields with validation states. 3. Organism level: headers, cards, navigation systems. Documentation structure: 1. Design principles: brand personality, user experience guidelines. 2. Usage guidelines: when to use each component, accessibility requirements. 3. Code snippets: implementation examples for developers. Tools: Figma for design components, Storybook for development documentation, design tokens for consistency across platforms. Governance: design system team ownership, regular audits, contribution process for new patterns.

Document components effectively with Storybook 7. Setup: 1. CSF3 format for stories. 2. Autodocs for prop table generation. 3. Controls addon for prop manipulation. 4. Actions addon for event logging. 5. Interactions testing with @storybook/test. 6. Accessibility checks with a11y addon. 7. Design tokens documentation. 8. MDX for custom documentation pages. Use composition for multiple projects and implement visual testing with Chromatic.