recipe-manager/docs/visual-audit/checklist.md

Visual Redesign Acceptance Checklist (Measurable)

Use this checklist to validate redesign completion against T01 baseline.

1) Visual Identity & Design System

• A single token source exists for: color, typography, spacing, radius, shadow, and motion.
• No page uses hard-coded ad-hoc hex colors outside token definitions (except documented one-offs).
• Heading scale is consistent (h1/h2/h3) across home, list, detail, add/edit, and import pages.
• Primary/secondary/destructive button styles are identical across all pages (same radius, padding, states).

2) Home/List Page

• Above-the-fold includes clear single primary CTA (no competing primary actions).
• Search + filter controls are visible without scrolling at 1280x720.
• Recipe cards render in responsive grid:
  • 1 column at ~390px width
  • 2 columns at >=640px
  • 3 columns at >=1280px
• Empty state includes clear next action and is visually distinct from error state.

3) Detail + Add/Edit

• Detail page uses a consistent hero treatment (image or media block) with fallback behavior.
• Primary actions are prioritized (max 1 prominent primary action per context area).
• Ingredients and instructions sections share the same section component anatomy (header/body spacing + borders).
• Form fields have consistent spacing and validation states across add/edit/import draft forms.

4) Import URL Flow

• URL form, progress card, and preview editor use shared component styles from the design system.
• Progress states are perceivable in <200ms feedback and remain readable at mobile width (~390px).
• Error states are mapped to semantic variants (invalid input, timeout/network, parse failure).

5) Accessibility (AA baseline)

• Text/background contrast meets WCAG AA for body text and interactive controls.
• All interactive controls have visible focus indicators (keyboard-only check).
• Touch targets are at least ~44x44 px on mobile for primary actions.
• Page remains usable at 200% zoom without content overlap/loss.

6) Responsive QA & Regression

• Before/after screenshots captured for desktop and mobile for key routes:
  • /
  • /recipe/new
  • /recipe/:id
  • /import/url
• Lighthouse (desktop + mobile) shows no major regression in performance/accessibility best-practice categories.
• No layout shift or overflow issues during initial page load and route changes.

7) Done Definition

• All P0 items closed.
• All high-severity T01 audit issues addressed or explicitly deferred with rationale.
• QA signoff recorded with date and reviewer.