Design System

Comprehensive design system documentation with examples, guidelines, and implementation details.

Design Principles

Consistency

Unified visual language across all components and pages.

Accessibility

WCAG AA compliant with proper contrast ratios and keyboard navigation.

Performance

Optimized for speed with lazy loading and efficient rendering.

Quick Start

Import components from the design system:

import { Button, Card, Typography } from '@/components/ui/design-system'

Use the Typography components for consistent text styling:

<Typography.Display>Hero Heading</Typography.Display>
<Typography.Body>Body text content</Typography.Body>
<Typography.Caption>Caption text</Typography.Caption>