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

apps/web/app/src/app/activation/activation.html

@@ -1,6 +1,8 @@
 <section class="mx-auto flex max-w-6xl flex-col gap-8">
   <header class="flex flex-col gap-3">
-    <p class="text-accent font-mono text-xs font-semibold tracking-widest uppercase">v1.0.2_stable</p>
+    <p class="font-mono text-xs font-semibold tracking-widest text-blue-600 uppercase dark:text-blue-500">
+      v1.0.2_stable
+    </p>
     <app-heading i18n="@@activationTitle" level="1" [text]="'System activation'" />
     <p class="max-w-2xl text-sm leading-relaxed text-zinc-500 md:text-base dark:text-zinc-400">
       Configure your API key, local workspace settings, and project seed prompt before entering the first projects
@@ -69,7 +71,7 @@
                   <div class="min-w-0">
                     <p class="text-sm font-semibold text-zinc-950 dark:text-zinc-50">{{ apiKey.label }}</p>
                     @if (plaintextTokenFor(apiKey)) {
-                      <p class="text-accent mt-1 font-mono text-xs break-all">
+                      <p class="mt-1 font-mono text-xs break-all text-blue-600 dark:text-blue-500">
                         {{ plaintextTokenFor(apiKey) }}
                       </p>
                     } @else {
@@ -130,8 +132,10 @@
               [attr.aria-selected]="selectedConfigTab() === 'themis'"
               aria-controls="config-tabpanel"
               class="cursor-pointer border-r border-zinc-950/10 px-5 py-3 font-mono text-xs text-zinc-500 focus:outline-none dark:border-white/10 dark:text-zinc-400"
-              [class.bg-white dark:bg-zinc-950]="selectedConfigTab() === 'themis'"
-              [class.text-accent]="selectedConfigTab() === 'themis'"
+              [class.bg-white]="selectedConfigTab() === 'themis'"
+              [class.dark:bg-zinc-950]="selectedConfigTab() === 'themis'"
+              [class.text-blue-600]="selectedConfigTab() === 'themis'"
+              [class.dark:text-blue-500]="selectedConfigTab() === 'themis'"
               (click)="selectConfigTab('themis')"
             >
               ~/.config/themis/core.json
@@ -143,8 +147,10 @@
               [attr.aria-selected]="selectedConfigTab() === 'opencode'"
               aria-controls="config-tabpanel"
               class="cursor-pointer border-r border-zinc-950/10 px-5 py-3 font-mono text-xs text-zinc-500 focus:outline-none dark:border-white/10 dark:text-zinc-400"
-              [class.bg-white dark:bg-zinc-950]="selectedConfigTab() === 'opencode'"
-              [class.text-accent]="selectedConfigTab() === 'opencode'"
+              [class.bg-white]="selectedConfigTab() === 'opencode'"
+              [class.dark:bg-zinc-950]="selectedConfigTab() === 'opencode'"
+              [class.text-blue-600]="selectedConfigTab() === 'opencode'"
+              [class.dark:text-blue-500]="selectedConfigTab() === 'opencode'"
               (click)="selectConfigTab('opencode')"
             >
               ~/.config/opencode/opencode.json
@@ -156,8 +162,10 @@
               [attr.aria-selected]="selectedConfigTab() === 'env'"
               aria-controls="config-tabpanel"
               class="cursor-pointer border-r border-zinc-950/10 px-5 py-3 font-mono text-xs text-zinc-500 focus:outline-none dark:border-white/10 dark:text-zinc-400"
-              [class.bg-white dark:bg-zinc-950]="selectedConfigTab() === 'env'"
-              [class.text-accent]="selectedConfigTab() === 'env'"
+              [class.bg-white]="selectedConfigTab() === 'env'"
+              [class.dark:bg-zinc-950]="selectedConfigTab() === 'env'"
+              [class.text-blue-600]="selectedConfigTab() === 'env'"
+              [class.dark:text-blue-500]="selectedConfigTab() === 'env'"
               (click)="selectConfigTab('env')"
             >
               .env.production

apps/web/app/src/app/auth/forgotten-password/forgotten-password.html

@@ -4,7 +4,7 @@
       <header class="space-y-4 text-center">
         <h1
           data-slot="title"
-          class="font-display text-[1.625rem] leading-tight font-bold tracking-[-0.025em] text-zinc-950 dark:text-zinc-50"
+          class="font-heading text-[1.625rem] leading-tight font-bold tracking-[-0.025em] text-zinc-950 dark:text-zinc-50"
           i18n="@@forgottenPasswordSuccessTitle"
         >
           Recovery link sent
@@ -32,7 +32,7 @@
         </p>
         <h1
           data-slot="title"
-          class="font-display text-[1.625rem] leading-tight font-bold tracking-[-0.025em] text-zinc-950 dark:text-zinc-50"
+          class="font-heading text-[1.625rem] leading-tight font-bold tracking-[-0.025em] text-zinc-950 dark:text-zinc-50"
           i18n="@@forgottenPasswordTitle"
         >
           Recover password
@@ -71,6 +71,7 @@
         </app-field>
 
         <app-button
+          data-od-id="submit"
           data-slot="submit"
           i18n="@@forgottenPasswordSubmitButton"
           tone="accent"

apps/web/app/src/app/auth/reset-password/reset-password.html

@@ -3,7 +3,7 @@
     <app-auth-card>
       <header class="space-y-4 text-center">
         <h1
-          class="font-display text-[1.625rem] leading-tight font-bold tracking-[-0.025em] text-zinc-950 dark:text-zinc-50"
+          class="font-heading text-[1.625rem] leading-tight font-bold tracking-[-0.025em] text-zinc-950 dark:text-zinc-50"
           i18n="@@resetPasswordSuccessTitle"
         >
           Password updated
@@ -28,7 +28,7 @@
         </p>
         <h1
           data-slot="title"
-          class="font-display text-[1.625rem] leading-tight font-bold tracking-[-0.025em] text-zinc-950 dark:text-zinc-50"
+          class="font-heading text-[1.625rem] leading-tight font-bold tracking-[-0.025em] text-zinc-950 dark:text-zinc-50"
           i18n="@@resetPasswordTitle"
         >
           Reset your password
@@ -74,6 +74,7 @@
           </app-field>
 
           <app-button
+            data-od-id="submit"
             data-slot="submit"
             i18n="@@resetPasswordVerifyButton"
             tone="accent"
@@ -118,6 +119,7 @@
           </app-field>
 
           <app-button
+            data-od-id="submit"
             data-slot="submit"
             i18n="@@resetPasswordUpdateButton"
             tone="accent"

apps/web/app/src/app/auth/sign-in/sign-in.html

@@ -10,7 +10,7 @@
       </p>
       <h1
         data-slot="title"
-        class="font-display text-[1.625rem] leading-tight font-bold tracking-[-0.025em] text-zinc-950 dark:text-zinc-50"
+        class="font-heading text-[1.625rem] leading-tight font-bold tracking-[-0.025em] text-zinc-950 dark:text-zinc-50"
         i18n="@@signInTitle"
       >
         Sign in
@@ -75,7 +75,13 @@
         <span i18n="@@signInRememberDeviceLabel">Remember this device.</span>
       </label>
 
-      <app-button data-slot="submit" i18n="@@signInSubmitButton" tone="accent" type="submit" [loading]="submitting()"
+      <app-button
+        data-od-id="submit"
+        data-slot="submit"
+        i18n="@@signInSubmitButton"
+        tone="accent"
+        type="submit"
+        [loading]="submitting()"
         >Sign in</app-button
       >
     </form>

apps/web/app/src/app/auth/sign-up/sign-up.html

@@ -10,7 +10,7 @@
       </p>
       <h1
         data-slot="title"
-        class="font-display text-[1.625rem] leading-tight font-bold tracking-[-0.025em] text-zinc-950 dark:text-zinc-50"
+        class="font-heading text-[1.625rem] leading-tight font-bold tracking-[-0.025em] text-zinc-950 dark:text-zinc-50"
         i18n="@@signUpTitle"
       >
         Create your account
@@ -77,7 +77,13 @@
         }
       </app-field>
 
-      <app-button data-slot="submit" i18n="@@signUpSubmitButton" tone="accent" type="submit" [loading]="submitting()"
+      <app-button
+        data-od-id="submit"
+        data-slot="submit"
+        i18n="@@signUpSubmitButton"
+        tone="accent"
+        type="submit"
+        [loading]="submitting()"
         >Create account</app-button
       >
     </form>

apps/web/app/src/app/auth/verify-device/verify-device.html

@@ -10,7 +10,7 @@
       </p>
       <h1
         data-slot="title"
-        class="font-display text-[1.625rem] leading-tight font-bold tracking-[-0.025em] text-zinc-950 dark:text-zinc-50"
+        class="font-heading text-[1.625rem] leading-tight font-bold tracking-[-0.025em] text-zinc-950 dark:text-zinc-50"
         i18n="@@verifyDeviceTitle"
       >
         Verify device

apps/web/app/src/app/auth/verify-email/verify-email.html

@@ -10,7 +10,7 @@
       </p>
       <h1
         data-slot="title"
-        class="font-display text-[1.625rem] leading-tight font-bold tracking-[-0.025em] text-zinc-950 dark:text-zinc-50"
+        class="font-heading text-[1.625rem] leading-tight font-bold tracking-[-0.025em] text-zinc-950 dark:text-zinc-50"
         i18n="@@verifyEmailTitle"
       >
         Verify email

apps/web/app/src/app/shared/layout/logo/logo.html

@@ -29,7 +29,7 @@
 }
 
 @if (variant() === 'wordmark' || variant() === 'mark-name') {
-  <span class="font-display text-base font-bold tracking-tight sm:text-[1.0625rem]">Themis</span>
+  <span class="font-heading text-base font-bold tracking-tight sm:text-[1.0625rem]">Themis</span>
 }
 
 @if (variant() === 'wordmark') {

apps/web/app/src/app/shared/ui/layout/auth-card/auth-card.ts

@@ -18,7 +18,7 @@ export class AuthCard {
 
   readonly classes = computed(() =>
     uiClass(
-      'mx-auto w-full max-w-[27.5rem] rounded-[var(--radius-panel)] border border-zinc-950/10 dark:border-white/10 px-5 py-6 shadow-sm sm:px-8 sm:py-8 md:px-10 md:py-10',
+      'mx-auto w-full max-w-[27.5rem] rounded-[var(--radius-panel)] border border-zinc-950/10 dark:border-white/10 px-6 py-6 shadow-sm sm:px-8 sm:py-8 md:px-10 md:py-10',
       this.tone() === 'raised' ? 'bg-zinc-100 dark:bg-zinc-800' : 'bg-zinc-50 dark:bg-zinc-900',
     ),
   );

apps/web/app/src/app/shared/ui/layout/auth-layout/auth-layout.html

@@ -1,12 +1,12 @@
 <header
   data-od-id="auth-shell"
-  class="relative border-b border-zinc-950/10 bg-white sm:sticky sm:top-0 sm:z-20 sm:bg-white sm:backdrop-blur-md dark:border-white/10 dark:bg-zinc-950 dark:bg-zinc-950/85"
+  class="sticky top-0 z-20 border-b border-zinc-950/10 bg-white/85 backdrop-blur-md dark:border-white/10 dark:bg-zinc-950/85"
 >
   <div class="mx-auto flex max-w-7xl items-center justify-between gap-3 px-4 py-2.5 sm:gap-4 sm:px-6 sm:py-3">
     <a
       data-od-id="brand"
       routerLink="/"
-      class="font-display inline-flex items-center gap-2 font-bold tracking-tight text-zinc-950 sm:gap-2.5 dark:text-zinc-50"
+      class="font-heading inline-flex items-center gap-2 font-bold tracking-tight text-zinc-950 sm:gap-2.5 dark:text-zinc-50"
       aria-label="Themis home"
     >
       <app-logo variant="mark-name" size="sm" />
@@ -19,8 +19,6 @@
   </div>
 </header>
 
-<main
-  class="grid min-h-[calc(100vh-64px)] place-items-center bg-white px-4 py-8 sm:py-10 md:px-6 md:py-14 dark:bg-zinc-950"
->
+<main class="grid min-h-dvh place-items-center bg-white px-4 py-8 sm:py-10 md:px-6 md:py-14 dark:bg-zinc-950">
   <ng-content />
 </main>

apps/web/app/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "1.2.0"
+  "version": "1.5.0"
 }

docs/constitution/roadmap.md

@@ -84,3 +84,18 @@ Replace the vendored Open Design prototypes and the inherited design-system skil
 - See spec: [`docs/specs/2026-06-26-ui-designer-app/`](./specs/2026-06-26-ui-designer-app/)
 - Branch: `feat/OC/ui-designer-app`
 - Version target: `1.4.0`
+
+## Post-Refactor UI Review
+
+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 screenshot grid and an auth flow recording, audit visual drift at the source, apply focused fixes, re-capture, and ship the recordings as evidence. Concrete items in scope: replace the non-canonical `font-display` utility with `font-heading` across the auth routes, brand wordmark, and recipes doc; collapse duplicate background utilities in the `app-auth-layout` sticky header; replace the magic `min-h-[calc(100vh-64px)]` with `min-h-dvh`; tighten the `app-auth-card` mobile padding to a 24px outer floor; add `data-od-id` chrome hooks for visual e2e suites; add `scripts/capture-ui-snapshots.cjs` to drive the snapshot matrix; regenerate the auth flow recordings. No new tokens, no new primitives, no redesign. Out of scope for this spec: a `DESIGN.md` manuscript realignment (already documented as follow-up in the site spec), automated visual regression in CI, and any backend changes.
+
+- See spec: [`docs/specs/2026-06-27-post-refactor-ui-review/`](./specs/2026-06-27-post-refactor-ui-review/)
+- Branch: `feat/OC/post-refactor-ui-review`
+- Version target: `1.5.0`
+
+Slice plan:
+
+- [ ] PR1: replace `font-display` with `font-heading` in the auth routes, the brand wordmark, and `recipes.md`.
+- [ ] PR2: tighten the `app-auth-layout` sticky header (drop duplicate utilities, responsive height, sticky on mobile).
+- [ ] PR3: tighten `app-auth-card` mobile padding to `px-6 py-6` floor and add `data-od-id="submit"` to every auth route's primary CTA.
+- [ ] PR4: add `scripts/capture-ui-snapshots.cjs`, regenerate `media/auth-flow-videos/*.webm`, bump version to `1.5.0`, update the roadmap.