Design System

A preview of all available components and design tokens.

Colors

Background

Foreground

Primary

Secondary

Muted

Accent

Destructive

Card

Border

Input

Ring

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Body text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Small text - Used for captions and helper text.

Button

Variants

Sizes

States

Badge

DefaultSecondaryOutlineDestructive

Card

Card Title
Card description with supporting text.

Card content goes here. This is where the main content lives.

Small Card
Compact variant

Smaller padding for denser layouts.

Form Elements

Select

Dropdown Menu

Alert Dialog

Separator

Horizontal separator:

Item 1Item 2Item 3