/* PropertyFacts — design tokens for design #2 "The Signal" (Mike's pick, 31 Aug 2026; mockups at the design-directions artifact). Every colour, face and measure lives here and ONLY here; site.css consumes them. A literal colour anywhere else is a defect. Register: modern data desk. Navy bar, white page, one signal cyan, heavy sans headlines, monospace datestamps. Calm, evidence-first. */ :root { --paper: #ffffff; /* page ground */ --panel: #f5f8fb; /* rails, note panels */ --ink: #101f2e; /* headlines, navy bar ground */ --body: #3d4f61; /* running text */ /* --soft was #7d8fa1 until 1 Sep 2026: 3.33:1 on paper, 3.12:1 on panel — below the 4.5:1 WCAG AA floor for normal text, on every byline, caption, datastamp and calculator note on the site. Gentry shipped the identical defect (--c-stone at 2.79:1) and caught it the same way: arithmetic, not eyeballs. tools/contrast.ps1 now fails the build on it. */ --soft: #5f7182; /* secondary text, stamps — 5.03:1 paper, 4.72:1 panel */ --line: #e5ebf1; /* hairlines (non-text: 3:1 rule does not apply to hairlines) */ --cyan: #35b6d9; /* signal — on DARK grounds only (7.03:1 on ink) */ --link: #0c7396; /* signal on light grounds — 5.37:1 paper, 5.04:1 panel */ --bar-text: #9fb4c8; /* muted text on the navy bar */ --note-br: #cfe0ea; /* disclaimer/note panel border */ --warn-bg: #fdf6e7; /* refusal/incomplete notices */ --warn-br: #e3cf9a; /* ---- data-visualisation palette ------------------------------------- Added 1 Sep 2026. The figures had drifted into a palette of their own - a #1a7f4e green, a #9fc9dc pale blue, an #eaf5ef tint and a stale #0e7fa3 link colour, none of which appear anywhere in this file. Charts read as a different publication from the page they sat on. Michael called it: figures are brand, and brand has to be written down and enforced. Rules, enforced by tools/check-brand.ps1: * A figure may use ONLY these values and the core tokens above. * Series colours are ORDERED. One series uses --viz-1; two use --viz-1 and --viz-2; do not skip ahead for variety. * Positive/negative is teal against brick, never green against red - green/red is the one pairing that disappears for the ~8% of men with red-green colour blindness, and teal is the brand signal anyway. * Tints are grounds for text, never a series colour. Every tint here clears 14:1 with --ink on top of it. Contrast against --paper / --panel is in the comment on each line; all clear 4.5:1, so any of them may carry text. */ /* CATEGORICAL — for unordered series. Ordered: use the sequential ramp below instead, which is what a magnitude actually deserves. --viz-3 was #8f610f, a brass carried over from the Gentry palette. Michael, 1 Sep 2026: "I am hating the brown on blue." He is right and it was never PropertyFacts' colour - it belonged to a different brand and arrived here by inheritance rather than by choice. Replaced with an indigo, which separates from the teal by HUE rather than by lightness and stays inside the blue world the masthead is built on. One honest limit: --viz-2 (brick, 9.28) and --viz-3 (indigo, 8.10) sit close in LUMINANCE, so they separate on screen by hue but converge in greyscale. If a chart is ever built for print, separate those two by pattern, not colour. */ --viz-1: #0c7396; /* series 1, and POSITIVE/income — 5.37 / 5.04 */ --viz-2: #8a1c1c; /* series 2, and NEGATIVE/cost — 9.28 / 8.70 */ --viz-3: #3b4a94; /* series 3, accumulations, pools — 8.10 / 7.60 */ --viz-4: #5f7182; /* series 4, reference/neutral — 5.03 / 4.72 */ --viz-5: #101f2e; /* series 5, emphasis — 16.7 / 15.67 */ --viz-1-bg: #e7f2f7; /* tint of series 1 — ground only */ --viz-2-bg: #fbeceb; /* tint of series 2 — ground only */ --viz-3-bg: #ebedf7; /* tint of series 3 — ground only */ /* SEQUENTIAL — one ordered quantity: a choropleth, a heat scale, a ranked bar chart. Never use categorical colours for ordered data; the reader reads rank off the ramp without a legend. TEXT RULE, measured: --ink on steps 1-4, --paper on steps 5-6. */ --seq-1: #e3eef5; /* ink 14.17 */ --seq-2: #c3dbe8; /* ink 11.63 */ --seq-3: #8fbcd2; /* ink 8.18 */ --seq-4: #4b93b4; /* ink 4.88 — last step that carries dark text */ --seq-5: #0c7396; /* paper 5.37 */ --seq-6: #08556f; /* paper 8.27 */ --sans: "Libre Franklin", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; --mono: "Spline Sans Mono", ui-monospace, "Cascadia Code", Consolas, monospace; /* Readable line length. 42rem measured at ~77 real characters on 1 Sep 2026 - inside Butterick's 45-90 but past BBC GEL's 60-70 optimal. 37rem lands at ~68. NOTE the ch trap: `ch` is the width of "0", so 65ch would be ~88 real characters, not 65. Measure real characters; set the token in rem. */ --measure: 37rem; /* ~68 characters — the reading column */ --popout: 52rem; /* breakout track: figures and tables that earn width */ --wrap: 74rem; /* page grid width */ /* --popout added 2 Sep 2026. Michael: "we look to have gone back to fixed width margins — on Gentry Finance we agreed to have some variability in the width to improve readability." He is right, and it was a straight omission rather than a decision. The Gentry build settled this on 25-26 Aug 2026 after he described a fixed narrow column inside a wide wrap as reading "like an outdated 1990s website": text holds a readable measure, and the visual furniture - figures, tables, pull-quotes - uses the page. Gentry implements it as a named-line grid with content (640px) / popout (860px) / full tracks. PropertyFacts had `main > * { max-width: var(--measure) }`, which capped EVERYTHING at the reading measure including a 860x800 chart. Same mechanism ported, same ratio (~1.4x the measure). Widen something by putting it on a track, never with a width or margin override - one breakout system, which is the rule that stopped Gentry growing two. */ }