What is AI Slop? The 7 Dimensions of Generic Design

Open the last three landing pages an AI built for you side by side. The primary button is bg-blue-500. The body font is Inter. The features section is grid-cols-3 gap-8. Hover anything and it does transition-all duration-300. Three different products, three different prompts, one visual DNA. That sameness has a name: AI slop. And it's not one thing. It's seven.

What AI Slop Actually Means

AI slop is the visual homogeneity that emerges when language models generate frontend code. It's not about quality in the old sense. The code works. It's valid HTML, valid CSS, perfectly functional React. The problem runs deeper: every model reaches for the same defaults, the same patterns, the same aesthetic. The result is a web where thousands of sites look like siblings.

The word "slop" is precise. The output isn't broken. It isn't ugly. It's just generic. Gas station coffee. Technically coffee, functionally adequate, and you'd never mistake it for something made with intention.

AI slop splits into 7 dimensions, each with rules you can check. For the full catalog behind these, see the definitive list of 90+ AI design patterns to avoid. Here's every dimension.

Dimension 1: Color

Models love blue. Specifically blue-500 (#3b82f6) sliding into indigo-600 (#4f46e5): HSL hue 200 to 270. Ask Cursor, v0, or Lovable to build a landing page ten times and count the blue primaries. The number will depress you. Why it happens is traced in why every AI-generated website looks the same.

Beyond the hue, AI palettes are mechanical. Pure black (#000000) on pure white (#ffffff). No warm tint, no hue-shifted neutrals. The background is #fff or slate-50, never a warm off-white like #f5f0eb or a true zinc with a degree of hue in it.

Detection signals:

• Primary color hue between 200 and 290
• Background is pure #fff or #000
• No HSL variation across the neutral ramp
• Accent colors pulled straight from Tailwind's default scale

Dimension 2: Typography

Inter. That's it. That's the dimension.

Okay, there's more: we wrote a whole piece on why Inter is killing your brand. Models default to Inter, then system-ui, then no font declaration at all (Geist is the new runner-up). They never pair a serif display face with a humanist sans body. They never set negative tracking on headings. They never reach for text-wrap: balance.

The typography dimension measures:

• Font-family diversity (a serif + sans pairing scores higher)
• Heading weight distribution (AI sets font-weight: 700 on everything)
• Line-height variation (1.5 everywhere, never 1.1 on headings and 1.65 on body)
• Letter-spacing intentionality (tracking-tight is a choice; the default isn't)

Dimension 3: Layout

Three columns. Every time. grid-cols-3 gap-4. Models have internalized Tailwind's grid so deeply they can't picture an alternative. The hero is centered. The features are a 3-up grid. The footer is a 4-column grid. We took apart the worst offender in the card-grid problem: why 3 identical cards kill conversion.

Layout originality shows in:

• Grid-template diversity (grid-template-columns: 5fr 3fr beats repeat(3, 1fr))
• Asymmetric layouts (content-to-sidebar ratios that aren't 50/50)
• Section-padding variation (AI uses identical top and bottom padding on every section)
• Max-width choices (max-w-7xl everywhere, never a deliberate value like 1080px)

Dimension 4: Animation

transition-all duration-300 ease-in-out. That is the AI animation. Every element, every interaction, the same easing, the same 300ms, the same property soup. transition-all alone is a tell: it animates layout properties no one intended to move.

Real motion uses:

• Custom curves like cubic-bezier(0.22, 1, 0.36, 1) instead of the four built-in keywords
• Different durations per property (color at 150ms, transform at 400ms)
• Springy easing: overshoot and settle, not linear ramps
• A prefers-reduced-motion query, which AI almost never writes

Dimension 5: Components

The AI component kit: a card with rounded-xl border shadow-sm, a button with bg-blue-500 hover:bg-blue-600, a badge with inline-flex items-center rounded-full, a modal over a backdrop-blur-md overlay. If those class strings look familiar, that's the point: the card and the badge are shadcn/ui defaults, the blue and the blur are what models add on top, and the mix is all over the new web.

Component homogeneity shows in:

• Border-radius values (rounded-2xl on everything vs. a varied scale)
• Shadow patterns (shadow-md vs. a hand-tuned box-shadow)
• Button-styling diversity
• Card-structure predictability (icon, heading, two lines of text, repeat)

Dimension 6: Structure

AI pages follow one template: Navbar > Hero > Features > Testimonials > CTA > Footer. Always in that order. The HTML is flat, predictable, and interchangeable between any two AI sites: swap the copy and you can't tell them apart.

Structure detection covers:

• Section-ordering predictability
• Nesting depth and complexity
• Semantic HTML (AI rarely reaches for <article>, <aside>, <figure>)
• Content hierarchy beyond the obvious six-section spine

Dimension 7: Spacing

The subtlest one. AI uses Tailwind's 4px grid exclusively: p-4, p-8, p-12. Every value is a multiple of 4. Intentional design breaks the grid on purpose (5px, 14px, 22px), values that build rhythm through irregularity. A layout where every gap divides cleanly by 8 has a machine's fingerprints on it.

What to check:

• Whether spacing snaps to a strict 4/8px grid (uniformity is penalized)
• Padding variation between sections
• Gap consistency vs. deliberate variation
• Hero-padding to content-padding ratios

Checking a page

The free web scan covers part of these dimensions on a live page: color (the blue family and the gradient), typography (Inter or Geist), layout (the three-card row), motion (fade-up on scroll) and components (frosted glass, shadow cards, stock button copy). Each signature it finds comes with the text it matched. It is a checklist of defaults, not a grade on taste.

Breaking Free

Naming the 7 dimensions is step one. Step two is checking your own pages against them.

The goal isn't weird for weird's sake. It's intentional. Every design decision should be a decision, not a default: a hue you picked, a curve you tuned, a radius you chose. That's the line between craft and slop. Next, learn to detect AI-generated code in 30 seconds with the same signals.

Check a live page at sailop.com/scan.

Revision note

Updated 18 October 2026. Removed a claim that we had "measured the exact frequency" of blue primaries and a "roughly half the new web" figure. Corrected the shadcn/ui Card classes (rounded-xl border shadow-sm).