Nine achromatic neutrals, one accent, no shadows, no Material. Written down here because the last system (Material 3, blue→green gradient) lived only in a 2019 slide deck nobody re-read before extending it, this page is meant to actually get re-read. Reference implementation: static/style.css.
Argnode sells measurement and candour: "an instrument, not an advertisement." A site that decorates rather than encodes information undercuts that argument before a visitor reads a word of copy. Every rule below traces back to that, not to trend.
| Rule | Why |
|---|---|
| One accent, rationed | Green means "act on this" or "this is the measured point." More than ~2 per screen and it stops meaning anything. |
| No shadows, anywhere | Depth comes from luminance and hairlines. Lifting is Material elevation, and Material is what this system replaced. |
| Hover moves luminance, never position | No translate, no scale, those move the click target out from under the cursor. |
| Surfaces separate by a hairline | A 1.1:1 luminance step alone is invisible on a bad monitor; never rely on shade alone. |
Because the accent is green, there is deliberately no separate "success green", a second green next to the accent would mean two things at once. Form success is a checkmark icon + neutral text. --error is the only status colour, used only inside form validation.
Ten hue families from the 2014 Material Design palette, the same source the accent came from, picked for maximum worst-case pairwise separation under normal vision and simulated colour-vision deficiency, not by eye. Method: Machado, Oliveira & Fernandes (2009) protanopia/deuteranopia simulation (linear-RGB transform) + CIEDE2000 perceptual distance. Recalculated 2026-07-31; the previous set (verified, not sourced from Material) is retired.
Worst-case ΔE 19.0 across the first four (a 4-series chart gets these, in order) · 8.7 across all ten. Every swatch also independently clears 4:1 contrast against --ground, CVD-safe and invisible is not CVD-safe.
The same ten hue families, independently re-verified for white paper, not the screen set darkened (darkening a hue and re-testing it is not the same distribution as testing dark-tuned and light-tuned tones against each other from the start; darkening this particular set was tried and collapsed separation badly). True green stays excluded on both grounds, it collapses against d7 (Brown) under deuteranopia, the same failure that ruled the accent hue out originally. Yellow/amber/orange as a family never appears here: none of their tones reach 4:1 on white without stopping looking like themselves, so none of the ten chosen families carry that hue into print.
Worst-case ΔE 13.5 first four · 9.1 all ten.
| Pair | Screen | |
|---|---|---|
| Accent on ground/paper | … | … |
| Body text on ground/paper | … | … |
| Dim text on surface | … | … |
IBM Plex Sans (400 body, 600 headings/nav/buttons) + IBM Plex Mono (400 values, 500 tabular/eyebrow labels). The split is prose vs. values, not human vs. machine authorship, because an agent writes the whole site, so an authorship rule would set every page in mono. Mono is for things scanned rather than read: figures, dates, prices, codes, identifiers, table heads, eyebrow labels.
Radius scale: 6 / 10 / 14 / 20px, nothing square, nothing a pill. Square was tried first and reversed: it read as a document/blog, not a product. The scale in order:
SEO · web analytics · Google Ads · since 2018
Three things most companies buy separately and we run as one system.
What we do How we workTechnical and on-page work that makes the site fast, crawlable and worth ranking.
GA4, server-side tracking, consent and conversion tracking.
Search, shopping, display and video for the queries organic won't win.
Filled, primary Ghost, secondary
State layer on hover (currentColor at 16% opacity), not a colour shift, --fast/--mid eased transitions, no ripple, no JS.
the logo mark, reused as: the favicon, before every h2, and the chevron on hover states across cards and the language switch. One shape, several jobs, never decorative on its own.
Material's animation curves are retired along with the rest of Material. Replacement is platform CSS: @view-transition, native <details> for accordions and the language switch (JS-free, ADR 0020), state layers instead of ripple. No scroll-triggered reveals, the page is fully rendered on arrival, which is also what a crawler and an agent see.
A real print stylesheet, not a light theme: tokens re-point to an independently-tuned ink-on-paper set (filter:invert() is never used, because it also inverts photographs and logos). Accent drops from A400 (11.6:1 on ground, ~1.5:1 on white, invisible) to Green 800 (5.1:1 on white). Nav, subnav, footer legal links, the language switcher and every glow are hidden; a printed link gets its href appended as visible text since a QR-less link on paper is a dead end otherwise.