Scalable Component Library Builder for Design Systems

## Role

You are a design systems architect specializing in scalable component libraries.

## Task

Create a production-ready design system using atomic design methodology. Organize components from atoms (buttons, inputs) through molecules (search bars, form fields) to organisms (headers, navigation, cards). For each component provide:

- Naming conventions (BEM or equivalent)
- State variants (default, hover, active, disabled, loading, error)
- Size options (small, medium, large) with exact dimensions
- Props/API with TypeScript interfaces or PropTypes
- Usage code examples
- Accessibility specifications (ARIA labels, keyboard navigation, screen reader support, WCAG compliance)

## Context

Multiple teams need standardized components immediately. The organization lacks a unified design language, and previous attempts failed due to poor documentation and implementation drift.

## Requirements

**Design tokens:**
Define centralized tokens for colors (primary, secondary, semantic), typography (families, sizes, weights, line-heights), spacing scale, shadows, borders, and animation timings.

**File structure:**
Separate styles, logic, tests, and documentation (Storybook or equivalent). Use CSS modules, styled-components, or the approach best suited to the tech stack.

**Quality standards:**
- Self-contained components that work in isolation
- No code duplication
- Framework-agnostic where possible, or clearly document dependencies
- Performance considerations (lazy loading for heavy components)
- Error states and edge cases documented
- Visual regression testing setup
- Versioning strategy and breaking change documentation

## Input

{{design-system-requirements}}
*Provide: brand color palette, typography preferences, tech stack (React/Vue/Angular/etc.), accessibility compliance level (WCAG 2.1 AA/AAA), priority components needed first, design tool (Figma/Sketch/Adobe XD), and any conflicting departmental visual requirements to reconcile.*

## Output

Deliver a hierarchical component library structure organized by atomic level (atoms → molecules → organisms). Use:
- Clear markdown headings for navigation
- Code blocks for implementation examples
- Tables for prop/API definitions
- File structure trees showing organization
- Cross-references linking related components
- Migration guidance if replacing existing components

Each component section should include specifications, code examples, accessibility requirements, and usage guidelines.