De Slopify Audit

De-Slopify Audit

A checklist-driven audit to strip AI-slop tells from a site and replace them with premium patterns. Extracted from comparing 12 VC-funded case studies against common AI-generated defaults.

When to invoke

• User says: "it looks like ChatGPT/Claude/v0 generated this"
• Site is ready-to-ship but feels generic
• Pre-launch final review
• Design review comparing against references
• When someone else sent you a "why does this look AI-made?" question

The 17-point audit

Run through each point. For every item marked ❌, apply the fix.

1. Background color

• ❌ Slop: background: #ffffff or background: #f9fafb
• ✅ Fix: Warm off-white #fafafa, #f7f7f5, #f5f2f0, or #fbfaf9
• See: soft-gradient-dreamy skill, Rule 1

2. Primary typeface

• ❌ Slop: font-family: Inter, sans-serif on every element
• ✅ Fix: Distinct display font + neutral body. PP Neue Montreal / Geist / Söhne / Instrument Serif + Inter/Geist body
• See: typography-that-sells, Rule 1

3. Display letter-spacing

• ❌ Slop: h1 { font-size: 64px; } with no letter-spacing
• ✅ Fix: letter-spacing: -0.035em minimum on 48px+ headings; use px (-0.46px) for foundry precision
• See: typography-that-sells, Rule 2

4. Display line-height

• ❌ Slop: line-height: 1.5 on 60px headings
• ✅ Fix: line-height: 1.0-1.1 on display, 1.3-1.5 on body
• See: typography-that-sells, Rule 3

5. Body font-weight

• ❌ Slop: font-weight: 400 or 500 on body
• ✅ Fix: font-weight: 300 body paired with 500-600 display — maximum elegance contrast
• See: typography-that-sells, Rule 4

6. Shadow color

• ❌ Slop: box-shadow: 0 4px 6px rgba(0,0,0,0.1) — neutral black
• ✅ Fix: Tint shadow to match theme. Warm → plum rgba(45,32,50,..) / rose rgba(100,63,63,..). Cool → blue-gray rgba(34,42,53,..). Match to your palette
• See: soft-gradient-dreamy, Rule 2

7. Shadow layering

• ❌ Slop: single-layer shadow-lg Tailwind default
• ✅ Fix: 3-8 layer stack: ring + short contact + medium ambient + long ambient + inset highlights (top & bottom)
• See: soft-gradient-dreamy, Rule 3

8. Hero gradient

• ❌ Slop: linear-gradient(135deg, #667eea, #764ba2) purple→blue diagonal
• ✅ Fix: 3+ stop warm gradient at a specific angle (70°, 78°, 145°, 195°). Copy from Incident/Cohere/AngelList
• See: soft-gradient-dreamy, Rule 4

9. Border radius

• ❌ Slop: rounded-md (8px) on every card, button, input, image
• ✅ Fix: Pick a radius architecture: binary (0/pill), asymmetric interlocking, or per-element variety (pill buttons + 12-20px cards + 2px chips)
• See: spatial-rhythm-and-whitespace, Rule 1

10. Borders

• ❌ Slop: border: 1px solid #e5e7eb
• ✅ Fix: Hairline at 4-10% alpha of theme-tinted dark color. rgba(0,0,0,0.06) minimum, or rgba(12,38,77,0.04) navy-tinted
• See: spatial-rhythm-and-whitespace, Rule 6

11. Section padding

• ❌ Slop: py-12 (48px) or py-16 (64px) on every section
• ✅ Fix: 80-160px vertical section padding. Use py-24 minimum; py-32 for hero; py-40 for editorial
• See: spatial-rhythm-and-whitespace, Rule 2

12. Transition

• ❌ Slop: transition: all 300ms ease-in-out
• ✅ Fix: Named cubic-bezier (cubic-bezier(.215,.61,.355,1) or cubic-bezier(.4,0,.2,1)). Duration per interaction: 75ms press, 200ms hover, 600ms reveal
• See: motion-and-micro-interactions, Rules 1-2

13. Button hover

• ❌ Slop: hover:bg-blue-600 color-only hover
• ✅ Fix: Add :active { transform: scale(0.95); } for press feedback; add shadow delta; orchestrate child translations
• See: motion-and-micro-interactions, Rule 3

14. Card hover

• ❌ Slop: hover:translate-y-[-4px] hover:shadow-xl
• ✅ Fix: Grow the shadow ring weight (8% → 10% alpha) and deepen contact shadows; keep the card stationary
• See: motion-and-micro-interactions, Rule 5

15. Icons

• ❌ Slop: Lucide everything, 2px stroke, defaults
• ✅ Fix: Phosphor (with Bold/Fill weights) OR custom inline SVG OR icon font; 1.5px stroke standard; rounded caps
• See case studies: Outseta (Phosphor), Cohere (icon font), Cal (custom 1.5)

16. Gradient on buttons

• ❌ Slop: Primary button has a gradient background
• ✅ Fix: Flat solid color for button background + rich multi-layer shadow for depth. Gradient lives elsewhere (hero, art plates, text-clip)
• See: Amplemarket, Cal, Cohere — all flat-color buttons with stacked shadows

17. Eyebrow labels

• ❌ Slop: <span class="text-xs uppercase">Features</span>
• ✅ Fix: Monospace font, wider positive tracking (0.1-0.2em), optionally color-muted

.eyebrow {
  font-family: 'Geist Mono', 'Fragment Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

Quick-scan grep commands

Run these against your codebase to find slop patterns:

# Find pure-white backgrounds
grep -rn "background.*#fff\b\|#ffffff\|bg-white\b" --include="*.{css,tsx,jsx,html,vue,svelte}" .

# Find generic ease-in-out 300ms
grep -rn "ease-in-out\|duration-300\|0\.3s ease" --include="*.{css,tsx,jsx}" .

# Find rounded-md monotone
grep -rn "rounded-md\|border-radius:\s*8px" --include="*.{css,tsx,jsx,html}" .

# Find the purple→blue gradient
grep -rn "#667eea\|#764ba2\|from-purple.*to-blue\|from-blue.*to-purple" --include="*.{css,tsx,jsx}" .

# Find single-layer shadows
grep -rn "box-shadow:\s*0 4px 6px\|shadow-md\|shadow-lg" --include="*.{css,tsx,jsx}" .

# Find Inter everywhere
grep -rn "font-family.*Inter\|font-sans" --include="*.{css,tsx,jsx}" . | wc -l

# Find translateY hover cards
grep -rn "hover:.*translate-y\|hover:-translate" --include="*.{css,tsx,jsx}" .

# Find 48/64px section padding
grep -rn "py-12\|py-16\|padding-block:\s*48\|padding-block:\s*64" --include="*.{css,tsx,jsx,html}" .

# Find plain black shadows
grep -rn "rgba(0,\s*0,\s*0," --include="*.{css,tsx,jsx}" .

# Find color-only button hover
grep -rn "hover:bg-\|hover:background" --include="*.{css,tsx,jsx}" .

Audit report template

Run through the site, mark each with ✅ / ⚠️ / ❌:

## De-Slopify Audit: <site-name>

Background:            [ ]   (if ❌: swap #fff → #fafafa/#f7f7f5)
Typeface:              [ ]   (if ❌: display font + body font split)
Display tracking:      [ ]   (if ❌: -0.035em minimum)
Display line-height:   [ ]   (if ❌: ≤1.1 on display)
Body weight:           [ ]   (if ❌: test weight 300)
Shadow tint:           [ ]   (if ❌: tint to theme)
Shadow layering:       [ ]   (if ❌: 3-8 layer stack)
Hero gradient:         [ ]   (if ❌: 3+ stop warm, non-135° angle)
Border radius system:  [ ]   (if ❌: pick architecture)
Border colors:         [ ]   (if ❌: hairline at 4-10% alpha)
Section padding:       [ ]   (if ❌: 80-160px)
Transition easing:     [ ]   (if ❌: named cubic-bezier)
Transition duration:   [ ]   (if ❌: per-interaction durations)
Button hover:          [ ]   (if ❌: add :active scale, child orchestration)
Card hover:            [ ]   (if ❌: shadow growth, no translateY)
Icon style:            [ ]   (if ❌: 1.5px stroke, not Lucide defaults)
Button background:     [ ]   (if ❌: flat color + rich shadow)
Eyebrow labels:        [ ]   (if ❌: mono + wide tracking)

Score: X / 18

The 5 most damaging AI tells (fix these first)

If you can only fix 5 things, fix these — they move the design from "AI" to "designed":

1. Background color — swap #fff → #fafafa/#f7f7f5 (60 seconds, massive impact)
2. Display font — add ONE distinctive typeface for headings
3. Tracking + line-height on h1/h2 — -0.035em / line-height: 1.0 (huge perception shift)
4. Shadow tint + layering — drop in a 5-layer tinted shadow system
5. Button :active state — add scale(0.95) press feedback

Before/after snippets

Before (AI slop)

body { background: #ffffff; font-family: Inter, sans-serif; color: #333; }
h1 { font-size: 60px; font-weight: 700; }
.btn { background: #3b82f6; color: white; padding: 12px 24px; border-radius: 8px;
       transition: all 0.3s ease-in-out; }
.btn:hover { background: #2563eb; }
.card { background: white; border: 1px solid #e5e7eb; border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 24px; }
.hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 64px 0; }

After (de-slopified)

body {
  background: #f7f7f5;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 300;
  color: #222221;
}
h1 {
  font-family: 'PP Neue Montreal', 'Söhne', system-ui, sans-serif;
  font-size: clamp(3rem, 2rem + 5vw, 4.5rem);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.035em;
}
.btn {
  background: #222221;
  color: #fff;
  padding: 12px 20px 13px 24px;
  border-radius: 9999px;
  font-weight: 500;
  box-shadow:
    0 1px 2px rgba(45,32,50,0.05),
    inset 0 10px 24px -10px rgba(255,255,255,0.4);
  transition: all 75ms ease-in;
}
.btn:hover  { transition-duration: 200ms; }
.btn:active { transform: scale(0.97); box-shadow: 0 1px 2px rgba(45,32,50,0.05); }
.card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow:
    0 0 0 1px rgba(45,32,50,0.06),
    0 2px 6px -2px rgba(45,32,50,0.08),
    0 16px 40px -8px rgba(45,32,50,0.06),
    inset 0 .5px .5px rgba(255,255,255,0.4);
  transition: box-shadow 200ms cubic-bezier(.4,0,.2,1);
}
.card:hover { box-shadow:
    0 0 0 1px rgba(45,32,50,0.10),
    0 4px 12px -2px rgba(45,32,50,0.10),
    0 24px 56px -12px rgba(45,32,50,0.10),
    inset 0 .5px .5px rgba(255,255,255,0.4); }
.hero {
  background:
    linear-gradient(180deg, rgba(224,246,255,0.1) 0%, transparent 25%,
                            transparent 90%, rgba(224,246,255,0.1) 100%),
    #f7f7f5;
  padding-block: 140px 96px;
}

Related skills

After running this audit, escalate to:

• typography-that-sells for deep type work
• soft-gradient-dreamy for shadow/gradient systems
• motion-and-micro-interactions for animation
• spatial-rhythm-and-whitespace for layout
• add-signature-moment once the baseline is polished