Phase 1 — Foundation

Design System
Preview

Base components and tokens built in Phase 1. Toggle the theme using the button in the header to see light and dark modes in action.

Button

src/components/ui/Button.tsx

Variants

Sizes — primary

Sizes — secondary

Sizes — ghost

Disabled

src/components/ui/Container.tsx

size="sm"max-w-2xl

size="md"max-w-4xl

size="lg"max-w-5xl

size="xl"max-w-6xl

size="full"max-w-[1440px]

src/styles/

Typography

Cormorant Garamond

The quick brown fox jumps

Inter — body text. The quick brown fox jumps over the lazy dog. 0123456789.

Color tokens

--bg-primary

--bg-secondary

--bg-surface

--bg-elevated

--accent

--accent-subtle

--border