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

Email Address

Username

Message

Country

Badges & Status Indicators

Active Pending Archived Pending Review Neutral Purple

Alerts

Success

Setup completed successfully!

Attention

Please review and confirm these changes before proceeding.

Error

An error occurred. Please try again or contact support.

Information

New features are available. Check them out!

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%

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

Design System & Styleguide