# Anti-Slop Reference

Every item here is a pattern that immediately reads as "AI-generated template" to any trained design eye. If you output any of these, you have produced slop.

## Banned layouts

1. **Centered hero + gradient blob** — a centered H1 with a softly glowing purple/blue radial gradient behind it, a centered subtitle, and a centered pill button. This is the single most common slop signature. Reject at the first draft.
2. **3-card pricing grid** (Free / Pro / Enterprise in three equal cards with checkmarks). Unless the product is genuinely a comparison shopping page, this pattern reads as a SaaS template.
3. **Feature-icon strip** — 3-column layout with a small icon (Lucide, Heroicons, emoji), bold headline (`"Fast."`), one-line subtitle. Every landing-page tutorial uses it.
4. **Testimonial carousel** with rounded avatars and 5-star ratings. Instant credibility theater.
5. **"Trusted by" logo row** — grey logos of companies in a horizontal line. Everyone does this.
6. **Giant centered headline over a blurred stock photo** of an office scene.
7. **"Solutions / Products / Resources / Company" mega-nav** with exactly that vocabulary.
8. **Dark mode toggle in the upper-right corner** as the only personality of the page.
9. **Footer with 5 equal columns** labeled Company / Product / Resources / Legal / Connect.
10. **Stats block**: "10k users · 99.9% uptime · 50+ countries" set on a dark strip.
11. **Signup form with the email input and a pill button immediately beneath the hero.**
12. **"Built with [tech stack logos]" badge row.**

## Banned typography choices

- **Inter** — ubiquitous default. Never.
- **Roboto** — Android default. Never.
- **Arial / Helvetica** (system) — lazy. Never.
- **Open Sans** — overused free sans. Never.
- **Montserrat** — overused free display. Avoid.
- **Space Grotesk** — now template-pattern for AI output. Avoid.

## Recommended distinctive font families (use these instead)

Vary across projects — never use the same pair twice in a row.

**Display / headings:**
- **Fraunces** — variable serif with optical sizing + SOFT + WONK axes
- **Bricolage Grotesque** — variable grotesk with grade axis
- **Instrument Serif** — elegant display serif
- **Funnel Display** — modern condensed display
- **Host Grotesk** — characterful grotesk
- **Archivo** — variable condensed
- **Anton** — ultra-condensed display
- **Big Shoulders Display** — condensed editorial display
- **Fraunces italic** specifically for editorial work (but not for every project)

**Body / text:**
- **Instrument Sans** — clean, characterful sans
- **Host Grotesk** (body weights)
- **DM Sans** (acceptable if paired carefully)
- **Manrope** (body weights)
- **Bricolage Grotesque** (text weights)

**Mono:**
- **IBM Plex Mono** — technical, strong character
- **Space Mono** — retro-tech scanner feel
- **JetBrains Mono** — developer-tech
- **Martian Mono** — distinctive technical

**Pairing rule:** one display family + one text family + optionally one mono. Match the pairing to domain register.

## Banned color schemes

- **Purple gradient on white** — instant slop
- **Blue #1a73e8 on white** — Google template
- **Uniform pastel palette** — cookie-cutter "friendly startup"
- **Pure black (#000) on pure white (#fff)** — lazy. Use off-black `#0E0D0C` to `#121110`.
- **Single neutral with one bright accent everywhere** — generic
- **Generic dark mode** with rgba(255,255,255,0.1) borders on #0a0a0a background

## Banned copy patterns

- "Get Started Free"
- "Start your 14-day free trial"
- "Join the waitlist"
- "Learn more" (as button label — say what they'll learn)
- "Built for modern teams"
- "We help X do Y faster"
- "Trusted by thousands of..."
- "The all-in-one platform for..."
- "Ship faster, build better"
- Lorem ipsum shipped in production
- Emoji in UI text (🚀, ⚡, ✨)

## Banned motion patterns

- `transition: all 0.3s ease` — lazy default
- `transition-timing-function: linear` (unless it's a scroll-linked effect that MUST be linear)
- Page-load fade-in with identical 300ms delay on every element
- Magnetic cursor on everything (Awwwards-2019 gimmick)
- Parallax that makes text float and breaks readability

## Banned structural patterns

- Uniform border-radius across every element (4px everywhere, 8px everywhere, etc.) — vary intentionally or use sharp corners
- Drop shadow on every card at the same elevation — use a real shadow vocabulary or no shadows
- All sections same height + same padding — break the rhythm
- Every interactive element is a rounded pill button — vary action hierarchy

## How to recognize slop in your own output

If after generating, you look at it and think:
- "It looks fine, I guess"
- "It's clean"
- "It's modern"
- "It's minimal"

That is the sensation of slop. A good design evokes something specific: *editorial*, *industrial*, *hostile*, *cinematic*, *warm*, *luxurious*, *raw*, *precise*. If you can't name its register in a single specific word, you've produced slop.

## The test

Before shipping, imagine the page as one of 50 tabs open in a design reviewer's browser. If it would be visually indistinguishable from the other 49 v0.dev / Tailwind UI / Lovable outputs, you have slop. Restart.
