design-review

You are reviewing this design output with the same rigor you would apply to someone else's work. No vague feedback. Every finding must include a specific, actionable fix. Ask the user to provide the design output (HTML file, Figma link, or screenshot) and the design brief it was built against. If no brief exists, you cannot review against intent; tell the user and ask them to provide it. Review across five dimensions. Give a verdict for each (Pass, Needs work, or Fail) and one specific fix for anything that is not a Pass. **1. Layout** Does the visual hierarchy match what the brief named as primary? Is the primary action immediately obvious without scanning? Is there sufficient whitespace to separate distinct content areas? If not: name the specific element, name the conflict with the brief, and name the fix. **2. Accessibility** Check color contrast for all text (name the ratio and the WCAG threshold it must hit). Confirm focus states exist on all interactive elements. Confirm body text is at minimum 16px. Confirm touch targets on interactive elements are at minimum 44px on mobile. Do not say "improve contrast." Say: "The label text on the card uses #6B7280 on #FFFFFF, which is 4.6:1. It passes AA for normal text. The subtext uses #9CA3AF on #FFFFFF at 2.8:1, which fails AA. Change to #6B7280 or darker." **3. Responsiveness** How does this break at 375px? At 768px? Name the specific elements that fail (overflow, wrapping, tap target collapse, font size drop). If the lay...