The Full Stack Audit

20 min

The Full Stack Audit

This is the capstone. Everything you've learned across typography, animation, craft, and copywriting converges in a single exercise. Below is an interface with twenty intentional craft failures spanning all four domains. Your job: find every one.

This isn't a toy exercise. Every failure in this demo is something that ships in production, in real products, built by competent teams. The failures are subtle enough to pass code review, obvious enough to undermine quality, and common enough that you'll see them in your own codebase the moment you start looking.

Find all 20 craft failures
Failures found0/20
typography: 0/7animation: 0/3craft: 0/6copywriting: 0/4

Dashboard Overview

Your metrics at a glance

Sarah Chen, Head of Product

to view the full report.

Click on any element in the interface to identify a craft failure. There are 20 to find.

Checklist

Click on any element you think contains a failure. Each click reveals what's wrong and how to fix it.

How to use this exercise

Don't rush. Approach the interface the way you'd approach a real code review—systematically, domain by domain. Here's a suggested order:

Pass 1: Typography

Scan every piece of text. Check for:

  • Straight quotes anywhere in rendered copy. Quotation marks should be curly—" and "—not the vertical marks that keyboards produce by default.
  • Faux styles. Is any text styled as italic or bold without a corresponding true italic or bold font file? The browser will synthesize these, producing distorted letterforms.
  • Letterspacing on body text. Positive letter-spacing helps uppercase text and small caps. It harms lowercase body copy by breaking the word shapes the eye relies on for fast reading.
  • Proportional figures in tabular data. Numbers in columns should use tabular figures (font-variant-numeric: tabular-nums) so digits align vertically.
  • Heading size contrast. Can you immediately distinguish h2 from h3? If the sizes are within a few pixels of each other, the hierarchy is effectively flat.
  • Widows. Does any headline wrap so that a single word sits alone on the final line?
  • Non-breaking spaces. Are values separated from their units in a way that could break across lines? "10 MB" should use a non-breaking space.

Pass 2: Animation

Interact with every animated element. Check for:

  • ease-in on entrances. Hover effects, popovers, and any element that appears should use ease-out (fast start, slow finish). Ease-in (slow start, fast finish) is only appropriate for exits.
  • ease-in-out on popovers. Popovers and tooltips should enter with ease-out. The symmetric ease-in-out creates a perceptible delay at the start that feels sluggish.
  • Missing prefers-reduced-motion. Do animations play regardless of the user's system motion preferences? Every animation should be wrapped in a reduced-motion check.

Pass 3: Craft

Inspect the interaction details. Check for:

  • Missing focus-visible styles. Tab through every interactive element. Can you see where the focus is? If not, keyboard users are lost.
  • Missing alt text. Does every image have an alt attribute? Decorative images need alt=""; meaningful images need descriptive text.
  • Missing autocomplete. Do form inputs have the correct autocomplete attribute? Email fields need autocomplete="email".
  • No loading delay. Does a spinner appear instantly? Fast responses should complete without ever showing a loading state.
  • Pure #000000 black. True black creates harsh contrast on modern displays. Near-black (#0a0a0a, #111) is more comfortable.
  • Redundant borders. Are there doubled borders between list items—a bottom border on one item and a top border on the next?

Pass 4: Copywriting

Read every word. Check for:

  • Generic CTAs. "Submit" tells the user nothing. What happens when they press it? "Start free trial" is specific.
  • Generic empty states. "No results found" is a dead end. The copy should guide the user to the next action.
  • CTA before headline. The call to action should follow the value proposition, not precede it. The persuasion flow is: context → value → action.
  • "Click here" link text. Link text should describe the destination, not the mechanic of clicking.

After the audit

If you found all twenty, you've internalized the pattern-recognition this course teaches. You're no longer thinking about typography, animation, craft, and copywriting as separate checklists—you're seeing them as a single quality surface.

If you missed some, that's the point of the exercise. Go back to the lesson for the domain you missed the most failures in. The failures you don't see are the ones shipping in your own work right now.

The real audit

Close this page. Open your own product. Run the same four passes. You will find straight quotes. You will find ease-in on hover effects. You will find generic CTAs and missing focus styles and proportional figures in data tables. Every codebase has them.

The difference between a developer who ships adequate work and one who ships exceptional work isn't talent—it's this: the willingness to look, the training to see, and the discipline to fix what you find.

You now have the training. The rest is discipline.