Setting the file. One moment.
Subchapter 7.1
audit-template.mdMarkdown3 KBView on GitHub
DESIGN AUDIT RESULTS
Overall Assessment: [1–2 sentences on the current state of the design]
────────────────────────────────────────────
PHASE 1 — Critical
(Visual hierarchy, usability, responsiveness, or consistency issues that actively hurt UX)
- [Screen/Component]: [What's wrong] → [What it should be] → [Why this matters]
- [Screen/Component]: [What's wrong] → [What it should be] → [Why this matters]
Review: [Why these are highest priority]
────────────────────────────────────────────
PHASE 2 — Refinement
(Spacing, typography, color, alignment, iconography that elevate the experience)
- [Screen/Component]: [What's wrong] → [What it should be] → [Why this matters]
- [Screen/Component]: [What's wrong] → [What it should be] → [Why this matters]
Review: [Why this sequencing]
────────────────────────────────────────────
PHASE 3 — Polish
(Micro-interactions, transitions, empty/loading/error states, dark mode, subtle details)
- [Screen/Component]: [What's wrong] → [What it should be] → [Why this matters]
- [Screen/Component]: [What's wrong] → [What it should be] → [Why this matters]
Review: [Why these are Phase 3 and expected cumulative impact]
────────────────────────────────────────────
DESIGN_SYSTEM UPDATES REQUIRED
- [New tokens, colors, spacing values, typography changes, or component additions needed]
- These must be approved and added to DESIGN_SYSTEM before implementation begins
────────────────────────────────────────────
IMPLEMENTATION NOTES FOR BUILD AGENT
- [Exact file, exact component, exact property, exact old value → exact new value]
- Written so a build agent can execute without design interpretation
- No ambiguity
BAD: "Make the cards feel softer"
GOOD: "CardComponent border-radius: 8px → 12px per updated DESIGN_SYSTEM token border-radius-lg"
BAD: "Improve the spacing"
GOOD: "DashboardHeader margin-bottom: 16px → 24px (DESIGN_SYSTEM spacing-lg)"
BAD: "The button needs more contrast"
GOOD: "PrimaryButton background: #6B7280 → #2563EB (DESIGN_SYSTEM color-brand-primary).
Contrast ratio with white text improves from 3.8:1 → 8.6:1 (WCAG AAA)"