The tangible win
After this lesson, you should be able to review a product screen and separate design-system issues from product-specific decisions.
Backend analogy: production trace
Auditing a screen is like reading a production trace. You are not only asking “what looks wrong?” You are asking where the contract failed: bad input, missing abstraction, inconsistent state, duplicated logic, or an undocumented edge case.
The audit layers
| Layer | Look for | Example finding |
|---|---|---|
| Tokens | Color, type, spacing, radius, shadow. | Three similar grays used for body text. |
| Components | Known components vs custom one-offs. | Custom button styling instead of system Button. |
| States | Loading, empty, error, disabled, permission. | Table has data state but no empty state. |
| Patterns | Repeated flows and decisions. | Delete flow differs from other destructive actions. |
| Content | Labels, errors, helper text, CTA specificity. | Button says Submit instead of Save changes. |
| Accessibility | Keyboard, focus, labels, contrast. | Icon-only action has no accessible name. |
Classify each issue
Do not just make a bug list. Classify findings by what kind of fix they need:
- Local fix — the screen misuses an existing system rule.
- Docs fix — the system supports it, but guidance is unclear.
- Component fix — existing component lacks a needed state or API.
- Pattern fix — repeated product situation needs flow guidance.
- Governance fix — teams are bypassing the system because contribution is unclear.
Practice: classify the finding
A screen uses a custom red button for “Delete project” even though the system already has Button variant="danger". What kind of issue is this first?
Audit output format
A useful audit should produce a table like this:
| Finding | Layer | Fix type | Recommendation |
|---|---|---|---|
| CTA says Submit | Content | Local fix | Change to Save changes. |
| No empty state | State / pattern | Pattern fix | Add empty-state guidance for tables. |
| Custom spacing | Tokens | Local fix | Use spacing scale token. |
Read next
Take one real screen from a product you use and audit it using the reference checklist. Do not redesign it yet. First classify the issues.