Style Guide

Explore all available design elements and components

Brand Colors

Primary

--primary

Secondary

--secondary

Accent

--accent

Success

--success

Warning

--warning

Error

--error

Gradient System

Primary Gradient

--gradient-primary

Purple to Pink

--gradient-purple-pink

Blue to Purple

--gradient-blue-purple

Green to Blue

--gradient-green-blue

Orange to Red

--gradient-orange-red

Typography

Heading 1 - Main Page Titles

Heading 2 - Section Titles

Heading 3 - Subsection Titles

Heading 4 - Card Titles

Heading 5 - Small Headings
Heading 6 - Tiny Headings

Body text - Regular paragraph text used throughout the site. This is the standard font size and line height for readable content.

Large text - For emphasis or lead paragraphs

Small text - For captions or secondary information

Eyebrow Text - For labels or categories

Gradient Text - For special emphasis

Buttons

Card Styles

Flat Card

Simple card with minimal shadow

Elevated Card

Card with prominent shadow

Outlined Card

Card with colored border

Glass Card

Modern glassmorphism effect

Shadow System

--shadow-sm
--shadow-md
--shadow-lg
--shadow-xl

Border Radius

Small
Medium
Large
Extra Large
Full (Pill)

Glass Morphism Effects

Light Glass

10% opacity with 10px blur

Medium Glass

20% opacity with 15px blur

Strong Glass

30% opacity with 20px blur