Palette
Design tokens that power this site. Colors adapt automatically between light and dark modes.
Base 100
Primary background, the foundation of your interface
Base 200
Secondary surfaces for visual hierarchy
Base 300
Tertiary elements and subtle boundaries
Base Content
Default text color for readability on base surfaces
Primary
Brand color for primary actions and key interactions
Secondary
Alternative emphasis for supporting actions
Accent
Highlights and special elements that pop
Neutral
Muted elements for subtle, unobtrusive UI
Info
Informational messages and helpful hints
Success
Positive outcomes and confirmations
Warning
Cautions and alerts that need attention
Error
Errors and destructive actions
OKLCH values for light and dark themes. Toggle theme with Ctrl/Cmd + Shift + L
| Role | Dark | Light |
|---|---|---|
| Base 100 | ||
| Base 200 | ||
| Base 300 | ||
| Base Content | ||
| Primary | ||
| Primary Content | ||
| Secondary | ||
| Secondary Content | ||
| Accent | ||
| Accent Content | ||
| Neutral | ||
| Neutral Content | ||
| Info | ||
| Info Content | ||
| Success | ||
| Success Content | ||
| Warning | ||
| Warning Content | ||
| Error | ||
| Error Content |