Design System
Visual language and component library
Colors
Brand Colors
Brand
Brand Light
Brand Dark
Accent
Accent Dark
Gray Scale
White
Gray 200
Gray 300
Gray 400
Gray 500
Gray 600
Gray 700
Gray 800
Gray 900
Gray 950
Text Colors
Text Default
Text Light
Text Dark
Typography
Headings
text-4xl md:text-5xl lg:text-6xl font-bold
Heading 1
text-3xl md:text-4xl font-bold
Heading 2
text-2xl md:text-3xl font-semibold
Heading 3
Body Text
text-base
This is the base text size used throughout the site. It's responsive and adjusts based on viewport width.
text-lg
This is a larger text size, often used for important paragraphs.
text-sm
This is smaller text, used for captions and secondary information.
Spacing
xs (0.25rem)
sm (0.5rem)
md (1rem)
lg (2rem)
xl (4rem)
Containers
Container Sizes
The site uses these container sizes for consistent content width:
sm (max-w-3xl)
max-w-3xl
md (max-w-5xl)
max-w-5xl
lg (max-w-7xl) - Default
max-w-7xl (Default)
xl (max-w-screen-2xl)
max-w-screen-2xl
Section Backgrounds
White / Gray 900 (Dark Mode)
background="white"
Gray 100 / Gray 800 (Dark Mode)
background="gray-100"
Gray 900 / White (Dark Mode)
background="gray-900"
Gray 800 / Gray 100 (Dark Mode)
background="gray-800"
Gray 950 / Gray 50 (Dark Mode)
background="gray-950"