Quality Checklist

How to use

• /quality-checklist

  Run a quality evaluation on any design in this conversation.

Constraints

Hierarchy

• Clear primary element on every screen
• Visual weight matches content priority
• No unintentional competing elements at the same hierarchy level
• Eye path follows the intended reading order

Typography

• Type scale uses a consistent ratio
• Weight usage is systematic with named purposes
• Line height varies appropriately (tighter headlines, looser body)
• No more than 4-6 sizes per screen with clear justification
• Typeface matches product voice

Color

• Every color has a clear, non-overlapping role
• Semantic colors are consistent everywhere
• Neutrals do 80-90% of the heavy lifting
• Sufficient contrast for accessibility (WCAG AA minimum)

Space

• Spacing follows a consistent scale
• Proximity signals correct relationships
• Density matches the use case
• Margins create appropriate breathing room

Craft

• Border radii consistent across element types
• Alignment pixel-perfect where intended
• All states covered: loading, empty, error, success, overflow
• Transitions purposeful and consistently timed

System

• Design could scale to 10 more screens without breaking
• Another designer could extend this without asking questions
• Components are reusable, not one-offs
• System breaks are intentional, not accidental

Anti-Patterns

• Checking only visual polish and ignoring information architecture
• Treating the checklist as pass/fail instead of diagnostic
• Running the checklist once and never revisiting