Anti-Slop Design Patterns

60 gates + pre-emit self-critique — derived from Hallmark's slop-test methodology, adapted for design asset generation.

Run this checklist before handing back any output. Every answer must be no.

Pre-emit Self-Critique (6 axes)

Score the planned output 1–5 on each axis. Anything < 3 triggers a revision pass.

#	Axis	What you're scoring
A	Philosophy	Is there a clear why — a position the design is taking? Or is it just decoration?
B	Hierarchy	Can a viewer tell, in 2 seconds, what's primary, secondary, tertiary?
C	Execution	Are the details (weights, colors, spacing, focus) all intentional?
D	Specificity	Does this look like this brief — or does it look generic?
E	Restraint	Have you removed everything that isn't earning its place?
F	Variety	Does this share a structural fingerprint with a previous output?

Record the scores: /* Design · pre-emit critique: P5 H4 E5 S4 R5 V5 */

Is the display font Inter, Roboto, Open Sans, Poppins, Lato, or a system default?
Is there a purple-to-blue (or cyan-to-magenta) gradient anywhere?
Is there a 3-equal-column card grid with icon-above-heading tiles?
Is any card nested inside another card?
Is there a background-clip: text gradient headline? (Never allowed.)
Is any card using a thick colored left/right side-stripe border?
Is the hero min-height: 100vh with everything centered? (Allowed only for atmospheric/poster)
Is pure #000 or pure #fff used as a base color? (Modern-minimal allows #fff paper.)

Do any neutral colors have oklch(... 0 ...) (zero chroma)? Tint toward anchor hue (min 0.005 chroma). Exception: modern-minimal allows zero-chroma neutrals.
Does the accent color cover more than ~5% of the design area? Accent is for emphasis, not filling.
Are more than 3 colors used in the system? Visual noise.
Is purple gradient on white used anywhere? Immediate AI signal.
Is navy + gold used? Overused corporate cliché.

Does the design use more than 3 distinct font families?
Is the outlier face used in more than 2 places? (Outlier = wordmark/stat/pull-quote only.)
Is gradient text used anywhere? (Banned — use solid color instead.)
Is body text smaller than 10px? (Unreadable.)
Are more than 2 fonts loaded unnecessarily? Performance + cognitive load.

Does the design horizontally scroll at any viewport width? Fix with overflow-x: clip.
Are interactive elements smaller than 44×44px at mobile? WCAG AA minimum.
Is padding/margin/gap a value that isn't on the spacing scale? Arbitrary values are slop.
Do text containers exceed 75ch or fall below 45ch? Measure must be readable.
Is display type using clamp() that creates text too small on mobile? Test 320px minimum.

Does every interactive element have :hover, :focus-visible, :active, AND :disabled styling?
Is the focus ring built from border instead of outline? Must use outline: 2px solid.
Is the disabled state signaled by only opacity: 0.5? Needs cursor: not-allowed AND aria-disabled.
Does the helper text container collapse when empty? Must reserve min-height: 1lh.
Does any input change border-width between states? Must stay 1px throughout.

Does any body text have contrast below 4.5:1? (WCAG AA minimum)
Does any large text (≥24px regular or ≥18px bold) have contrast below 3:1?
Does any button have color ≈ background-color? Check within 5% lightness + 0.05 chroma.
When --accent is used as a fill, is --accent-ink defined AND used for text on that fill?
Does any dark section carry text using the page-default color? Must swap to light text.

Centered-everything hero — title, subtitle, CTA all stacked centered. Pick at most 2 centered; break alignment for others.
3-feature equal columns — icon above heading above two-line body, gapped 24px. Use asymmetric grid instead.
AI-generated aesthetic — drop shadows on text, gradients on white, rounded everything, purple-blue palettes.
Corporate cliché — navy + gold, "trusted by 10,000+ teams", generic testimonials.
Fabricated metrics — invented statistics ("+47% conversion"). Use real numbers or placeholders.
Placeholder names — "Jane Doe / John Smith" in testimonials. Use plausible names or skip.
Icon set mixing — Material + Heroicons + Lucide on same page. Pick one.
Uniform hover scale — scale(1.05) on everything. Vary or skip.
Transition-all — specify exact properties instead.
Bouncy easings on UI state changes — cubic-bezier(0.34, 1.56) on buttons/modals is wrong.

Add at the top of every output file:

/* Design · pre-emit critique: P5 H4 E5 S4 R5 V5 */
/* Design · gates: pass (1-45) · contrast: pass (31-35) */

A design passes if a designer would not be embarrassed to hand it to a client.

Concretely: