The six things a design detector actually reads

Impeccable's detector groups its deterministic rules into six categories. This page shows one honest example of each — the shape agents keep producing on the left, a version without the tell on the right.

The examples are hand-written. The findings are not. Each pair below was written by hand to show what a category means. Then the real detector was run against this file, and it found 47 anti-patterns — including two in the Passes column: an infinite loading sweep, and body text at 3.0:1. Both are corrected above. What still fires is the deliberate specimens, which is the correct answer. The only way to know what fires on your code is npx impeccable detect src/, and all it returns is an exit code and a list — not a verdict on whether the design is good.

1. Contrast

The most mechanical of the six, and the one worth gating first: a contrast ratio is arithmetic, so a rule can be certain about it in a way it can never be certain about taste. Low-contrast text on a low-contrast fill is the single most common defect in generated UI, because the model is matching a look rather than reading a ratio.

Fires

Grey on grey. Legible on the designer's monitor, invisible in daylight.

Passes

Same button, a ratio that survives a phone screen outdoors.

2. Typography drift

Agents converge on a narrow band of sizes and one weight, because every size is defensible in isolation. The result is a page where nothing is first — no entry point, no reading order, no hierarchy to skim.

Fires

Usage this month

You have used 8,400 of 10,000 credits.

Resets on 1 September.

Three elements, three different jobs, one size and one weight.

Passes

Usage this month

8,400 of 10,000 credits

Resets on 1 September.

A scale with actual steps. The number is the headline, because it is.

3. Layout overflow

Generated components are written against the placeholder string that was in the prompt. Give them a real name, a German translation, or a long email address and they break — which is why the detector reads for the containment rule rather than for the current content.

Fires
alexandra.fitzgerald@example.com

Fixed width, no containment. The text simply leaves.

Passes
alexandra.fitzgerald@example.com

Same box, a decision about what happens when content is longer than it.

4. AI-design patterns

The category the tool is named for. Not defects exactly — a violet-to-pink gradient is not broken — but tells: the specific defaults that appear so often that a reader recognises the generator before they read the words.

Fires

Supercharge your workflow

AI-powered. Effortless. Beautiful.

Card, inside a card, inside a gradient.

Diagonal violet gradient, centred everything, nested cards, three adjectives and no claim.

Passes

Ship design review with the build

Fifty-nine rules run in CI and return an exit code, so the argument happens before merge.

Left-aligned, one accent, a specific claim. Nothing here is clever — that is the point.

5. Motion brittleness

Motion is where generated UI most often ignores the platform. An infinite animation with no prefers-reduced-motion branch is not a style choice; for some readers it is a reason to close the tab.

Fires

Infinite spin, no reduced-motion branch, no idea how long it will run.

Passes

A static skeleton shaped like the thing that is coming. The first draft of this pane used an infinite sweep; the detector flagged it, and it was right.

6. Design-system violations

The only category that cannot exist until you have written the system down. A rule can check a hex value against a token list; it cannot invent the token list. This is where DESIGN.md stops being documentation and starts being enforcement.

Fires
#2F7A3F #35864A #2E8B57 #3CB371

Four greens that mean "success". None of them is the token.

Passes
--color-success --color-success-bg

Two names. A rule can check names; it cannot guess which of four greens you meant.