Design System

Complete design system implementation with Tailwind CSS v4 CSS-first approach

Color Palette

Brand Colors

Primary
#6366F1
Secondary
#14B8A6
Accent
#F59E0B

Semantic Colors

Success
#10B981
Error
#EF4444
Warning
#F59E0B
Info
#3B82F6

Neutral Scale

Gray 950
Gray 900
Gray 800
Gray 700
Gray 600
Gray 500
Gray 400
Gray 300
Gray 200
Gray 100

Typography

Display Text (72px)
Heading 1 (48px)
Heading 2 (36px)
Heading 3 (24px)
Body Large Text (18px) - Lead paragraphs and important content
Body Text (16px) - Standard paragraph text for reading
Small Text (14px) - Supporting information
MICRO TEXT (12px) - Labels and metadata
Monospace Text - Code snippets and technical content

Interactive Elements

Buttons

Cards

Standard Card

A standard elevated card with hover effects

Glass Card

A glass morphism card with backdrop blur

Special Effects

Gradients & Effects

Brand Gradient
Gradient Border
Glass Effect

Gradient Text Effect

Beautiful text gradients for emphasis

Animations

Fade In
Slide Up
Scale In

Design system implemented with Tailwind CSS v4 • CSS-first approach