---
id: "3.13"
title: "Design QA checklist"
dept: design
status: draft
owner: Param
branded: false
last_verified: 2026-10-26
sources:
  - "brand-directions/book/content/d2.js:1146-1194"
  - "brand-directions/book/content/e2.js:358-370"
  - "brand-directions/_shared/no-ai-look.md:7-58"
  - "brand-directions/_shared/product-model.md:5-20, 67-113, 129-142, 162-213, 242-250"
  - "brand-directions/_shared/ia.md:147-153"
  - "brand-directions/_shared/kit-contract.md:31-37"
  - "brand-directions/_kit/kit.css:33, 564"
  - "brand-directions/BRIEF.md:9-24, 499-508"
  - "memory: brew-qv-process, prod-clean-only, feed-for-all-brands, brew-loader, brew-quiet-ui, brew-one-version, brew-card-fit-and-counts, measure-before-style-options"
---

# Design QA checklist

## Answer

A Brew screen ships only when it passes all 40 numbered checks below, in both themes, at phone and laptop width, on real brands, and a single fail sends it back.

## Today

Checked 26 October 2026.

| Fact | Source |
|---|---|
| The old book had two checklists: a 19 row UX check and a 12 step UI check | [src: brand-directions/book/content/d2.js:1146-1172] [src: brand-directions/book/content/e2.js:358-370] |
| A full QV audit with fixes runs after every phase, and three more full rounds before closing | [src: memory brew-qv-process] |
| Nothing dummy or test reaches production; a clean gate runs before every promote | [src: memory prod-clean-only] |
| Every fix is checked on several brands and card types, and the feed must still render, scroll and open cards | [src: memory feed-for-all-brands] |
| Loader alignment is checked numerically on phone and desktop before any loader change ships | [src: memory brew-loader] |
| Card rule changes are compared old against new on all cards before shipping | [src: memory brew-card-fit-and-counts] |
| Nothing may look AI generated; critics log every instance | [src: brand-directions/_shared/no-ai-look.md:48-50] |
| No screen reader pass has been run on the kit | [src: brand-directions/book/content/d2.js:814] |

## Tomorrow

One list for every screen, v1, New. It merges the two old checklists and adds the truth and every brand checks. Version tags inside a check say when it starts to apply.

### Words

1. Every control uses the plain word from the word set in Content design. No retired word anywhere.
2. Sentence case, no em or en dashes, no exclamation marks, no parentheses, no emoji, no all caps labels.
3. No old product name, no vendor or model names, no measuring words before v3.
4. Character words sit only around controls, never on a button, tab or card, at most 12 words a line.
5. The line would not fit another company's product unchanged.

### Truth

6. Every number has a source chip; an unsure number carries To confirm.
7. Every invented example uses the sample candle store and carries the Sample tag.
8. Nothing says the product posts, schedules or measures before v2 and v3 ship. Connections say read only.
9. A price shows once, on the paid confirm sheet, never on a first button.
10. Hand off says who got it, and that nothing was sent unless it went to our team.
11. Next and Later features are absent from the product, with no coming soon chips.

### Layout and patterns

12. One top bar, three tabs, one bottom bar with one main button.
13. Phone: one column under 600 wide. Laptop: rail, side peek, two pane Make it over 1024.
14. No sideways scroll at 360, 390, 768, 1280 or 1440 wide.
15. One sheet at a time: title, one main button, Close. Nothing on top of a sheet.
16. Undo toast for reversible actions; one sheet for paid or leaving; no browser confirm boxes.
17. One toast at a time, one line, three seconds.
18. One way into the thing: the pick, the Work row and the notification land on the same screen.
19. One version first, then New version; never three options to choose from.

### Cards and content

20. A closed card has five parts in 25 words at most: headline 8, why 12, one button.
21. Headlines start with a verb and name the product.
22. The card's button fits what it makes.
23. Quiet: one sentence under a title, no zero tiles, no empty sections, long lists cut at about six.

### States

24. Every state the screen can be in is drawn: empty, waiting, partial, error, full, done.
25. Errors never use the empty style; each says what happened, what is safe and one way out.
26. Short waits are a spinner in the button; long waits are the wait pose with one line; no skeletons.
27. The screen holds up with long names, missing photos, zero items and very many items.

### Look

28. Only kit tokens and the kit scale; no raw colours, sizes or spacing.
29. The hero colour only on the main button, focus, the character and small accents, never a card fill.
30. Area colours only as small area tags.
31. One icon set, no glyphs as icons.
32. No gradients as decoration, no glass, no sparkle icons, no default fonts, no identical section rhythm.

### Character

33. The character sits only in its named slot at its size, and uses the small mark below 120 px.
34. Never on a card, a button, inside the thing being made, a table of numbers, a Need your yes decision or a brand photo.
35. With the character switched off, the screen still works and reads.

### Accessibility

36. Ink and muted text at 4.5 to 1 on every surface, light and dark.
37. A visible 2 px focus ring on everything you can tab to; tab order follows reading order; Esc closes and focus returns.
38. Tap targets 44 px or more on phones; icon buttons have names.
39. Reduced motion stops all animation; sound starts off.

### Every brand

40. The screen is checked on at least three real brands of different kinds plus the sample store, in both themes, and the feed still renders, scrolls and opens a pick.

## How we do it

1. Run the writing check and fix until clean.

```sh
node /Users/param/Documents/ChatGPT/brand-directions/_tools/check.mjs
```

2. Render the screen with every state, at 390 and 1280 wide, light and dark, in the chosen direction.
3. Walk checks 1 to 40 in order. Mark each pass or fail with a screenshot for every fail.
4. Tab through on a laptop, then turn on reduced motion and look again.
5. Run the five second look: someone new says what the screen does.
6. Fix every fail in the kit part, not the one screen, so every brand and every screen gets it.
7. Repeat until 40 of 40 pass. Then Param gives the last glance.
8. Before promoting to production, run the clean gate: no dummy or test data.

## Numbers

| Number | Definition | Today | Where it is measured | Status |
|---|---|---|---|---|
| Checks passed | Of 40, how many a screen passes on first review | not measured | QA sheet per screen | Proposed |
| Screens at 40 of 40 | Of the 45 kit screens, how many pass all checks | not measured | QA sheet | Proposed |
| Fails reopened | Fails that come back after a fix | not measured | QA sheet | Proposed |

## Open

1. Should 40 checks be one gate, or split into a fast gate for small changes and the full list for new screens? Proposal: a fast gate of checks 1, 2, 6, 9, 12, 20, 25, 36, 38 and 40 for small changes, the full list for new screens.
2. Where does the QA sheet live? Proposal: one row per screen and check in the handbook, linked from Every screen.
3. Is a headless audit worth building for checks 14, 36 and 38? Proposal: yes, reuse the loader audit approach with puppeteer.