Design System

A comprehensive design system built for high-end SaaS applications. Calm, confident, and professional.

Color Tokens

Semantic Colors

Background

--background

Foreground

--foreground

Primary

--primary

Secondary

--secondary

Muted

--muted

Accent

--accent

Destructive

--destructive

Success

--success

Warning

--warning

Info

--info

Card

--card

Border

--border

Primary Scale

Premium indigo - the main brand color used for interactive elements and accents.

50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
Primary Light
Primary Default
Primary Dark
Primary Outline
Primary Subtle

Success Scale

Green tones for positive states, confirmations, and successful operations.

50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
Success Light
Success Default
Success Dark
Success Outline
Success Subtle

Warning Scale

Amber tones for caution states, warnings, and pending operations.

50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
Warning Light
Warning Default
Warning Dark
Warning Outline
Warning Subtle

Destructive Scale

Red tones for errors, danger states, and destructive actions.

50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
Destructive Light
Destructive Default
Destructive Dark
Destructive Outline
Destructive Subtle

Info Scale

Cyan tones for informational states, tips, and neutral notifications.

50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
Info Light
Info Default
Info Dark
Info Outline
Info Subtle

Typography Scale

Display

display-2xlThe quick brown fox
display-xlThe quick brown fox
display-lgThe quick brown fox
display-mdThe quick brown fox
display-smThe quick brown fox
display-xsThe quick brown fox

Headings

heading-xlThe quick brown fox jumps over the lazy dog
heading-lgThe quick brown fox jumps over the lazy dog
heading-mdThe quick brown fox jumps over the lazy dog
heading-smThe quick brown fox jumps over the lazy dog
heading-xsThe quick brown fox jumps over the lazy dog

Body

body-xlThe quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
body-lgThe quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
body-mdThe quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
body-smThe quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
body-xsThe quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Labels

label-lgLABEL TEXT EXAMPLE
label-mdLABEL TEXT EXAMPLE
label-smLABEL TEXT EXAMPLE
label-xsLABEL TEXT EXAMPLE

Shadow System

elevation-1
elevation-2
elevation-3
elevation-4
elevation-5
elevation-6

Glow Effects

glow-sm
glow-md
glow-lg

Spacing Scale

1
2
3
4
5
6
8
10
12
16
20
24
32

Border Radius

sm
md
lg
xl
2xl
3xl
full

Button Variants

Variants

Sizes

States

Badges

Variants

DefaultPrimarySecondarySuccessWarningDestructive

With Dot

DefaultPrimarySuccessWarningDestructive

Sizes

Extra SmallSmallMediumLarge

Cards

Default Card

A standard card with subtle shadow.

Cards are used to group related content and actions.

Elevated Card

Higher elevation for emphasis.

Use elevated cards for important content.

Interactive Card

Hover to see the effect.

Interactive cards lift on hover for clickable items.

Tabs

Default (Underline)

This is the overview tab content. The default variant uses an underline style that works well for most navigation patterns.

Contained

Manage your account settings and preferences here. The contained variant provides a more subtle, integrated look.

Pills

Showing all items. The pills variant is great for filtering content with a more playful, button-like appearance.

Toggle & Toggle Groups

Single Toggle

Individual toggle buttons that can be pressed on/off. Great for binary options.

Toggle Variants

Default
Outline
Ghost
Subtle

Toggle Sizes

Toggle Group (Single Selection)

Only one option can be selected at a time. Perfect for mutually exclusive choices.

Text Alignment
View Mode
Theme

Toggle Group (Multiple Selection)

Multiple options can be selected. Useful for text formatting or filter options.

Text Formatting

Toggle Group Variants

Default
Outline
Ghost

Toggle Group Sizes

Small
Medium
Large

Disabled State

Disabled Toggle
Disabled Group

Motion Principles

Timing

Instant0ms
Fast150ms
Normal200ms
Slow300ms
Slower400ms

Easing

Ease Out Expoease-out-expo
Springspring
Spring Gentlespring-gentle
Smoothsmooth

E-commerce Components

Product Card

Display product information in grid or list layouts. Supports badges, ratings, and hover effects.

Sale

Bags

Classic Leather Bag

$299.00$399.00
(124)
New

Accessories

Minimalist Wallet

$89.00
(87)
Bestseller

Premium Sneakers

$189.00

Price Display

Format and display prices with optional sale pricing and savings indicators.

Regular
$299.00
On Sale
$299.00$399.00
With Savings
$299.00$399.00Save 25%
Large
$299.00$399.00Save 25%

Quantity Selector

Increment/decrement controls for product quantities with size variants.

Small
Medium
Large
Disabled

Rating

Star rating display with optional review count.

5 Stars
4.5 Stars
With Count
(128)
Large
(42)

Checkout Steps

Multi-step progress indicator for checkout flows.