Design Tokens
Foundational design values for colors, typography, spacing, and breakpoints.
Color Palette
Primary (Teal)
--primary
#14B8A6
Trust, care, growth, main actions
Accent (Amber)
--accent
#F59E0B
Warmth, donations, highlights
Destructive
--destructive
#EF4444
Errors, alerts, danger
Muted
--muted
#27272A
Backgrounds, disabled states
Background
--background
#09090B
Main background (dark mode)
Foreground
--foreground
#FAFAFA
Primary text
Typography Scale
| Name | Size | Weight | Usage |
|---|---|---|---|
| Display | 48-72px | Bold | Hero headlines |
| H1 | 36px | Bold | Page titles |
| H2 | 24px | Semibold | Section headers |
| H3 | 18px | Semibold | Card titles |
| Body | 16px | Regular | Default text |
| Small | 14px | Regular | Secondary text |
| Caption | 12px | Medium | Labels, metadata |
Font family: Geist Sans (variable)
Spacing Scale
| Token | Value | Usage |
|---|---|---|
| xs | 4px | Tight gaps |
| sm | 8px | Icon padding |
| md | 16px | Default spacing |
| lg | 24px | Section gaps |
| xl | 32px | Large sections |
| 2xl | 48px | Page margins |
Responsive Breakpoints
| Breakpoint | Min Width | Target |
|---|---|---|
| sm | 640px | Mobile landscape |
| md | 768px | Tablet |
| lg | 1024px | Desktop |
| xl | 1280px | Large desktop |
| 2xl | 1536px | Wide screens |