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.

Sailop pins AI slop to 7 measurable dimensions, each with its own detection rules. 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. We measured the exact frequency 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.

Sailop scores layout originality through:

• 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-2xl shadow-md, a button with bg-blue-500 hover:bg-blue-600, a badge with inline-flex items-center rounded-full, a modal with backdrop-blur-md. If those class strings look familiar, that's the point — they're shadcn/ui defaults, untouched, on roughly half the new web.

Sailop detects component homogeneity by checking:

• 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
  ,
• 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.

Sailop checks:

• 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

How Sailop Scores These Dimensions

Each dimension feeds a 0-100 DNA score. 0 means fully unique. 100 means maximally generic. Most AI output lands between 60 and 85.

npx sailop scan ./src
# Output:
# DNA Score: 72/100 (Grade D)
# Color:      81  - blue-500 primary, pure white bg
# Typography: 68  - Inter only, no serif pairing
# Layout:     75  - grid-cols-3, centered hero
# Animation:  90  - transition-all duration-300 everywhere
# Components: 65  - rounded-2xl shadow-md cards
# Structure:  58  - standard section ordering
# Spacing:    67  - strict 4px grid

Animation scores worst here because transition-all duration-300 is the single most copy-pasted line in AI frontends. Color is close behind for the same reason: there's one obvious default and the model takes it.

Breaking Free

Naming the 7 dimensions is step one. For the full detection-and-prevention workflow, read the complete guide to anti-AI design in 2026. Step two is measuring your own code. Run npx sailop scan on any project for a DNA score with the dimension breakdown above.

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.

Try Sailop free at sailop.com and see where your code falls on the slop spectrum.