132 lines
5.8 KiB
Markdown
132 lines
5.8 KiB
Markdown
# 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 |