feat(brief): swap sienna rust for two-strength WM mint (Option B palette) (#3178)

* feat(brief): swap sienna rust for two-strength WM mint (Option B palette)

The only off-brand color in the product was the brief's sienna rust
(#8b3a1f) accent. Every other surface — /pro landing, dashboard,
dashboard panels — uses the WM mint green (#4ade80). Swapping the
brief's accent to the brand mint makes the magazine read as a sibling
of /pro rather than a separate editorial product, while keeping the
magazine-grade serif typography and even/odd page inversion intact.

Implementation (user picked Option B from brief-palette-playground.html):
  --sienna  : #8b3a1f -> #3ab567   muted mint for LIGHT pages (readable
                                   on #fafafa without the bright-mint
                                   glare of a pure-brand swap)
  --mint    :         + #4ade80   bright WM mint for DARK pages
                                   (matches /pro exactly)
  --cream   : #f1e9d8 -> #fafafa   unified with --paper; one crisp white
  --cream-ink: #1a1612 -> #0a0a0a  crisper contrast on the new paper

Accent placement (unchanged structurally — only colors swapped):
  - Digest running heads, labels, blockquote rule, stats dividers,
    end-marker rule, signal/thread tags: all muted mint on light
  - Story source line: newly mint (was unstyled bone/ink at 0.6 opacity);
    two-strength — muted on light stories, bright on dark
  - Logo ekg dot: mint on every page so the brand 'signal' pulse
    threads through the whole magazine

No layout changes. No HTML structure changes. Only color constants +
a ~20-line CSS addition for story-source + ekg-dot accents.

165/165 brief tests pass (renderer contract unchanged — envelope shape
identical, only computed styles differ). Both tsconfigs typecheck clean.

* fix(brief): darken light-page mint to pass WCAG AA + fix digest ekg-dot

Two P2 findings on PR #3178 review.

1. Digest ekg-dot used bright #4ade80 on a #fafafa background,
   contradicting the code comment that said 'light pages use the
   muted mint'. The rule was grouped with .cover and .story.dark
   (both ink backgrounds) when it should have been grouped with
   .story.light (paper background). Regrouped.

2. #3ab567 on #fafafa tests at ~2.31:1 — fails WCAG AA 4.5:1 for
   every text size and fails the 3:1 large-text floor. The PR called
   this a rollback trigger; contrast math says it would fail every
   meaningful text usage (mono running heads, source lines, labels,
   footer captions). Swapped --sienna from #3ab567 to #1f7a3f —
   tested at ~4.90:1 on #fafafa, passes AA for normal text.

   Kept the variable name '--sienna' for backwards compat (every
   .digest rule references it). The hue stays recognisably mint-
   family (green dominant) so the brand relationship with #4ade80
   on dark pages is still clear to a reader. Dark-page mint is
   unchanged — #4ade80 on #0a0a0a is ~11.4:1, passes AAA.

Playground (brief-palette-playground.html) updated to match so
future iterations work against the accessible value.

165/165 brief tests pass. Both tsconfigs typecheck clean.
This commit is contained in:
Elie Habib
2026-04-18 20:50:16 +04:00
committed by GitHub
parent 048e5486ac
commit 6f6102e5a7
2 changed files with 614 additions and 4 deletions

View File

@@ -514,11 +514,26 @@ function renderBackCover({ tz, pageIndex, totalPages }) {
const STYLE_BLOCK = `<style>
:root {
/* WorldMonitor brand palette — aligned with /pro landing + dashboard.
Previous sienna rust (#8b3a1f) was the only off-brand color in the
product; swapped to WM mint at two strengths so the accent harmonises
on both light and dark pages. Paper unified to a single crisp white
(#fafafa) rather than warm cream so the brief reads as a sibling of
/pro rather than a separate editorial product. */
--ink: #0a0a0a;
--bone: #f2ede4;
--cream: #f1e9d8;
--cream-ink: #1a1612;
--sienna: #8b3a1f;
--cream: #fafafa; /* was #f1e9d8 — unified with --paper */
--cream-ink: #0a0a0a; /* was #1a1612 — crisper contrast on white */
/* --sienna is kept as the variable name for backwards compat (every
.digest rule below references it) but the VALUE is now a dark
mint sized for WCAG AA 4.5:1 on #fafafa. The earlier #3ab567 hit
only ~2.3:1, which failed accessibility for the mono running
heads + source lines even at their 13-18 px sizes. #1f7a3f lands
at ~4.90:1 — passes AA for normal text, still reads as mint-
family (green hue dominant), and sits close enough to the brand
#4ade80 that a reader recognises the relationship. */
--sienna: #1f7a3f; /* dark mint for light-page accents — WCAG AA on #fafafa */
--mint: #4ade80; /* bright WM brand mint for dark-page accents (AAA on #0a0a0a) */
--paper: #fafafa;
--paper-ink: #0a0a0a;
}
@@ -689,11 +704,27 @@ const STYLE_BLOCK = `<style>
max-width: 40ch; margin-bottom: 4vh; opacity: 0.88;
}
.story.dark .desc { opacity: 0.85; }
/* Source line — the one editorial accent on story pages. Sits at
two-strength mint to match the brand (Option B): muted on light,
bright on dark. Opacity removed so mint reads as a deliberate
accent, not a muted bone/ink. */
.story .source {
font-family: 'IBM Plex Mono', monospace;
font-size: max(11px, 0.9vw); letter-spacing: 0.2em;
text-transform: uppercase; opacity: 0.6;
text-transform: uppercase;
}
.story.light .source { color: var(--sienna); }
.story.dark .source { color: var(--mint); }
/* Logo ekg dot: mint on every page so the brand "signal" pulse
shows across the whole magazine. Light pages use the muted mint
so it doesn't glare against #fafafa. */
/* Bright mint on DARK backgrounds only (ink cover + dark stories).
Digest pages are light (#fafafa) so they need the dark-mint
variant — bright mint would read as a neon dot on white. */
.cover .wm-logo .wm-ekg-dot,
.story.dark .wm-logo .wm-ekg-dot { fill: var(--mint); }
.digest .wm-logo .wm-ekg-dot,
.story.light .wm-logo .wm-ekg-dot { fill: var(--sienna); }
.story .right { display: flex; flex-direction: column; justify-content: center; }
.story .callout {
background: rgba(0, 0, 0, 0.05);