# 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.