Design tokens, components & patterns
Violet 600
#7c3aed
Fuchsia 600
#c026d3
Purple 500
#a855f7
Pink 500
#ec4899
Slate 950
#020617
Slate 800
#1e293b
Slate 600
#475569
Slate 100
#f1f5f9
Emerald 500
#10b981
Amber 500
#f59e0b
Red 500
#ef4444
Blue 500
#3b82f6
Brand Gradient
from-violet-600 via-purple-500 to-fuchsia-600
text-5xl font-bold
Display Heading
text-3xl font-bold
Page Title
text-xl font-semibold
Section Heading
text-base
Body text. The quick brown fox jumps over the lazy dog. Used for paragraphs and general content across the platform.
text-sm text-slate-500
Small / secondary text. Used for captions, labels, and supporting details.
gradient-text
Gradient Text
Variants
Sizes
With Icon
States
White background with light border and subtle shadow.
Used in dark sections with transparent icon backgrounds.
Subtle gradient border using the .gradient-border class.
All icons are from lucide-react. Standard size: w-5 h-5. Small: w-4 h-4.
rounded-lg
rounded-xl
rounded-2xl
rounded-3xl
rounded-full