A small palette, used well
Color on this site is doing one of three jobs: holding the page, carrying the words, or pointing at something worth pointing at. Everything else is restraint.
Each color is stored as an HSL triplet on a CSS variable, and surfaced through a Tailwind token like bg-background or text-accent. Components never reach for raw hex — they ask the system for a role, and the system answers in the current theme.
Surfaces
The surfaces are the quiet half of the system — the paper the writing sits on. They change with the theme, but their relationship to one another stays constant.
| Name | Token | HSL | Role |
|---|---|---|---|
| Background | --background |
40 33% 97% |
The page itself |
| Foreground | --foreground |
25 20% 15% |
Body text and primary marks |
| Card | --card |
0 0% 100% |
Lifted surfaces, post bodies |
| Muted | --muted |
35 20% 94% |
Inline code, chips, soft fills |
| Secondary | --secondary |
35 25% 92% |
Tag pills, quiet buttons |
Ink and accent
Primary is the ink — the dark warm tone that carries headings and emphasis. Accent is the only color allowed to raise its voice; it is reserved for links, active states, and the occasional rule.
| Name | Token | HSL | Role |
|---|---|---|---|
| Primary | --primary |
25 35% 25% |
Headings, strong type, ink marks |
| Accent | --accent |
15 65% 50% |
Links, focus rings, callouts |
| Destructive | --destructive |
0 70% 50% |
Errors and irreversible actions |
Lines and highlights
Borders, rules, and highlights are the punctuation of the layout. They are almost never pure black — they are tinted to belong to the surface they sit on.
| Name | Token | HSL | Role |
|---|---|---|---|
| Border | --border |
30 15% 88% |
Inputs, cards, soft divisions |
| Rule | --rule |
25 15% 80% |
Editorial rules between sections |
| Highlight | --highlight |
45 80% 88% |
Marker pen, gentle emphasis |
| Ring | --ring |
15 65% 50% |
Focus outlines |
Using the tokens
When building a new component, reach for a role rather than a color. bg-card will follow the theme; bg-white will not. The same goes for text — text-muted-foreground will read correctly in both light and dark, while a hard-coded gray will betray you the first time the theme changes.
// Good — semantic, theme-aware
<aside className="bg-card text-card-foreground border border-rule">
<p className="text-muted-foreground">A quiet note.</p>
</aside>
// Avoid — hard-coded, theme-blind
<aside className="bg-white text-black border border-gray-200">
<p className="text-gray-500">A quiet note.</p>
</aside>
If a design needs a color that isn’t here, the answer is almost never to add a one-off. It is to ask whether the role already exists under another name.