microsoft-frontend-design-review/references/quick-checklist.md

Quick Checklist

Before approving any UI work:

Design System Compliance

• [ ] Component verified in your Figma Design System
• [ ] Component implementation checked in your Component Library
• [ ] Figma Dev Mode specs followed (spacing, tokens, typography)
• [ ] Design tokens used (no hardcoded hex colors or pixel values)
• [ ] Token imports verified in code
• [ ] All variants/states implemented as designed in Figma
• [ ] Spacing measurements match Figma Dev Mode exactly
• [ ] Deviations documented with design approval

Aesthetic Quality (especially for new designs)

• [ ] Clear conceptual direction (not generic overused fonts and cliched schemes)
• [ ] Distinctive typography (avoid overused fonts)
• [ ] Cohesive color palette with CSS variables
• [ ] Intentional motion (staggered reveals, hover states)
• [ ] Visual interest through composition (asymmetry, overlap, grid-breaking)
• [ ] Atmosphere through backgrounds (gradients, textures, patterns)
• [ ] Implementation complexity matches vision

Frictionless

• [ ] Core task completable efficiently (≤3 interactions)
• [ ] Single clear primary action per view

Quality Craft

• [ ] Uses design system components (verified in Figma)
• [ ] Design tokens used (no hardcoded values)
• [ ] Distinctive aesthetic (not generic overused fonts/cliched schemes)
• [ ] Accessible (Grade C minimum, Grade B ideal)
• [ ] Keyboard navigation complete
• [ ] Tested in light/dark/high contrast modes

Trustworthy

• [ ] AI-generated content has disclaimer
• [ ] Error messages are actionable