Skip to content
Craft

Design review for engineers

A checklist distilled from the catalog's qualityScore rubric — the five things an editor looks for before a component earns its number.

Beginner1 min read (computed · recorded 6)updated 2026-09-12reviewdesignchecklist

by Motif Editors

revised 2026-09-12First publication in bank-3 batch 4.

Part 2 of 3 in The review craftReading a diff as a reviewerWriting error messages that name the fix

Key takeaways
  • One idea per component; two ideas is two components.
  • Tokens only — a hex literal ships a theme break.
  • States, keyboard path and a context demo or it isn't done.

The five

  • One idea per component. If the demo needs a paragraph to explain what it is, it is two components.
  • Tokens only. A hex literal in the scene means the theme break is already shipped.
  • States, not the happy one: hover, focus, disabled, empty, error. Five screenshots or it isn't done.
  • The keyboard path exists and someone has walked it.
  • The demo shows a context, not a widget floating on a void.

Why a number

The qualityScore is editorial, and the site says so on the pages that print it. A number with a published rubric is arguable — which is the point. 'Looks good' is not arguable; it is just finished.

Practise the lesson

Theory sticks when you ship it. These original Motif assets put this guide's lesson to work — open one and copy it into your own page.