/* ============================================================================ * ARGUS LANDING — SHARED TOKENS * Sprint: landing-consolidate, 2026-08-03 * * ── DOCROOT: THIS FILE DOES NOT REACH THE DASHBOARD ───────────────────────── * Added 2026-08-28, sprint dashboard-typo. COMMENT ONLY — that sprint was * scoped to /var/www/dashboard and changed no value in this file. * * REACHES: argus.cfd — the pages listed below, on /var/www/html. * DOES NOT REACH: dashboard.argus.cfd — NEITHER the app NOR the login page. * * That is a different nginx root (/var/www/dashboard) with its own * css/tokens.css and its own vocabulary. Three definitions of one design system * exist on this box: this file, the `--h-*` block inline in the index.html * beside it, and the dashboard's. None can reach another — a root-relative * /css/tokens.css resolves to a different file depending on the host. * * THE RULE, AND IT HAS ALREADY COST A DAY: a typography or palette change here * does NOT propagate to the dashboard. Sprint landing-unify (2026-08-27) removed * the serif and the italic from this docroot and stopped there; the dashboard * and the login page kept Playfair Display and italic until dashboard-typo * closed the gap by hand the following day. If a change should apply to both, * it is TWO edits, and the second is in /var/www/dashboard/css/. * * Token NAMES differ across the three for identical values — --fs-display vs * the dashboard's --t-display, --radius-control vs --r-md, --green-dark vs * --c-accent. Borrowing a name across surfaces renders off a fallback or off * inheritance and looks correct, so it is not caught by looking at the page. * Grep the name before using it. * * Filed HIGH in argus-brain/backlog.md with the two candidate fix shapes (one * served token file, or a build step). Deliberately not fixed inside a * typography sprint: it is a serving change with its own blast radius. * * Linked by ALL NINE pages that survive the redesign: * Group A pricing · how-it-works · terms · privacy · disclaimer * Group B faq/ · about/ · blog/fact-checking-argus · blog/pentagon-pizza-indicator * * index.html joins in 2c and samples.html in 2d (sprint landing-hero). When * this file was written both were out of scope; the mockup had not arrived. * * ── PALETTE PROVENANCE — why these values and not the dashboard's ────────── * The dashboard now runs #EEEFEA / #FAFAF9 / #6B6B66. Three of those were NOT * adopted here, deliberately. * * #EEEFEA came from a mockup that was never placed on this box. It is the * value at the centre of the 2026-08-03 ERRATUM: the previous sprint was given * a transcribed :root and moved the dashboard onto it, believing it was * converging with the landing. It was not — the landing serves #F5F4F2. * * So #EEEFEA has NO BETTER PROVENANCE than #F5F4F2, which is what these nine * pages actually serve today. Repainting nine out-of-scope pages on the * authority of a file nobody can open would repeat the original error one * layer down. The WCAG work layered on top of that background is portable and * is adopted below; the background it was measured against is not evidence. * * Rule applied throughout this sprint: defects that survive any design * direction get fixed now; alignment to a moving target waits. * * ── HISTORICAL (landing-consolidate): THE --muted FIX ───────────────────── * Measured on #F5F4F2, which is what these pages served AT THE TIME. The * surface moved to #EEEFEA in 2a; the current figures are beside each token * in the :root block below. These are kept as the record of why --muted moved: * * #8A8A84 3.16 FAILS WCAG AA (4.5) <- Group A, 5 pages, until today * #888 3.22 FAILS WCAG AA <- Group B, 4 pages, until today * #6B6B66 4.87 passes <- adopted * * TWO SEPARATE LITERALS, NINE PAGES. Recorded separately on purpose: someone * grepping for #8A8A84 alone would find Group A clean and conclude the job was * done, while four Group B pages still shipped #888. Both are gone. * * #6B6B66 clears AA on #F5F4F2 at 4.87 — better than the 4.64 it was approved * at on the dashboard's lighter #EEEFEA. * * ── index.html — SUPERSEDED, see 2c ─────────────────────────────────────── * This section recorded index.html's --muted #9C9788 as an open defect at * "2.66", and stated the mockup was not on the box. BOTH ARE NOW OUT OF DATE: * - the figure was wrong: 2.66 is #9C9788 on #F5F4F2, the background the * OTHER pages used. On index.html's own #FCFBF7 it measured 2.82. * - the mockup arrived 2026-08-03 (19,915 B, md5 46e28e27…). * index.html adopts this file in 2c, which retires #9C9788 entirely. * ========================================================================= */ /* ── SURFACES ADOPTED FROM THE MOCKUP — 2026-08-03, sprint landing-hero 2a ── * --off-white moves #F5F4F2 -> #EEEFEA and --panel #FAFAF9 is added. This is * the ONLY colour that changes; the ink family below is untouched. * * The PALETTE PROVENANCE note above refused #EEEFEA because the mockup could * not be read. That refusal was correct on the evidence available. The mockup * is now on the box (19,915 B, md5 46e28e27…), it has been read, and the * refusal is revisited on new evidence rather than left standing out of * consistency. What the note got right is unchanged: a value from an unreadable * file is not adoptable. It became adoptable when the file arrived. * * Consequence, and it is the point: the landing and the dashboard are now * COLOUR-IDENTICAL on every token. They already shared five of six. * * ── NEUTRAL TEMPERATURE — the axis that has now decided TWICE ────────────── * The mockup also offers a cool ink family, and it is refused. Recorded here * because this is the second call this axis has settled and the next person * should find the reasoning rather than re-derive it. The first is in * /var/www/dashboard/css/tokens.css, section "NEUTRAL TEMPERATURE — the * conflict, and why warm won". * * role mockup (cool) adopted (warm) b* cool -> warm * ink #16181d #1A1A18 -3.8 -> +1.4 * secondary #545964 #4A4A46 -7.0 -> +2.4 * hairline #dcdfe4 #E2E0DC -2.8 -> +2.2 * * The accent both systems share, #2D5A3D, is b* +12.1 — strongly warm. Cool * neutrals put every glyph in temperature opposition to the accent beside them. * That is tolerable on a hero at 49.6px and wrong in 11px labels and body copy, * which is what these nine pages are made of. * * The surfaces are a separate question from the inks and were decided * separately: #EEEFEA is b* +2.3, WARMER than the #F5F4F2 it replaces (+1.1), * so adopting it moves toward the warm family rather than against it. * * ── ONE SECONDARY INK OR TWO — structural, not chromatic ─────────────────── * The mockup has ONE (--color-sub #545964) covering both body text and 11px * labels. This system keeps TWO, and they are dE 13.75 apart. Collapsing them * would lighten body copy by dE 11.45 AND darken labels by dE 12.33 — a change * to what the page distinguishes, not to how it looks. Two is kept: it is what * the dashboard uses, and a label that reads the same weight as body text * stops being a label. */ :root { --green-dark: #2D5A3D; /* brand accent, byte-identical across all surfaces */ /* ── --green-hover — sprint landing-ctagreen, 2026-08-28 ───────────────── The pressed state of --green-dark. The VALUE #234A30 was already live in three places (site.css .cta:hover as a literal, index.html's --h-color-accent-hover, and .btn-cta:hover through it) but had no name in THIS sheet, so the eleven pages that load site.css could not reach it. Named --green-hover, not --color-accent-hover: this sheet's colours are --green-dark / --off-white / --charcoal, and a token that does not match its neighbours is the trap --serif was — a name nobody can predict is a name nobody reuses. Contrast, measured: #FFFFFF on --green-dark is 7.95:1 and on --green-hover 10.03:1. Both clear AA (4.5:1) for the 13-14px control text these fill, and both clear AAA (7:1). */ --green-hover: #234A30; --off-white: #EEEFEA; /* page background — CHANGED 2a, was #F5F4F2 */ --panel: #FAFAF9; /* raised surface — NEW 2a */ --charcoal: #1A1A18; /* primary ink 15.08 on page · 16.69 on panel */ --slate: #4A4A46; /* secondary ink 7.70 · 8.52 */ --muted: #6B6B66; /* labels / meta 4.64 · 5.13 — still AA */ --border: #E2E0DC; /* hairlines */ /* ── --serif IS GONE — sprint landing-unify, 2026-08-28 ────────────────── Playfair Display is removed from the landing entirely: no serif, no italic, anywhere. Operator decision, deliberate. The site reads as a product site, not a publication. The token is DELETED rather than left defined-and-unused, on purpose. Left in place it is a loaded gun: any future rule saying font-family: var(--serif) would silently resolve to Georgia — a DIFFERENT serif nobody chose — and would look like an intentional design choice rather than a mistake. Undefined, the same rule falls back to the inherited sans and is visible as a no-op in review. samples.html is OUT OF SCOPE this sprint (separate operator decision) and is UNTOUCHED — including by this deletion. It links this sheet, so removing --serif looked like it would drop samples.html's headings to the Georgia fallback. It does not: samples.html references var(--serif) ZERO times. It declares 'Playfair Display' literally, from its own Google Fonts , alongside DM Sans and DM Mono. It is entirely self-contained on type and takes only the six palette values from here. So samples.html is the one page still on Google Fonts and still on a serif, and it is now also the only page on DM Sans rather than Inter. That is the shape of the work left when it comes into scope; nothing here blocks it. What replaced Playfair, slot by slot, is recorded in the ramp below and in index.html's own comments at each site. */ --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; /* ── TYPE RAMP — one ramp, ten pages — sprint landing-unify ───────────── Sizes are the operator's 34/26/20 step; weights are deliberately the LIGHT end. THE RULE THAT PRODUCED THESE NUMBERS: swapping Playfair-italic-700 for Inter at the same pixel size makes text HEAVIER and wider on the page, not lighter. So every slot that lost the serif gives size back rather than taking weight — otherwise "remove the serif" ships as "shout louder". --fs-hero 49.6px / 700 the ONLY 700 on the site --fs-display 34px / 600 section titles, closing line, page h1 --fs-heading 26px / 600 sub-section headings (legal/info h2) --fs-title 20px / 600 card and list titles --fs-body 16px / 400 --fs-small 15px / 400 dense body (legal pages, card copy) --fs-label 11px / 500 mono, uppercase, 0.16em — every label 700 is reserved for --fs-hero and appears exactly ONCE in the document. Everything else tops out at 600. ── --fs-display WAS 34px AND THAT WAS TOO SMALL — corrected 2026-08-28 ── 34 was never measured. It came from a proposal, was adopted, and shipped. The measurement, taken afterwards against the pre-sprint page: section title, 1440px Playfair 700 56px -> Inter 600 34px -39% ratio to the 16px body 3.50 -> 2.13 -39% A -39% cut is far more than the weight difference between Playfair 700 and Inter 600 covers: Inter is heavier per pixel, but cap height still fell to ~63% of the original. The heading stopped reading as a section opener and started reading as a paragraph lead. The serif was NOT the cause and bringing it back would not have been the fix. 40px restores the ratio to 2.50 against a 16px body. Chosen by measuring line counts, not by picking a number off a ramp: viewport 34px 40px column 1440 max 3 lines max 3 lines 720px <- no worse 768 max 3 lines max 3 lines 710px <- no worse 375 max 6 lines (floor, 32) 317px <- no worse Four headings go 2 -> 3 lines at 1440. Three lines was ALREADY the maximum at 34px, so nothing gets worse; the longest heading is unchanged. THE FLOOR IS 34, NOT 32 OR 28, AND THE FLOOR IS THE PART THAT MATTERS. A clamp resolves to its floor on every viewport below ~1000px, so the floor — not the cap — is what most non-desktop visitors actually see. The floor was set to 32 first, on the arithmetic that 32/16 = 2.00 exactly. Verification then showed ten page/viewport combinations at 1.78, because on the legal and info pages the heading is not judged against 16px body — it sits directly above `p.lede` at 17px, and THAT is the comparison a reader actually makes. Sizing the floor against the wrong denominator produced a number that satisfied the rule and missed the page. 34 is the floor that holds against the real neighbour on every page: index 34 / 16 body = 2.13 legal + info 34 / 17 lede = 2.00 and at 375px it wraps identically to the 34px it replaces (6 lines, 317px column), so it costs nothing. Landing on 2.00 exactly on five pages is the bar, not comfort: if those pages gain a larger lede later, this floor moves with it. If a level still reads indistinct, raise THAT level rather than the ramp. */ --fs-hero: 49.6px; --fs-display: clamp(34px, 3.4vw, 40px); --fs-heading: clamp(22px, 2.4vw, 26px); --fs-title: 20px; --fs-body: 16px; --fs-small: 15px; --fs-label: 11px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-hero: 700; /* --fs-hero ONLY */ --ls-display: -0.03em; --ls-title: -0.01em; --ls-label: 0.16em; --lh-display: 1.1; --lh-body: 1.6; /* ── SURFACE / BORDER / RHYTHM — the hero's system, applied everywhere ─── One background pair, one border, one radius pair, one 8px spacing scale. Retired: --warm-white #FFFFFF (13 uses), --band #F4F1E8 (1), --green-pale #E9F0E6 (1), --h-radius-card (0 uses, dead on arrival). Cards were pure white on a #EEEFEA page while the hero frame was #FAFAF9. That inverted the raised/recessed relationship the moment the frame was extended to the whole document, so cards now sit on --panel like the frame. Borders were 1px solid x12, 1px dashed x9, 0.5px solid x7 — the 0.5px was already a fiction, rendering as 1px on any non-Retina display. */ --radius-control: 4px; --radius-card: 8px; --hairline: 1px solid var(--border); --gutter: 48px; --space-section: 96px; /* 12 x 8px. Was 110/100/140/90px on index. */ }