Color
A single neutral family, Tailwind's Slate scale. Chromatic color is reserved for functional states. Same behavior in light and dark.
There is no brand color: no color competes for attention unless it has a job to do. We rely on the Tailwind palette, Slate for neutrals and green/red/amber for states, chosen because it is proven and accessible rather than inventing our own.
Palette
These swatches are painted live with var(--color-*): what you see is the theme your system has active right now. Switch your system's color mode and the page switches with it. The map of both themes is in the table below.
primary
Main text.
secondary
Secondary text, metadata, captions.
background
Main background.
surface
Tinted surfaces above the background.
surface-raised
Raised panels (bento surface). In dark it is a lift, not an inversion.
border
Default borders. Subtle separation.
success
Functional states only.
error
Functional states only.
warning
Functional states only.
Light and dark
| Token | Light | Dark |
|---|---|---|
| primary | Slate/900 | Slate/200 |
| secondary | Slate/500 | Slate/300 |
| background | White | Slate/700 |
| surface | Slate/50 | Slate/900 |
| surface-raised | = surface | primary at 4% over the background |
| border | Slate/200 | Slate/500 |
| success | Green/700 | Green/400 |
| error | Red/700 | Red/400 |
| warning | Amber/700 | Amber/400 |
The source of truth for values is tokens.css; this table is a reference. If they disagree, the token wins.
On media
Text and scrim over images or video don't follow the theme: imagery is arbitrary and legibility can't depend on the color mode.
on-media over media-scrim
| Token | Value | Use |
|---|---|---|
| --color-on-media | #FFFFFF, both themes | Text over image/video (BentoCaseCell label; --hero-text derives from it) |
| --media-scrim | rgba(0,0,0,0.7), both themes | Base of the gradient under titles over media |
| --hero-overlay | rgba(0,0,0,0.2), both themes | VideoHero's soft scrim: legibility without dimming the footage. Deliberately not --media-scrim. |
Rules
Clickability is communicated by form (arrow or underline), not by color, so it reads the same with mouse, keyboard and screen reader. Dark mode is triggered only by prefers-color-scheme, with no toggle and no class, with one documented exception: the NavPill's black.