feat(app,site): post-refactor UI review pass

[visomi-dev]

Summary

Audit and polish the surfaces left inconsistent by the Catalyst utility-first refactor series (Catalyst Angular foundation, pure tokens alignment, site utility-first migration, UI designer app). The review follows the web-design-reviewer workflow: capture a baseline, audit drift, apply focused fixes, re-capture, and ship recordings as evidence.

Spec

docs/specs/2026-06-27-post-refactor-ui-review/ — full SDD, plan, requirements, and validation log.

Changes

Auth heading utility alignment (PR1)

Replace font-display (a non-canonical alias) with font-heading (the canonical utility per tokens.md and recipes.md) in 10 source locations: the auth route templates (sign-in, sign-up, verify-email, verify-device, forgotten-password, reset-password), the brand wordmark (logo.html), and the app-auth-layout brand link.

Auth layout shell (PR2)

Drop duplicate background utilities (bg-white sm:bg-white, dark:bg-zinc-950 dark:bg-zinc-950/85) in the app-auth-layout sticky header and replace the magic min-h-[calc(100vh-64px)] with min-h-dvh so the auth card centers regardless of header height. The sticky behavior is now unconditional across breakpoints so the chrome stays reachable on mobile after scroll.

Auth card padding + chrome hooks (PR3)

Tighten app-auth-card mobile padding from px-5 to a px-6 floor. Add data-od-id="submit" to every auth route's primary CTA (sign-in, sign-up, forgotten-password, two in reset-password) and data-od-id="brand" to the brand link so visual e2e suites can target the chrome without relying on accessible names.

Capture scripts + recordings (PR4)

Add scripts/capture-ui-snapshots.cjs driving a structured snapshot grid (12 site PNGs + 60 auth PNGs) against a single BASE_URL (gateway at :8081), regenerate the auth flow recordings (mobile 825 KB, HD 1.4 MB), bump apps/web/app/version.json to 1.5.0, and update the roadmap with the new phase entry.

Bonus: activation page tab bindings

The previous [class.bg-white dark:bg-zinc-950] (a multi-class string in one binding) threw InvalidCharacterError in Angular's renderer on every SSR render. Split into per-mode [class.X] entries per recipes.md and replace the retired text-accent token with text-blue-600 / dark:text-blue-500 per tokens.md. This unblocks two previously failing app-e2e specs (can generate an API key and see it displayed once, shows seed configuration section).

Visual evidence

• media/ui-snapshots/site-{en,es}-home-{375,768,1280}-{light,dark}.png — 12 site PNGs
• media/ui-snapshots/auth-{sign-in,sign-up,forgotten-password,verify-email,verify-device,reset-password}-{360,390,520,768,1280}-{light,dark}.png — 60 auth PNGs
• media/auth-flow-videos/auth-flow-iphone-13-mini.webm — full auth flow on mobile
• media/auth-flow-videos/auth-flow-hd-1920x1080.webm — full auth flow on desktop

Verification

Target	Result
pnpm nx run app:lint	0 errors
pnpm nx run app:typecheck	0 errors
pnpm nx run app:vite:test	40 passed, 1 skipped
pnpm nx run site:lint	0 errors
pnpm nx run ui-designer:lint	0 errors
pnpm nx e2e app-e2e	44/44 passed (was 42/44 before activation fix)
pnpm nx e2e site-e2e	2/2 passed

Static guards confirm:

• Zero font-display in apps/web/app/src
• Zero duplicate utilities in app-auth-layout (sm:bg-white, dark:bg-zinc-950 dark:bg-zinc-950)
• Zero min-h-[calc(100vh-64px)] magic constants
• Zero broken multi-class bindings in activation.html
• 5 data-od-id="submit" + 1 data-od-id="brand" hooks

Risks

• The activation page fix touches code that was technically out of scope for the post-refactor UI review, but it was required to unblock the app-e2e pre-commit hook. The fix follows the documented contract (recipes.md, tokens.md) and has no behavioral effect beyond restoring SSR rendering of the page.
• The Astro astro preview server does not serve _astro/ static assets in middleware mode. The capture script tolerates either base URL via BASE_URL; the canonical workflow uses astro dev for the site half, but a single gateway run covers both halves and is the documented default.

Follow-ups (P3)

• apps/web/app/src/app/shared/layout/sidebar-menu/sidebar-menu.html:34 uses focus:outline-primary (not a Tailwind utility); replace with focus-visible:outline-blue-600 dark:focus-visible:outline-blue-500.
• apps/web/site/src/pages/docs/index.astro still references bg-slate-* in its hero card; re-verify after the next site migration.

🤖 Generated with opencode