Theme Generator
Pick a base color. Copy CSS variables or a Tailwind v4 theme.
How one color becomes a theme
Pick a single base color above. From it we build a scale of shades, from very light to very dark.
Backgrounds
Page and card fills
Interactive components
Buttons, inputs, tags
Borders and separators
Dividers, outlines
Solid colors
Primary buttons, badges
Accessible text
Links, labels on light or dark
When to use each generated color
Every token has one job. Here's a quick map of what goes where, and what it looks like put together.
Background
The page itself, behind everything.
Surface
Cards, panels, anything sitting on the page.
Surface Warm
A card inside a card, like a table header or a sidebar.
Surface Sunken
Wells that look pressed in, like input fields or progress tracks.
Border
Lines around cards, inputs, and dividers.
Border Soft
A lighter divider, for less important separations.
Foreground
Main text, like headings and body copy.
Foreground 2
Secondary text, like descriptions.
Muted
Placeholder text and disabled labels.
Primary
Main buttons and links, the color people click.
Success
Confirmations, "saved" messages, positive states.
Danger
Errors and destructive actions, like delete.
