Theme Lab
Experiment with colors and export your theme configuration
Color Palette
Raw swatches from src/design/palette.ts
swatch1#3E4E43
swatch2#1E2B22
swatch3#B18651
swatch4#657D79
swatch5#0C0F11
swatch6#C6A371
swatch7#4B5A66
swatch8#A66C2F
swatch9#6F8642
swatch10#D8C894
swatch11#F4F5F6
swatch12#E6E6E6
swatch13#24282B
swatch14#121416
swatch15#B8860B
swatch16#C9971F
swatch17#2B6C72
swatch18#261204
Color Roles
Base colors, brand, and utility colors
Background
#e6e6e6
Foreground
#0C0F11
Card
#FFFFFF
Border
#6f8642
Primary (Brand)
#d8c894
Accent (CTAs/Links)
#657D79
Muted Text
#4B5A66
Success
#6f8642
Warning
#c9971f
Danger
#b13e67
Section Backgrounds
Section-level background colors for visual hierarchy
Section Default
#F9F9F6
Section Alt
#E9E3C1
Section Highlight
#d8c894
Section Dark
#4b5a66
Live Preview
See your changes in real-time
Section Default
This is the default section background
Section Alt
Alternating section background
Section Highlight
Brand highlight section
Section Dark
Footer or emphasis band
Build fast, reliable software
Senior engineers delivering full-stack development and DevOps
Typography Preview
Regular text using text-fg
Muted text using text-muted
Accent text using text-accent
Primary brand text using text-primary