# 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
