The full stack audit

How to use this exercise

Approach it like a code review, domain by domain.

Pass 1: Typography

Scan every piece of text:

• Straight quotes in rendered copy. Should be curly.
• Faux styles. Bold or italic without a true font file. The browser synthesises distorted letterforms.
• Letterspacing on body text. Positive letter-spacing helps uppercase, harms lowercase.
• Proportional figures in tabular data. Use font-variant-numeric: tabular-nums so digits align.
• Flat heading hierarchy. Can you distinguish h2 from h3 instantly?
• Widows. A single word alone on the final line.
• Non-breaking spaces. "10 MB" should use a non-breaking space.

Pass 2: Animation

Interact with every animated element:

• ease-in on entrances. Entrances use ease-out. ease-in is for exits.
• ease-in-out on popovers. Perceptible start delay. Use ease-out.
• Missing prefers-reduced-motion. Every animation needs a reduced-motion check.

Pass 3: Craft

Inspect interaction details:

• Missing focus-visible styles. Tab through everything. Can you see focus?
• Missing alt text. Decorative images: alt="". Meaningful images: descriptive text.
• Missing autocomplete. Email fields need autocomplete="email".
• No loading delay. Spinner appears instantly on fast responses.
• Pure #000000 black. Near-black (#0a0a0a, #111) is easier on the eye.
• Redundant borders. Bottom border on one item and top border on the next.

Pass 4: Copywriting

Read every word:

• Generic CTAs. "Submit" tells nothing. "Start free trial" is specific.
• Generic empty states. "No results found" is a dead end.
• CTA before headline. Context, then value, then action.
• "Click here" link text. Describe the destination.

The real audit

Close this page. Open your own product. Run the same four passes.