Color
Which colors to use, and when.
Warm paper, charcoal ink, one lime and one amber. Colors come in three layers: a base palette, named roles that components use, and Tailwind classes made from those roles.
Themes
Pick a theme to see every color below change. A theme changes the greys and the AI color. Amber and the status colors stay.
Roles, light and dark
Click a color to copy its name.
Light
Dark
Contrast checker
Pick two colors. See if text is easy to read.
--fg on --bg
Lime means AI
Used as a background, never for text.
Amber means a person has to act
Always paired with words. Never just decoration.
Roles
Each swatch is a live token. Change the theme in the sidebar and every swatch updates.
Ink and paper
The base colors. Charcoal is the text color and the main button color.
bg
Page background
bg-bg
surface
Cards and inputs
bg-surface
sunken
Trays, your own messages
bg-sunken
hover
Hover
bg-hover
selected
A chosen row or option
bg-selected
line
Thin 1px lines
border-line
line-strong
Inputs, emphasis
border-line-strong
fg
Text and primary action
text-fg
fg-muted
Secondary text
text-fg-muted
fg-subtle
Small notes and hints
text-fg-subtle
States
Selected, pressed and disabled each have their own color. Disabled is one look everywhere.
pressed
A button held down
bg-pressed
disabled
A control you cannot use yet
bg-disabled
disabled-fg
Its text
text-disabled-fg
inverse
Tooltips and value labels
bg-inverse
Highlight
Lime fills small things like the send button, badges and source markers. Never use it for text on a light background.
lime
Send button, highlight
bg-lime
lime-soft
Selected items, sources
bg-lime-soft
Attention
Amber means a person has to act. It always comes with words that say why. Never use it for decoration.
attention
Needs you
bg-attention
attention-soft
Approval area
bg-attention-soft
attention-fg
Text on soft amber
text-attention-fg
Status
Soft on purpose, so status never looks more urgent than amber.
success
Done
bg-success
danger
Failed
bg-danger
info
Neutral notice
bg-info
Usage rules
- Main buttons are charcoal. In dark mode they turn lime.
- Never put lime text on paper. Lime is a fill with charcoal text on top.
- Amber shows only when a person has to act, and always next to words that say why.
- Never use color alone. Add an icon, a shape or a label.
- Body text has a 4.5:1 contrast ratio against its background in both themes. The lightest text color is tuned to pass.
Using tokens
<div className="rounded-card border border-line bg-surface p-5 text-fg">
<p className="text-fg-muted">Secondary text</p>
<span className="rounded-control bg-sunken px-2 py-0.5 text-small leading-4">1040</span>
</div>