claudetools/projects/acg-website-showcase/multipage/design/review-gemini-verdigris.md

[VERDICT] Verdigris Gate is structurally safe, cleanly scoped, and transitions reliably. However, it requires a minor contrast fix and a critical font-weight correction to prevent text degradation.

1. WCAG AA Contrast

• [ERROR] Light Primary Button: --on-accent (#F0F7F5) on --accent (#2F7A6B) yields ~4.4:1 contrast. At 1.05rem (16.8px) 600-weight, this fails the 4.5:1 requirement for normal-sized text. Fix: Lighten --on-accent to #FFFFFF (yields 4.9:1) or darken --accent to #2B7364.
• [OK] Light Mode Base: Body text (10.9:1), muted text (6.4:1), and accent-ink (#1F5F52, 5.6:1) on #E9EDEA all comfortably pass.
• [OK] Dark Mode Base: Body text, muted text (7.6:1), accent-ink (#6BC4B0, 8.5:1), and primary button (#0D1614 on #4DA896, 6.5:1) on #141A18 all pass.

2. Typography & Faux-Bold Risk

• [ERROR] Missing Font Weights: Fraunces and IBM Plex Mono are loaded at 400;500 but are heavily applied at 600 and 700 across headings, buttons, and pricing tiers. This will force destructive, browser-synthesized faux-bolding. Fix: Append 600;700 to both Fraunces and IBM Plex Mono in the <link> Google Fonts payload.

3. app.js Logic & Skin Swapping

• [OK] 3-Way Cycle: Modulo logic ((cur + 1) % SKINS.length) safely iterates ledger -> midnight -> verdigris and gracefully fails to index 0 (ledger) on null or corrupt local storage states.
• [OK] Image Swapping: swapSkinImages uses getAttribute("src") to correctly capture the un-resolved relative string, strictly matching VERDIGRIS_IMG keys. Reversal logic using data-orig-src is sound.
• [WARN] Double-Download (LCP impact): Because image src is hardcoded in HTML, direct loads into the Verdigris skin will fetch the orig image first, then immediately request the Verdigris variant.

4. Specificity & Token Leaks

• [OK] Token Scoping: No token leakage. html[data-skin="verdigris"] (0,1,1) securely overrides :root (0,1,0) and detaches entirely when the attribute changes.
• [OK] Signature Elements: Override rules like html[data-skin="verdigris"] .site-header (0,2,1) successfully trump base class styles .site-header (0,1,0) without relying on !important.

5. Accessibility Regressions

• [OK] Focus Navigation: Verdigris --accent maintains strong visibility as an outline color (4.47:1 against paper), preserving keyboard interaction cues.
• [INFO] Stale Static Tooltip: The static HTML title and aria-label for #skinToggle only declare "Paper / Midnight". Fix: Update the initial static HTML to "Paper / Midnight / Verdigris" so pre-JS screen readers announce it accurately.