Audit and refine sitewide design consistency

Product outcome

Audit and iteratively improve the website's UI and UX until an independent adversarial designer explicitly accepts the rendered result. Course experiences are the highest-priority slice, especially the differences between legacy-backed and non-legacy/native courses and cohorts.

Normative authority

• _docs/PROCESS.md for the required engineer → independent tester/screenshots → PM acceptance → focused commit → local no-ff merge/push → on-call lifecycle. The completed adversarial designer loop is preservation evidence and an additional visual gate; it does not waive the repository lifecycle.
• _docs/design/design-5a.md and decoded page mockups for the shared visual language.
• _docs/accessibility/README.md and _docs/specs/10-verification-strategy.md for UI/UX accessibility and responsive evidence.
• Applicable product specifications in _docs/specs/, especially course/cohort and compatibility contracts.
• AGENTS.md for content-page shell ownership and repository boundaries.

Absolute exclusions

• Do not audit or modify the homepage (/).
• Do not audit or modify the /events listing. Listing-family variants are not evidence for this issue.
• Do not invent new product behavior, redesign URLs, remove compatibility behavior, add migrations/dependencies, or use production/personal data.

Individual event-detail pages remain in scope.

Scope

1. Independently audit representative rendered public, course, content, wiki/docs/FAQ, legal, Slack, and authentication experiences at desktop and mobile.
2. Prioritize courses and explicitly distinguish legacy-backed from non-legacy/native course/cohort experiences and their supported lifecycle, content, registration, enrollment, learner-progress, assignment, completed/archive, empty, locked, and safe-denial states.
3. Create realistic but fully synthetic review data. Document every generated persona/entity/state, exact setup/access steps, and why each page/state is necessary for UI/UX review. Include credible content density and length extremes without copying production or personal data.
4. Correct finite UI and UX findings: hierarchy, alignment, spacing, density, typography, palette, component consistency, responsive reflow, navigation clarity, information architecture, action prominence, interaction feedback, state comprehension, keyboard/focus, reduced motion, contrast, target size, functional destinations, and content fidelity.
5. Iterate the same Sol-medium implementer against every REVISE verdict. The independent Sol-xhigh designer re-renders and reassesses the whole contract each time. Completion requires explicit ACCEPT.
6. Reconstruct the accepted design-only payload as one fresh focused candidate on the repaired current-main base. Preserve the accepted visual decisions, then complete independent tester/screenshot and PM gates before a focused Closes #237 commit; do not push outside the normal orchestrator/on-call lane.

Representative review matrix

The designer may refine exact fixtures while keeping coverage finite. Required families include:

• /courses, one non-legacy/native course, one cohort, registration preview, and representative legacy-backed course/cohort equivalents;
• one canonical individual event detail;
• /podcast plus a long-title episode;
• /blog plus a rich long-form article;
• /books plus a long-title book;
• a contribution-dense person profile;
• /wiki, search, graph, special pages, and a detail page;
• docs and FAQ hubs plus representative detail pages;
• /slack, /terms, login, and signup.

Every representative renders at 1440×900 and 390×844. Sample every shell/family in light and dark mode. Exercise narrow/200% reflow where dense or long content appears.

Acceptance criteria

• A durable per-page UI/UX state matrix documents route, legacy/native source distinction where applicable, lifecycle/user/content states, why each state is required, synthetic records/personas, and exact setup/access steps.
• Realistic synthetic course data covers supported legacy-backed and non-legacy/native course/cohort states and meaningful content extremes without production/personal data.
• Design-5a surfaces, shells, hierarchy, type, spacing, palette, component vocabulary, and information density are coherent across the in-scope families.
• No clipping, unintended horizontal document scroll, collision, unreadable wrapping, or arbitrarily squeezed desktop composition occurs; narrow layouts deliberately reshape.
• Navigation and task UX communicate current location/back paths, labels and destinations, key action prominence, state/feedback, and form/error affordances.
• Shared masthead/footer and ordinary content_page shell are consistent, with only documented exceptions.
• Keyboard paths expose skip navigation and visible focus; menus, disclosures, filters, and forms work; interactive targets meet the design system's 44px floor; state is not color-only; reduced motion is honored; sampled contrast meets WCAG 2.2 AA.
• Light and dark themes preserve meaning, contrast, hierarchy, and component states.
• Long titles, URLs, tables, dense curricula, sparse/empty states, and other content extremes remain readable and their destinations match labels.
• The homepage and /events listing have no source changes attributable to this issue.
• Focused uv/Make-backed repository checks pass for each accepted chunk, and final proportional UI/accessibility/browser checks pass.
• Independent reviewer verdict is exactly ACCEPT, explicitly confirming the whole contract was rechecked and no blocking or material UI/UX issue remains.

Reviewer verdict contract

• REVISE: a prioritized finite list of failures with route, viewport/state, rendered evidence, why it matters, and the observable correction.
• ACCEPT: explicit confirmation that all criteria were checked and no blocking or material issue remains.

“Looks better” or approval with unresolved material findings is not acceptance.

Current lifecycle and readiness

This issue is OPEN/P1. The adversarial ACCEPT and issue-owned commits 97a5fcf through ed9e021 are preservation references only. Do not push stale local merge 20c5475, replay stale integration merge 2aeabe6, or use conflicting podcast repair ff30774 as #223/#270 evidence. The approved Events and Community knowledgebase headings remain correct.

Reconstruction waits for the repaired current-main P0 lane, including ordered #223 then #270 ownership of podcast URL policy. Start from that clean base, generate a fresh exact plan and fingerprint, rerun the applicable technical and rendered/adversarial gates, obtain independent tester screenshots and fresh PM acceptance, then deliver through the normal process. #237 is not a child or dependency of #228.

Reconstruction regression criteria from scheduled run 33315212334

The scheduled full-regression evidence identified two #237-owned reconstruction defects. These criteria are additive to the existing whole-contract and lifecycle gates; they do not authorize weaker assertions or scope transfer.

Event-detail navigation

• Every in-scope individual event-detail route exposes one visible landmark navigation with accessible name Breadcrumb. Within it, an exact accessible link named Events has exact local destination /events and precedes the current-event crumb.
• The event-detail breadcrumb contract passes at the required desktop and mobile viewports and remains usable in sampled light/dark, keyboard, and narrow/reflow states. Missing breadcrumb, text-only Events, a non-link label, an alternate heading, or a different destination is failure.
• The approved global headings remain exactly Events and Community knowledgebase. Do not restore stale heading copy to make an old assertion pass. The homepage and /events listing source exclusions remain binding; this correction is owned only by individual event-detail reconstruction and its tests.

Podcast provider identity

• .episode-video remains a shared visual/layout class and is not a provider-identity or cardinality selector. An episode with both supported embeds legitimately has two .episode-video containers; no test may require the broad class to have count one.
• The primary YouTube player is asserted as exactly one #podcast-video-player inside exactly one .episode-video[data-video-provider="youtube"], with the expected episode video ID, provider-specific iframe title, and YouTube platform destination.
• When the episode has a creator Spotify embed, the audio player is asserted independently as exactly one #podcast-audio-player inside exactly one .episode-audio[data-video-provider="spotify"], with the expected Spotify media ID, provider-specific iframe title, and Spotify destination. When source data has no creator embed, that provider-specific player is absent.
• Provider assertions use stable IDs and data-video-provider semantics, never .first, .nth, a relaxed >= 1 count, DOM order alone, or one provider as proof of the other. Duplicate IDs, duplicate provider containers, wrong IDs, swapped titles, or wrong destinations fail.
• #237 owns the rendered provider-specific UI contract and its exact selectors only. #279 exclusively owns offline request classification, fulfillment, denial, teardown, and ERR_BLOCKED_BY_CLIENT handling. Do not change or weaken #279 policy to make #237 pass, and do not attribute a separate #279 teardown failure to this selector correction.

Regression evidence boundary

• Focused event-detail and podcast parity cases pass first, followed by the fresh graph-selected full Playwright envelope on the reconstructed candidate. The event check must reach the breadcrumb assertion; the podcast check must independently prove both providers where fixture data supplies both.
• #236 remains the sole owner of homepage graph-toolbar target geometry and its shared fingerprint. These #237 corrections must not edit, waive, or use #236 toolbar evidence as proof.
• Independent tester screenshots include the affected event detail and dual-provider podcast detail at required desktop/mobile states, are opened and inspected, and are tied to the exact reconstructed fingerprint before fresh adversarial and PM acceptance.

Start by reading _docs/PROCESS.md, _docs/design/design-5a.md, _docs/accessibility/README.md, _docs/specs/10-verification-strategy.md, and AGENTS.md, then establish the repaired current-main base. Audit the listed routes at 1440×900 and 390×844 with synthetic data, prioritizing course variants and the event-detail and podcast regression criteria. Done requires focused checks, independent tester screenshots, fresh adversarial ACCEPT, and PM acceptance without changing the homepage or /events listing.