Detecting AI Slop Design
Scan the interface for these top offenders, in order of visibility:
- Purple-to-blue (or pink-to-purple) gradient backgrounds/buttons
- Emoji used as icons (🚀 ✨ 🎯 💡) instead of a real icon set
- Everything has a rounded corner — cards, buttons, inputs, all at
border-radius: 12-16px - Generic soft drop-shadows on every card (
box-shadow: 0 4px 6px rgba(0,0,0,0.1)) - Centered hero with giant bold gradient-text headline + subhead + two pill buttons
- Inter/system-ui font with no typographic personality
- Glassmorphism/backdrop-blur applied with no functional reason
If 3+ of these appear together, the design reads as "AI slop" — flag it and redesign using the system below.
Progress:
- Step 1: Audit — list every slop signal found, with location (component/file)
- Step 2: Diagnose root cause — usually unexamined defaults from a UI kit or copy-pasted AI output
- Step 3: Pick a deliberate direction — choose ONE distinct personality (not "modern," pick e.g. "brutalist editorial," "dense terminal-inspired," "warm print")
- Step 4: Replace signals one-by-one using the design system below
- Step 5: Verify — show before/after, confirm no slop signals remain, confirm visual cohesion
Step 3 detail: pick a real direction
Instead of "clean and modern," choose from concrete references:
- Editorial/print: serif headlines, generous margins, rule lines, limited palette
- Terminal/technical: monospace, tight line-height, high information density, minimal color
- Brutalist: hard edges, visible grid, stark black/white, unexpected type scale jumps
- Tactile/physical: paper textures, subtle grain, warm neutrals, real shadows (directional, not ambient)
| Slop pattern | Replacement |
|---|---|
| Purple-blue gradient | Flat, intentional brand color (one hue, used sparingly) or a true duotone drawn from brand palette |
| Emoji icons | Licensed icon set (Lucide, Phosphor, custom SVG) sized/weighted to match type |
| Uniform 12-16px radius everywhere | Pick radius per component role: 0 or 2px for structural elements, larger radius only for interactive pill/tag elements — not both on everything |
| Ambient soft shadow on all cards | Use borders or flat color blocks for separation; reserve shadow for true elevation (modals, dropdowns) with a sharper, directional shadow |
| Centered gradient-text hero | Asymmetric layout, real typographic hierarchy, headline in a distinctive typeface (not default sans) |
| Inter/system-ui everywhere | Pair a distinctive display face for headlines with a workmanlike body face; avoid default unless paired with strong layout |
| Glassmorphism everywhere | Use blur only when content genuinely overlaps/scrolls behind it (e.g. sticky nav over content) |
| Two pill CTA buttons side by side | One clear primary action; de-emphasize secondary as text link or outline, not a second pill |
Example 1: Input: A landing page with a purple-to-pink gradient hero, "🚀 Launch Faster" headline, three feature cards with soft shadows and rounded-xl corners, Inter font throughout. Output: Flag signals (gradient hero, emoji-as-icon, uniform shadow+radius, generic font). Redirect to e.g. an editorial direction: serif headline "Launch Faster" in charcoal on off-white, Lucide rocket icon, feature list laid out as a bordered table instead of shadowed cards, body text in a workhorse sans paired with the serif.
Example 2: Input: A SaaS dashboard pricing page with two glassmorphic pricing cards, blue-purple gradient borders, and checkmark emoji (✅) for feature lists. Output: Flag glassmorphism-with-no-purpose, gradient border, emoji checkmarks. Replace with flat white/dark cards with a single 1px border, a real check icon from an icon set, and a solid brand-color highlight only on the recommended plan (not both cards gradiented).
- Choose constraints before touching color/shadow/radius — pick the direction first, then apply consistently.
- Limit palette to 1 primary hue + neutrals; avoid multi-stop gradients as a default choice.
- Vary border-radius intentionally by component role, not globally via a design-token default.
- Use real icon sets, never emoji, in production UI.
- Reserve shadows for actual elevation (floating/overlapping elements), use borders for flat separation.
- Make one button on a screen loudest; everything else recedes.
- Swapping purple-blue for a different two-color gradient — still slop, just recolored.
- "De-slopping" only the hero and leaving cards/buttons with the same generic shadow/radius defaults.
- Picking a direction that's still generically "clean/modern" rather than something with an actual point of view.
- Keeping emoji but making them smaller — remove them entirely from functional UI.
- Adding blur/glass effects decoratively without a layering reason.