html-docs · palette research · graphite & citron
You picked the boldest palette. Good news: it has the deepest pedigree of the six — engineering documentation, editorial brutalism, government clarity standards, and reader apps all live here. Eight references worth studying, what to steal from each, and a refined token spec for html-docs synthesized from them.
The single most on-point reference. Black, near-white, and one safety yellow, set almost entirely in their own Berkeley Mono. Everything is labeled like an instrument panel: part numbers, revision dates, tabular data. Zero decoration — and it's one of the most admired sites in the design-engineering world precisely because of that.
Why it doesn't slop: yellow is never a mood, it's a marker — callouts, keylines, active states. The identity comes from typographic rigor, not color quantity.
Mono for every identifier, slug, timestamp, and number. Functional micro-labels ("REV 2026-07 · DOC 2EE5A788"). Yellow as keyline/marker only.
The proof that ink + one yellow can carry a full-scale product company. Cavendish Yellow #FFE01B against a deep warm ink #241C15, with everything else done by typography (Means, a chunky serif) and one-color ink illustration.
Why it doesn't slop: at most surfaces yellow appears exactly once — a button, a wordmark, a background field. The warmth comes from the ink being brown-black rather than pure black.
The warm-black trick: html-docs' graphite ink #151513 keeps a hint of warmth so paper + ink never feels sterile. And the once-per-surface yellow budget.
The magazine that made black/white/yellow the smartest look in publishing. Massive grotesque headlines, hard rules, data set raw, and yellow as a highlighter bar behind or under key phrases — like a human went at the page with a marker.
Why it doesn't slop: the drama is all typographic scale and cropping. Color never carries meaning it can't back up; yellow marks the one thing you must read.
The headline-highlight idiom for marketing pages: one marked phrase in the hero instead of a colored word or gradient text. Confidence through scale.
The most rigorous precedent for "yellow = state, never decoration." The entire system is ink on white, square corners, heavy clarity — and the only yellow in it is the focus state #FFDD00, which every interactive element receives. Repeatedly cited as the least-slopped large-scale UI in the world.
Why it doesn't slop: every visual decision is a legibility decision. When color appears, it is load-bearing.
The focus contract: a thick citron focus ring on every control — signature and accessibility win in one move. Square-ish corners in forms.
The canonical modern graphite product UI: pure black and white, gray scale doing all hierarchy, hairline borders, mono for data — and it still feels unmistakably branded. html-docs already ships Geist in one stylesheet; this is what that font wants to be.
Why it doesn't slop: restraint as identity. Black primary buttons work because nothing else competes; states are grays, not colors.
The ink-button discipline for app chrome (Graphite's buttons are ink — this is the existence proof), and hairline-only card borders in dense views.
Hardware, but the most influential "instrument panel" aesthetic in software right now. Flat gray surfaces, lowercase mono labels, controls annotated like a synth faceplate, and tiny bursts of signal color that always mean something (record, warning, active).
Why it doesn't slop: every element earns a label; nothing is styled that isn't functional. Personality comes from precision, not decoration.
Lowercase mono micro-labels for editor chrome ("regions: 128 · synced 2s ago"), and the idea that the toolbar is a faceplate — grouped, engraved, calm.
The gold standard of paper-and-ink digital reading. One typeface family, one accent, ruthless removal of chrome — the cursor is the most colorful thing on screen. Their essays on interface design are the intellectual backbone of "quiet" software.
Why it doesn't slop: the document is the interface. Everything else recedes to gray until needed.
Editor philosophy: when a doc is open, chrome drops to grays; citron appears only as selection, highlight, and focus. The paper frame we spec'd is this idea.
Reader apps (Matter, Readwise Reader, Instapaper) are where the citron highlighter is a core interaction, not a style: paper page, ink text, and yellow that literally means "a human marked this." That's exactly the semantic html-docs' editor needs for selections, comment anchors, and region highlights.
Why it doesn't slop: yellow only ever appears where a person acted. It's evidence, not paint.
Citron = human/agent action trail: text selections, comment-anchored spans, "edited by agent" markers. The wash tint for hover, the full mark for anchored.
Eight references, one consistent rulebook — and it happens to be the opposite of the slop catalog:
| Rule | Seen in |
|---|---|
| Yellow is a marker, never a mood. It marks focus, action, or the one must-read thing — and appears at most once per surface. | GOV.UK (focus only), USGC (keylines), Businessweek (one marked phrase), Matter (human action), Mailchimp (one button) |
| Ink carries the brand. Buttons, links, and headlines are black; identity comes from type, spacing, and rigor. | Vercel, iA, USGC, Teenage Engineering |
| Warm the black slightly. Brown-black ink on warm paper keeps monochrome from feeling clinical. | Mailchimp (#241C15), iA, Matter |
| Mono is the voice of data. Numbers, slugs, timestamps, IDs — always monospace, always labeled. | USGC, Vercel, Teenage Engineering |
| Scale makes the drama. Big type on quiet pages beats colored type on busy ones. | Businessweek, Mailchimp, iA |
| Chrome recedes around content. When a document is open, everything else goes gray. | iA, Matter, Vercel |
Synthesizing the lineage into the html-docs token set — the main upgrade over the v1 palette is a three-step citron (wash / mark / signal) so yellow can be a state system, not one tint:
One caution from the lineage: this palette lives or dies on discipline about where yellow appears. The moment citron becomes decoration — backgrounds, icons, dividers — it collapses into a bumblebee theme. The budget is: focus rings, marks, one active state per view, and nothing else.