57 lines
2.6 KiB
Markdown
57 lines
2.6 KiB
Markdown
# 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.
|