UI Review

Systematic UI/UX review methodology for designs (in Penpot) and implementations (in code).

Process

1. Understand context — what product, who are the users, what's the goal of this screen?
2. Gather materials — pull the Penpot designs and/or the live implementation
3. Run the checklist — score each category
4. Report — use the structured output format

Review Checklist

1. Accessibility (WCAG 2.1 AA)

Color & Contrast

• Text contrast ≥ 4.5:1 against background (normal text)
• Text contrast ≥ 3:1 against background (large text ≥ 24px or 18.67px bold, equivalent to WCAG 18pt/14pt)
• UI component contrast ≥ 3:1 against adjacent colors (borders, icons, controls)
• Information not conveyed by color alone (use icons, patterns, labels too)
• Tested with color blindness simulation (protanopia, deuteranopia, tritanopia)

Keyboard Navigation

• All interactive elements reachable via Tab key
• Logical tab order (left-to-right, top-to-bottom, follows visual flow)
• Visible focus indicator on all focusable elements (no outline:none without replacement)
• Escape closes modals/dropdowns
• Enter/Space activates buttons and links
• Arrow keys navigate within composite widgets (tabs, menus, radio groups)

Screen Reader

• All images have meaningful alt text (or aria-hidden if decorative)
• Form inputs have associated labels (not just placeholder text)
• ARIA landmarks used (main, nav, aside, footer)
• Dynamic content changes announced (aria-live regions for toasts, errors)
• Headings follow a logical hierarchy (h1 → h2 → h3, no skipping)

Motion & Interaction

• Animations respect prefers-reduced-motion
• No content that flashes more than 3 times per second
• Touch targets ≥ 44x44px on mobile (WCAG 2.1 AAA — optional but recommended)
• Adequate time for timed interactions (or ability to extend)

2. Design System Compliance

• All colors from the token palette (no hex codes outside the system)
• Typography uses defined scale (no arbitrary font sizes)
• Spacing uses the 4px grid (no magic numbers)
• Components match design system variants (no custom one-offs)
• Icons from the approved set (Lucide)
• Border radius from token scale
• Shadows from token scale

3. Layout & Responsiveness

• Works at all breakpoints: 375px, 768px, 1280px, 1536px
• No horizontal scroll on mobile
• Text remains readable at all sizes (no text smaller than 12px)
• Touch-friendly spacing on mobile (no cramped click targets)
• Images and media scale properly
• Content hierarchy maintained across breakpoints

4. Interaction Design

• Clear affordances (buttons look clickable, links look linkable)
• Hover states on all interactive elements (desktop)
• Loading states for async operations (skeleton screens or spinners)
• Empty states designed (no blank pages — always guide the user)
• Error states with clear recovery actions
• Success feedback for completed actions
• Confirmation for destructive actions (delete, discard)
• Undo available where possible

5. Visual Quality

• Consistent alignment (nothing looks "off" by a pixel)
• Visual hierarchy clear (primary action stands out, secondary is quieter)
• Whitespace used effectively (not cramped, not wastefully sparse)
• Typography hierarchy clear (heading → subheading → body → caption)
• Icon sizes consistent and proportional to surrounding text
• No orphaned words in headings (line breaks make sense)

6. Content & Copy

• Labels are clear and concise (no jargon)
• Error messages explain what went wrong AND how to fix it
• Button text describes the action ("Save changes" not "Submit")
• Placeholder text is a hint, not a label
• Consistent terminology throughout (don't mix "delete"/"remove"/"trash")

Output Format

## UI Review — [Screen/Component Name]

**Reviewed:** [date]
**Context:** [product, screen, purpose]
**Overall:** 🟢 Good | 🟡 Needs Work | 🔴 Significant Issues

### Accessibility
Score: X/10
[Specific findings with severity]

### Design System Compliance
Score: X/10
[Specific findings]

### Layout & Responsiveness
Score: X/10
[Specific findings]

### Interaction Design
Score: X/10
[Specific findings]

### Visual Quality
Score: X/10
[Specific findings]

### Content & Copy
Score: X/10
[Specific findings]

### 🔴 Must Fix
1. [Critical issues — accessibility violations, broken layouts]

### 🟡 Should Fix
1. [Important issues — inconsistencies, missing states]

### 🔵 Nice to Have
1. [Polish items — minor alignment, copy tweaks]

### ✅ What's Working Well
1. [Call out good patterns — reinforces what to keep doing]

Quick Review (for smaller changes)

For minor changes or single components, use a shortened format:

1. Accessibility — contrast OK? Keyboard accessible? Screen reader friendly?
2. Consistency — matches the design system?
3. States — all states present? (hover, focus, disabled, error, loading)
4. Responsive — works on mobile?
5. Copy — labels clear and actionable?

Report as: ✅ Pass | 🟡 Minor issues | 🔴 Blocking issues