/pricing, /faq, /about, /status and /security had to start existing on a group of product sites that share no design system. Light pages and dark ones, different type scales, no token names in common between any two of them. One set of answers, each rendered inside its own product's chrome.
That split makes the markup easy and the stylesheet hard. The body renders nothing but h2, p, ul, li, a and code, which every host already styles. But any colour declared in the shared file is the wrong colour on most of the sites it lands in, and the failure is silent: the page still renders, still returns 200, still carries its canonical and its JSON-LD, and only looks wrong to somebody who opens it in a browser.
So the file sets no color, no font-family, no font-size on text. Three mechanisms replace them.
Lose every specificity fight on purpose
Prose fallbacks are wrapped in :where(), which gives them zero specificity. They apply only where the host has no opinion, and any host rule wins with nothing to configure.
They exist because one host does not reach these elements at all. Its document styles are written as .doc-prose > p, a direct-child selector, and the shim renders paragraphs one level deeper inside .kx-block. Measured at 1440px on 2026-08-15: margin-bottom: 0px on every paragraph and margin-top: 0px on every h2, so MatchRail's /about ran two paragraphs together and sat its headings flush against the text above them.
Benchfile penalty payment explanation page with numbered action steps — Penalties clear via separate city processes; users resolve through DOB NOW login.
Take colour from the reader instead of a token
The three genuinely new elements, a bordered panel, a state chip and a muted footnote, take everything through currentColor:
border: 1px solid color-mix(in srgb, currentColor 18%, transparent)
That resolves against the host's ink on a light page and against the host's paper on a dark one, with nothing to keep in sync. In a browser without color-mix support the shorthand still resolves to untouched currentColor, which is flatter and visible.
The escape hatch, and the name that was already spoken for
Inheriting the host's colour is only safe if the host sets one. Several of these sites style only their own class names and never touch body or bare p/h2/a. On a light page the browser default is black and black was right. On a dark page it is silent and total: Tearline's /security computed rgb(0, 0, 0) on rgb(26, 25, 23), 1.20:1, with pure blue default links.
Hence a named contract, defaulting to inherit so a host that styles bare elements sets nothing and changes nothing:
.kx-surface {
/* The ink contract. The names are --kx-surface-*, NOT --kx-*, because
--kx-ink is already taken: the house design kit several of these repos
ship declares --kx-ink, --kx-heading, --kx-link and --kx-paper. On
CivicBinder Health that kit sets --kx-ink: #ffffff for a dark surface. */
color: var(--kx-surface-ink, inherit);
}
.kx-surface :where(a) {
color: var(--kx-surface-link, inherit);
text-decoration: underline;
}
.kx-surface :where(h1, h2, h3) {
color: var(--kx-surface-heading, var(--kx-surface-ink, inherit));
}The first version used the bare --kx-* names. var() has no namespace and no ownership check. A property this file never defines still resolves, from whatever else in the document did define it, and the inherit fallback never fires, because the variable is not missing. On CivicBinder Health the ink contract picked up #ffffff and rendered the whole of /faq at rgb(255,255,255) on rgb(255,255,255). Six paragraphs and five headings at 1.00:1.
Squatting on a prefix somebody else owns is a defect that only appears on the repos that own it, so it passed everywhere else.
| Mechanism | Host styles this | Host styles nothing | Measured failure it was written for |
|---|---|---|---|
:where(p), :where(h2) | host rule wins, no fight | supplies margin: 0 0 1em | MatchRail /about, paragraphs at margin-bottom: 0px under a .doc-prose > p selector |
currentColor + color-mix | resolves to inherited ink | resolves to inherited ink | none recorded; this is the layer that needed no per repo configuration |
var(--kx-surface-ink, inherit) | shell sets it from the repo's own tokens | falls back to inherit | Tearline /security, rgb(0,0,0) on rgb(26,25,23), 1.20:1 |
list-style: disc, no :where() | host loses, deliberately | same | a "What is stored" list read as four unbulleted lines with hard breaks |
That last row is the only place the file argues. Some of these design systems reset list-style: none globally, and a list of what a product stores about you is the last list that should be hard to count.
Both contrast failures returned 200 and passed every check that can be made from outside the page. Both were found by loading the page in a real browser and reading the computed colour.
That's how we built BenchFile.
One shipped product, taken apart, once a month. What it does, what it cost to build, what the pipeline behind it looks like, and what the numbers did — read off the repository and the live site, not written from memory. Join the list.
← All writing