Skip to content

v4.32 — Marketing Landing Rebuild

Two design canvases with zero class names became a shared header, nav, and motion system across index.html and meet-coach.html — with zero class renames and a new CI gate against the defect class that snuck onto master the same week planning started.

Summary

A member handed the crew two Claude-generated design canvases — Objectuve Landing.dc.html and Objectuve Meet Coach.dc.html — 500 and 215 inline style= attributes between them, and not a single class=. Codi correctly bounced the handoff: there was no mechanical path from an inline-styled comp onto landing-2026.css, a 72KB class-based stylesheet that, contrary to the source issue's own claim, serves ten pages, not two, and carries a 29-entry exact-selector contrast allowlist that a careless class rename would silently disarm. The same week, six live defects that came bundled with the design work — unstyled pricing/quote classes and an undefined sprite reference — shipped independently as OBJ-2227, and were the tell that this surface had no gate against referenced-but-undefined tokens at all.

v4.32 built the mechanical path deliberately: a Desi UI-SPEC before every design-bearing phase, one shared header/nav/motion system serving both pages (Phase 1), the landing page delta (Phase 2), the Meet Coach delta (Phase 3), and a gate-reconciliation and docs pass (Phase 4). It shipped with zero class renames across the whole milestone and a brand-new CI guard that fails on exactly the kind of referenced-but-undefined class or sprite id that produced this milestone's own precondition.

The most consistent finding across the milestone was that the canvases overstated the delta. Phase 2 diffed every text node in the landing canvas against index.html and found seven of nine sections already copy-identical, string for string; Phase 3 found 126 of 129 Meet Coach nodes copy-identical. In both cases the real work was defects and behavior the canvas never drew — a mobile-menu CTA at 2.88:1 contrast invisible to the guard's scan viewport, a sticky header's dark-band nav links at 4.01:1 invisible outside scrollY 0, and a beam-draw diagram on the Meet Coach page that connected to neither its input column nor its output card at 1280px, a defect no amount of reading the markup or CSS would have surfaced — it took measuring rendered boxes.

Goal

Land the completed marketing design pass on index.html and meet-coach.html — one shared header, nav, motion and responsive system across both pages — without regressing the eight other pages that quietly share the same stylesheet, and without letting a class rename silently disarm the WCAG AA gate that guards them.

Scope — What Shipped

  • Shared header, nav, and motion system (Phase 1) — one header markup block, one nav, one CSS block, and one JS motion module serving both index.html and meet-coach.html. The nav is Features / Meet Coach / Rewards / Teams / Pricing on both pages; Meet Coach's own nav item stays self-pointing rather than repointing to the on-page teaser, a deliberate overrule of the canvas.
  • The first prefers-reduced-motion contract this site has ever had — one file-wide guard in main.js covering all 16 catalogued effects (entrance stagger, reveal-on-scroll, drifting halos, count-up stats, animated FAQ, header condense, beam-draw, and nine more found unguarded, including effects that shipped before this milestone touched them), not just the seven originally scoped.
  • Landing page delta (Phase 2) — the new coach-teaser band (an id attribute added to an existing section, not a new section), four rarity-tier ring glyphs plus the closing-CTA ring, and three live defects fixed along the way: the mobile-menu CTA contrast failure, the sticky-header dark-band nav-link contrast failure, and .mc-mono's missing dark-band override (a fix that also covers Phase 3's page).
  • Meet Coach delta (Phase 3) — the beam-draw choreography re-boxed onto the diagram's real gutter (--mc-board-gap / --mc-output-inset) after measurement showed the SVG connected to neither end of the diagram it was meant to animate; .cta-orb-coach, which had never had a CSS rule and was silently inheriting a blue gradient on a purple page, converted to .cta-mark; four Moments timestamps updated to match the canvas.
  • Gate reconciliation and docs (Phase 4) — the three synthetic-italic <em> emphasis rules ruled to colour-fill rather than the wordmark's drawn-oblique treatment; the 29-entry RAMP_GAP_TARGETS contrast allowlist retired outright (all 29 entries were suppressing nothing by the time the class taxonomy settled); a new scripts/check-marketing-referenced-undefined.mjs CI guard, wired into marketing-contrast-guard.yml, that fails on any marketing class or sprite id referenced in markup with no matching definition anywhere — the mechanical backstop for the defect class OBJ-2227 shipped ahead of this milestone.
  • Docs corrected: docs/marketing/index.md now states the real 10-page/1-page stylesheet split (landing-2026.css serves index, meet-coach, contact, 404, and all six policies/*; styles.css serves about.html only), and docs/ui-specs/index.md indexes the new spec.

Phases

PhaseNameStatusPlansHighlights
1Shared header, nav & motion systemShipped2One header/nav/motion module for both pages; reduced-motion coverage went 7 effects → 16; two pre-existing WCAG AA failures found and fixed
2Landing page rebuildShipped3Seven of nine canvas sections already copy-identical to master; .mc-mono dark-band fix; rarity-tier ring glyphs built
3Meet Coach rebuildShipped2Beam-draw SVG connected to neither diagram end — found by measuring, not reading; .cta-orb-coach colour defect fixed
4Emphasis oblique, gate reconciliation & docsShipped4 (split 8a/8b)Em emphasis ruled to colour-fill; 29-entry allowlist retired outright; new referenced-but-undefined CI guard shipped

Key Decisions

  • Every design-bearing phase opens with a Desi UI-SPEC before Codi starts. The canvases carry zero class names, so deciding node-by-node which inline declaration becomes which class or token is itself the design contract — Codi correctly refused to self-spec this on the initial handoff, and the pattern held for all three code-bearing phases.
  • "Light and dark" means stylesheet band, not OS theme. marketing_landing/ is single-theme — zero prefers-color-scheme in its CSS — so the evidence pairing this milestone required was light-section vs. .site-section.dark-section, not an OS dark-mode capture. Reading it as OS theme cost Phase 1 a bounce round-trip before the correction was written down for Phases 2 and 3.
  • The contrast allowlist was retired, not reconciled. Phase 4's own acceptance criterion assumed 29 entries needing stale-entry pruning; by dispatch time all 29 were suppressing nothing, so Tess deleted the mechanism outright — a stronger outcome than the criterion asked for, since there is now no allowlist for a future violation to be quietly absorbed into.
  • The em ruling went to colour fill, not drawn oblique. Desi ruled that heading emphasis wants weight/colour contrast, not a synthetic slant — the OBJ-2225 wordmark's outlined-path oblique treatment was right for a wordmark and wrong for emphasis text, so Task 8 was gated behind a design ruling instead of dispatched as a mechanical swap.
  • The agent who authors a planning or design artifact opens its own PR in the same run. Four separate instances of a stranded, unlanded planning/design artifact recurred across this milestone (the kickoff commit, two ROADMAP ticks, Desi's Phase 4 spec branch) — every instance the same shape: a finished docs-only artifact everyone agreed should land, with no role owning the merge. Recorded as a standing rule for future milestones.

Requirements Coverage

11 / 11 requirements satisfied (per .planning/milestones/v4.32-marketing-landing-rebuild-MILESTONE-AUDIT.md).

CategoryCountStatus
SPEC3All satisfied
SHARED2All satisfied
MOTION2All satisfied
GATE2All satisfied
REGRESS1Satisfied
DOCS1Satisfied

Full requirements list and evidence: v4.32-marketing-landing-rebuild-MILESTONE-AUDIT.md on GitHub.

Outcomes

index.html and meet-coach.html now render from one shared header, nav, and motion system, with the site's first real prefers-reduced-motion contract covering every motion effect on both pages — not just the ones this milestone added. The eight other landing-2026.css consumers (contact, 404, six policies/*) are unregressed, checked per phase rather than swept once at the end. Three live WCAG AA failures that predated this milestone and had no CI gate capable of seeing them are fixed. The referenced-but-undefined defect class that shipped OBJ-2227 ahead of this milestone now has a CI guard, verified against the real .cta-orb-coach specimen it would have caught. The contrast allowlist this surface depended on for years is gone — every marketing page passes real WCAG AA math with nothing suppressed.

Tech Debt

  • (process) A finished planning/design artifact stranded on an unlanded branch recurred four times in this milestone. All four landed before close, but no mechanical guard enforces the new standing rule ("the author of a planning/design artifact opens its own PR in the same run") — worth a follow-up guard if the pattern recurs in a future milestone.
  • (pre-existing, deferred) contact.html, 404.html, and all six policies/* pages link /#how-it-works, an anchor index.html does not have. Predates this milestone; deliberately not fixed inside a phase whose acceptance criterion was "these eight pages stay unregressed," since fixing it would have put them into visual-change territory. Flagged for a separate ticket.
  • 2e7bd4c3e7577a2393d52d57e8706a915aecfbd1 — Merge pull request #2202 (integration branch promoted to master)
  • b34d45bfa — Phase 1: shared header, nav & motion system (PR #2178)
  • 4e5234e6b — Phase 2: landing page rebuild (PR #2181)
  • 579dd5be7 — Phase 3: Meet Coach rebuild (PR #2186)
  • 31bf4fd4f — Phase 4: emphasis oblique, gate reconciliation & docs, branch tip (PRs #2191/#2192/#2197)

Last updated: 2026-08-08

Loading…