From a8471f19705cc320f62b3504cadf8d1cabf083af Mon Sep 17 00:00:00 2001 From: Alexander Saeri Date: Tue, 18 Aug 2026 21:46:29 +1000 Subject: [PATCH 01/15] Name the design in one place: a token block Colour, type, spacing, radius and shadow were spread across 1,600 lines of style block and two :root declarations. This gathers them into the first :root as named tokens, keeping every existing name live so nothing has to be rewritten to keep working. The tier ramp (--lvl-*) and the green share ramp (--d*) stay where they are declared further down rather than being copied. One value changes: --muted goes #898A8D -> #6E6E6B, which takes small grey text from 3.3:1 to 5.1:1 on white and over the AA line. Everything else is pixel-identical. Co-Authored-By: Claude Fable 5 --- index.html | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 6968b91..6e669bf 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,35 @@ .lock-btn:hover{filter:brightness(1.06);} .lock-btn:disabled{opacity:0.6;cursor:default;} .lock-err{min-height:16px;margin-top:12px;font-size:12.5px;color:var(--red,#A32035);} -:root{--red:#A32035;--red-dark:#5E0E20;--red-pale:#E8C4CB;--amber:#E8A317;--amber-deep:#B97D08;--green:#2E8B57;--ink:#1A1A1A;--muted:#898A8D;--line:#E8E8E6;--bg:#FAFAFA;--card:#FFFFFF;--empty:#ECECEA;} +/* One place where colour, type, spacing and shadow are named. The tier ramp + (--lvl-*) and the green share ramp (--d*) are declared with the risk-view rules + further down, in the same authority rather than a second copy of it. */ +:root{ + /* text: one ramp. --faint is decorative, and only at 14px and up. */ + --ink:#1A1A1A;--body:#3A3A38;--muted:#6E6E6B;--faint:#9A9A95; + /* chrome */ + --line:#E8E8E6;--rule:#C9C9C4;--bg:#FAFAFA;--card:#FFFFFF;--empty:#ECECEA; + /* brand and interaction. Never a data fill. */ + --red:#A32035;--red-dark:#5E0E20;--red-pale:#E8C4CB;--red-tint:#FAF3F4; + /* structure: the pale-blue axis band, wherever something labels an axis or a group */ + --axis:#DCE9F4;--axis-line:#B4CFE4;--axis-ink:#3F5F79; + /* semantics: green only ever means found/yes, amber only ever means gap/caveat */ + --green:#2E8B57;--yes:var(--green);--yes-tint:#E4F2E4; + --amber:#E8A317;--amber-deep:#B97D08;--gap:var(--amber);--gap-deep:#8A5A18;--gap-tint:#FCF3E3; + /* the mitigation domain palette, read by the chart's inline fills */ + --mit-any:#C77CA6;--mit-1:#3E9C72;--mit-1c:#84C1A2;--mit-2:#6B4C93;--mit-2c:#9C88C4; + --mit-3:#E0A22B;--mit-3c:#EFC98D; + /* the type scale every size snaps to */ + --fs-tick:9.5px;--fs-eyebrow:10.5px;--fs-cap:11px;--fs-sec:12px;--fs-ui:13px; + --fs-body:14px;--fs-lead:15.5px;--fs-h2:18px;--fs-h1:22px; + /* rhythm */ + --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px; + --r-cell:3px;--r-ctl:6px;--r-modal:10px;--r-pill:999px; + --shadow-hover:0 2px 10px rgba(26,26,26,.06); + --shadow-pop:0 10px 30px rgba(26,26,26,.14); + --shadow-modal:0 20px 60px rgba(0,0,0,.25); + --measure:78ch;--measure-wide:820px; +} *{box-sizing:border-box;margin:0;padding:0;} body{font-family:'Figtree',sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.4;-webkit-font-smoothing:antialiased;} .page{max-width:2100px;margin:0 auto;padding:18px 28px 0;} From e3f9989e1f22bcf59b2238299886694d7dca3e63 Mon Sep 17 00:00:00 2001 From: Alexander Saeri Date: Tue, 18 Aug 2026 22:05:48 +1000 Subject: [PATCH 02/15] Unify the patterns the site already had (C2-C12) The style block had grown three severity ramps, five near-ink greys, fifteen small-uppercase-label recipes, twenty-six font sizes, fifteen radii, four tooltips, eleven legends and four ways of drawing "no data". Each of those is now one pattern, chosen from the site's own dominant convention rather than invented: - one tier ramp. --lvl-* takes the values the matrix JS (VTIERS) already draws, so the flagship view does not move a pixel, and the hand-mixed ramps in the significance panel and the sector bands come onto it. Brand red stops being a data fill. - one text ramp: #333/#444/#4A4A47/#55524C/#5A5A5A all read --body. - one eyebrow: 10.5px/700/.05em uppercase in --muted, for the twenty-one labels that were doing that job in nine different ways. - one type scale (9.5/10.5/11/12/13/14/15.5/18/22), one page-question size, one section-heading size; one radius vocabulary (--r-cell/-ctl/-modal/-pill). - one selected idiom (ink, not red), one tooltip skin, one legend skin with one swatch size, one scrim darkness, one close button, one empty state. - one prose measure and one wide measure; tabular numerals on numeric cells. The measure token holds 760px, not the spec's 78ch: 78ch measures 702px at 14px and 624px at 13px, so as a ch value the measure would change with the font size and rewrap every paragraph. 760px is the site's own dominant cap. Co-Authored-By: Claude Fable 5 --- index.html | 762 ++++++++++++++++++++++++++--------------------------- 1 file changed, 381 insertions(+), 381 deletions(-) diff --git a/index.html b/index.html index 6e669bf..8acaaed 100644 --- a/index.html +++ b/index.html @@ -9,15 +9,15 @@