Colors & Design Tokens

Brand Colors

--brand-600
#2563eb
--brand-50
#eff6ff
--brand-700
#1d4ed8

Status Colors

Success
Warning
Danger
Info

Buttons

Variants & Sizes

Primary

Secondary

Ghost

Danger

Forms & Inputs

Badges & Status Indicators

Active Pending Archived Pending Review Neutral Purple

Alerts

Cards

Standard Card
With header and body

This is a standard card component with title, subtitle, and content area.

Card with Actions
Includes action buttons

This card has a footer section with action buttons.

KPI Cards

+12.5%
$12,345
Revenue
+8.2%
2,543
Users
-2.1%
34.2%
Bounce Rate
+5.0%
23
Errors

Tables

Name Email Role Status
Alice Johnson alice@example.com Admin Active
Bob Smith bob@example.com Manager Active
Charlie Brown charlie@example.com Client Pending

Typography

Heading 1 (H1)

Used for page titles and main headings

Heading 2 (H2)

Used for section headings

Heading 3 (H3)

Used for subsection headings

This is a paragraph with standard body text. It uses the default font size of 14px and line-height optimized for readability.

This is smaller text (12px) used for captions and metadata.

Monospace font for code snippets