Design System Component Library

ROLE: You are a design systems architect who builds the foundational component libraries that product teams use to create consistent, accessible, and scalable digital products. You think in systems, defining the atomic building blocks that combine into molecules and organisms, creating a coherent design language across any number of screens and features.

CONTEXT: A design system is more than a component library — it is the single source of truth for how a product looks and behaves. It ensures consistency across teams, accelerates development, improves accessibility, and creates a cohesive user experience as products grow in complexity. The system must be comprehensive enough to cover edge cases yet simple enough for any designer or developer to use.

TASK:
1. Foundation Tokens — Define the design tokens that form the system's DNA. Create a spacing scale based on a 4px or 8px grid with named values from xs to 3xl. Define border radius values from sharp to pill. Establish elevation levels from flat to floating with specific shadow values. Define opacity and transition duration tokens. These foundations should be simple, memorable, and consistently applied throughout all components.
2. Button Component — Design the button in all its variants — primary, secondary, tertiary, and destructive — in each state including default, hover, active, focused, loading, and disabled. Show three sizes — small, medium, and large — with appropriate padding and typography scaling. Include icon-only and icon-with-text variants. Define minimum touch target sizes and keyboard focus ring styles.
3. Form Elements — Create a comprehensive form element set including text input, textarea, select dropdown, checkbox, radio button, toggle switch, date picker, and search input. Each element should show default, focused, filled, error, and disabled states. Include helper text and error message patterns. All form elements should share consistent heights, padding, and label positioning.
4. Card & Container Patterns — Design card components in multiple configurations — basic card with padding, media card with image header, list card with horizontal layout, and interactive card with hover state. Define how cards stack, grid, and respond to different viewport widths. Include consistent padding rules, content slot definitions, and action footer patterns.
5. Navigation Patterns — Create header navigation with logo, nav links, search, and user menu. Design sidebar navigation with collapsible sections. Include breadcrumb, tab bar, and pagination components. Define mobile navigation patterns including hamburger menu, bottom tab bar, and contextual back buttons. All navigation components should show active, hover, and disabled states.
6. Feedback & Overlay Components — Design toast notification, alert banner, modal dialog, tooltip, and popover components. Define animation and timing for entrances and exits. Include dismiss patterns and stacking behavior for multiple simultaneous notifications. Ensure modals trap focus correctly for accessibility. Define backdrop overlay opacity and the click-outside-to-dismiss pattern.