Purpose
To verify that high-fidelity UI screens follow the design system, tokens, and visual rules before approval or developer handoff.
Visual Consistency Checklist
| Category | Check | Status (☑/✗) | Notes |
| Typography | Correct text styles applied (no manual overrides) | ||
| Font sizes consistent with Typography Sheet (Doc 4.2) | |||
| Color | Only tokenized colors used (no custom hex codes) | ||
| Contrast ratios meet WCAG AA minimum | |||
| Spacing & Layout | Grid & Spacing Rules (Doc 3.5) followed | ||
| Section and component gaps are consistent | |||
| Components | Components from library used (not duplicates) | ||
| All states included (Default, Hover, Disabled, Error, Success) | |||
| Patterns | Screen follows defined UI patterns (Doc 5.3) | ||
| Navigation depth is consistent with UX Flow (Doc 2.7) | |||
| Responsiveness | Desktop, tablet, and mobile variants complete | ||
| Critical CTAs visible across breakpoints | |||
| Branding & Imagery | Icons/illustrations follow defined style | ||
| Logos and brand assets sized correctly | |||
| Accessibility | Minimum tap target = 44px (mobile) | ||
| Keyboard/focus states represented (if relevant) | |||
| Final Hygiene | No “lorem ipsum” placeholders | ||
| Figma layers named & grouped properly | |||
| Frames/screens logically ordered & labeled |
Usage Notes
- Run this checklist after peer feedback, before lead approval.
- Any ✗ means the design cannot move to the Approved status.
- Keep filled checklists stored in
Design QA → Visual Consistency.
Outcome: Every UI screen is pixel-consistent, accessible, and aligned with system foundations, reducing dev friction and QA escalations.