Design System

A comprehensive component library built with Figma design specifications. All components follow consistent patterns for typography, spacing, colors, and interactions.

Components
9
Typography Styles
12
Color Variants
3

Design Principles

Consistency

All components share the same design tokens for colors, typography, spacing, and shadows. This ensures visual harmony across the entire application.

Accessibility

Components are built with semantic HTML elements and proper ARIA attributes. Color contrasts meet WCAG guidelines.

Performance

Lightweight components with minimal dependencies. CSS variables enable efficient theming without JavaScript overhead.

Dark Mode

Full support for light and dark themes through CSS variables. Colors automatically adapt to the user's preference.

Color System

Surface Colors

surface-100
surface-200
surface-300
surface-400

Text Colors

font-primary
font-secondary
font-tertiary

Get Started

Import components from the design system and start building consistent UIs.

// Import components
import { DesignButton } from "@/components/ui/design-button";
import { DesignInput } from "@/components/ui/design-input";
import { DesignTag } from "@/components/ui/design-tag";
// Or use CSS classes directly
<h1 className="text-h3 text-color-primary">Title</h1>
<p className="text-p text-color-secondary">Content</p>