# 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 */`

---

## Visual Gates (1–8)

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

---

## Structural Gates (9–10)

9. Does the design use the *same* structure as the last output you made?
10. Are elements separated only by equal whitespace, with no rule, no color shift?

---

## Color Gates (11–15)

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

---

## Typography Gates (16–20)

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

---

## Layout Gates (21–25)

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

---

## State Gates (26–30)

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

---

## Contrast Gates (31–35)

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

---

## Common Slop Patterns (36–45)

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

---

## Output Stamps

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) */
```

---

## Quality Bar

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

Concretely:
- Design has a clear visual identity that is not "generic AI output"
- Text is readable at intended viewing distance
- Every element belongs to the same design system
- No element bleeds off the edge or overlaps another
- Accent color appears fewer than 8 times per page/screen average
- No gradient text, no purple-blue palette, no centered-everything hero