Colors

Primary & Brand

Primary

--primary

Primary Foreground

--primary-foreground

Backgrounds & Surfaces

Background

--background

Foreground

--foreground

Card

--card

Muted

--muted

UI Elements

Secondary

--secondary

Accent

--accent

Destructive

--destructive

Border

--border

Text Colors

Foreground

Default text

Muted

Secondary text

Primary

Accent text

Destructive

Error text

Typography

Headings

text-7xl font-bold

Heading 1

text-5xl font-bold

Heading 2

text-4xl font-bold

Heading 3

text-2xl font-semibold

Heading 4

text-xl font-semibold

Heading 5

text-lg font-semibold

Heading 6

Body Text

text-lg

Large body text for introductions and emphasis. Use sparingly.

text-base (default)

Default body text for most content. Readable and balanced.

text-sm

Small text for captions, labels, and secondary information.

text-xs

Extra small text for fine print and metadata.

Links

Primary Link Muted Link Underlined Link

Buttons

Variants

Sizes

With Icons

States

Badges

Variants

Default

Secondary

Outline

Destructive

Success

Warning

Use Cases

New Feature

Active

Pending

Expired

v1.0.0

Cards

Card Title

Card description goes here with supporting text.

This is the main content area of the card. Use it for any content.

Interactive Card

Hover to see the border effect.

Cards can be clickable with hover states for navigation.

Inputs

Text Input

Default

Disabled

With Icon

Tables

Basic Table

Name	Email	Status
John Doe john@example.com	john@example.com	Active
Jane Smith jane@example.com	jane@example.com	Pending
Bob Wilson bob@example.com	bob@example.com	Inactive

Table Guidelines

Use border rounded-lg overflow-hidden for table container
Header uses bg-muted/50 background
Use hover:bg-muted/30 on rows for hover state
Use divide-y on tbody for row separators
Hide columns on mobile with hidden sm:table-cell
Delete buttons use text-red-600 dark:text-red-400

Modals

Basic Dialog

Destructive Dialog

Modal Guidelines

Always include a DialogHeader with title and optional description
Destructive titles use text-red-600 dark:text-red-400
Add confirmation input for irreversible actions (type "DELETE")
Warning boxes use bg-red-500/10 border-red-500/20
Info boxes use bg-yellow-500/10 border-yellow-500/20

Alerts

Alert Variants

Information

This is an informational message for the user.

Success

The operation was completed successfully.

Warning

Please review this before proceeding.

Error

Something went wrong. Please try again.

Inline Form Errors

Please enter a valid email address.

Invalid credentials. Please check your email and password.

Color Reference

Info: blue-500/10, blue-600 dark:blue-400
Success: green-500/10, green-600 dark:green-400
Warning: yellow-500/10, yellow-600 dark:yellow-500
Error: red-500/10, red-600 dark:red-400

Dropdowns

Basic Dropdown

Profile Dropdown

Dropdown Guidelines

Use DropdownMenuLabel for section headers
Use DropdownMenuSeparator between groups
Destructive items use text-red-600 dark:text-red-400
Add focus:text-red-600 to maintain color on focus
Use align="end" for right-aligned dropdowns

Icons

We use Lucide React for icons. Here are commonly used icons:

Home

Users

Calendar

Award

Bell

Settings

Mail

ArrowRight

Check

AlertCircle

Icon Sizes

h-4 w-4

h-5 w-5

h-6 w-6

h-8 w-8

Feature Cards

Default

Feature Title

Feature description goes here. Keep it concise and benefit-focused.

Another Feature

Another feature description that highlights the value proposition.

Third Feature

Third feature description to complete the grid layout.

Highlight Variant

Highlighted Feature

Use the highlight variant to draw attention to key features.

Regular Feature

Compare side by side with the default variant.

Stats Bar

Use the stats bar to display key metrics and social proof.

Dojos Worldwide: 500+
Students Tracked: 50K+
Classes Logged: 1M+