Color Palette
Primary - Purple
purple-50
#faf5ff
purple-100
#f3e8ff
purple-200
#e9d5ff
purple-300
#d8b4fe
purple-400
#c084fc
purple-500
#a855f7
purple-600
#9333ea
purple-700
#7c3aed
purple-800
#6b21a8
purple-900
#581c87
Semantic Colors
Success
#22c55e
Warning
#f59e0b
Error
#ef4444
Info
#3b82f6
Typography
Display
text-5xl font-extrabold
Display Heading
text-4xl font-bold
Large Heading
Body Text
text-xl
Large body text for hero sections and important content.
text-base
Standard body text for paragraphs and general content. This is the default size used throughout the application for readability and accessibility.
text-sm
Small text for captions, metadata, and secondary information.
text-xs
Extra small text for labels, badges, and fine print.
Font Weights
font-normal
Normal (400)
font-medium
Medium (500)
font-semibold
Semibold (600)
font-bold
Bold (700)
font-extrabold
Extrabold (800)
Spacing Scale
4px
p-1 / gap-1
8px
p-2 / gap-2
12px
p-3 / gap-3
16px
p-4 / gap-4
24px
p-6 / gap-6
32px
p-8 / gap-8
48px
p-12 / gap-12
64px
p-16 / gap-16
80px
p-20 / gap-20
96px
p-24 / gap-24
Explore Component Library
See all the interactive components that GenAI uses to build dynamic layouts.
View Components