Color
The color system is built entirely from Flexoki, a palette designed by Steph Ango around the warmth of ink on paper. Where most design systems start with pure hues and add warmth later, Flexoki starts warm. Every color carries a slight golden undertone that makes screens feel less like screens and more like printed surfaces.
This matters because the site’s organizing metaphor is paper. The background is cream, not white. The text is ink, not black. The palette reinforces the metaphor without needing to be told.
For exact hex values and CSS variable definitions, see the implementation spec and tokens.json.
Three tiers
Every color serves one of three semantic roles: surface, structure, or text. The tiers are ordered by visual weight, from background to foreground.
| Tier | Variables | Role | Usage |
|---|---|---|---|
| Surface | --bg, --bg-2, --bg-3 | The paper | Page background, recessed areas (footer, hover states), code block surfaces |
| Structure | --ui, --ui-2, --ui-3 | Borders and dividers | Post list separators, article header rules, code block borders, blockquote left rules, table cell borders |
| Text | --text, --text-2, --text-3 | Ink on the page | Headings and emphasis (--text), body prose and meta (--text-2), decorative/non-informational elements only (--text-3) |
The surface tier creates depth through subtle shifts in warmth. --bg is the page. --bg-2 is a recessed plane, one step back. --bg-3 is the code surface. These three values replace the common pattern of using borders or shadows to separate regions.
The text tier has a strict hierarchy. --text is primary ink: headings, strong emphasis, nameplate, lede paragraphs. --text-2 is the working color: body prose, dates, navigation, captions, footnotes. --text-3 is decorative only. It intentionally fails WCAG AA contrast and must never carry readable content. Crop marks, the dinkus ornament, and the colophon use --text-3. Nothing else should. This sentence is set in —text-3. You can read it, but barely — which is the point.
Accent system
One color, one purpose: agency. --accent signals that something is interactive or alive. Link underlines, the scroll progress bar, footnote superscripts on hover, the live-now dot. The constraint is the point. When you see the accent, you know something can happen. This text is in your current accent color. Change it with the picker in the footer, or press c.
The default accent is orange (#BC5215 light, #DA702C dark), but the user can choose any of the eight Flexoki hues through the accent picker.
Pill companion colors
Category pills and type badges need color differentiation, but they can’t use the accent (that would break its singular meaning). Each accent maps to a curated triple of companion colors from the Flexoki palette, assigned to --pill-1, --pill-2, and --pill-3.
Two constraints govern every triple:
- No pill matches the accent or its perceptual neighbors on the hue wheel
- No two pills are hue-wheel neighbors
| Accent | --pill-1 | --pill-2 | --pill-3 |
|---|---|---|---|
| Red | Yellow | Cyan | Purple |
| Orange | Green | Blue | Magenta |
| Yellow | Red | Cyan | Purple |
| Green | Orange | Blue | Magenta |
| Cyan | Red | Yellow | Purple |
| Blue | Orange | Green | Magenta |
| Purple | Red | Yellow | Cyan |
| Magenta | Orange | Green | Blue |
Pill backgrounds use color-mix(in srgb, <pill-color> 8-10%, transparent) for a subtle tint that reads as categorization without competing with the accent. The pill variables update in the <head> inline script (preventing flash) and again when the user changes accent.
Dark mode
Dark mode is not an inversion. Every value is hand-tuned independently for its context.
The background moves from warm cream (#FFFCF0) to warm near-black (#100F0F). Not pure black, because ink is never pure black. The accent warms up from #BC5215 to #DA702C to maintain contrast and presence against the dark surface. --text-2 was manually lifted from the default Flexoki dark value to improve body text readability.
The full mapping for both modes is in the implementation spec. The key design decisions:
- Surface tiers compress. The difference between
--bgand--bg-2is smaller in dark mode. Depth cues become more subtle. - Structure darkens relatively.
--uiborders sit just above the surface, visible but quiet. - Accent warms. Cool-leaning accents don’t shift much. Warm accents (orange, red) shift noticeably to avoid looking muddy against dark backgrounds.
- Selection colors are custom. Light mode uses
#E5DFD0, dark mode uses#3D3730. Both are warm tints that feel continuous with the paper metaphor. Select some text on this page to see it.
Contrast
All text/background pairings pass WCAG 2.1 AA for their intended use. The full audit is in the implementation spec. Key ratios:
| Pairing | Light | Dark | Notes |
|---|---|---|---|
--text on --bg | 18.6:1 | 12.0:1 | Headings, strong emphasis |
--text-2 on --bg | 5.0:1 | 7.1:1 | Body prose, meta |
--accent on --bg | 4.7:1 | 5.8:1 | Links, interactive elements |
--text-3 on --bg | 2.0:1 | 2.6:1 | Decorative only, intentionally fails AA |
--text-3 intentionally fails AA. It exists for elements that are visual texture, not content: crop marks, the section break dinkus, the copyright colophon. No readable or actionable text should ever use it.
Pill colors maintain adequate contrast in both modes for all accent choices. Every Flexoki palette value was selected with sufficient contrast against both --bg values.
Syntax highlighting
Code blocks use Flexoki-mapped colors through Shiki CSS variables. Each syntax role (keyword, string, function, constant, comment) maps to a specific Flexoki hue, maintaining the palette constraint even inside code.
The full Shiki variable mapping is in the implementation spec. One intentional deviation: dark mode comment and punctuation colors use #878580 rather than --text-2 (#A09D98). Code comments sit slightly darker than prose secondary text for better readability within the code context.
Do’s and don’ts
| Do | Don’t |
|---|---|
Use --text-2 for body prose, dates, meta | Use --text-3 for anything a user needs to read |
Use --accent for links, active states, liveness indicators | Use --accent as a background fill or border color |
Use --bg-2 to establish a distinct surface plane | Use --bg-2 as emphasis behind inline text |
| Test every color pairing in both modes | Assume dark mode values are light values inverted |
| Use the Flexoki palette exclusively | Introduce colors outside the palette |
Specimens
Three Tiers
Accent Colors
Accent Means Agency
The accent signals that something is alive — interactive, responsive, yours to act on.