Blog Post
15 AI Design Slop Patterns (and the Bugs Hiding Behind Each One)
By OverlayQA Team. Published: June 5, 2026
Quick answer: AI design slop is the set of visual patterns that identify a website or app as AI-generated. A Developers Digest study analyzed 500 Show HN landing pages with Playwright and found 67% triggered two or more of 15 telltale patterns, including Inter font everywhere, lavender-purple accents, identical card grids, and failing WCAG contrast. Each surface pattern predicts functional bugs underneath: broken responsive layouts, missing hover and focus states, hardcoded CSS values, and accessibility violations.
The Slop Score: How the 500 Show HN Study Works
Adrian Krebs ran a Playwright-based scanner against 500 recent Show HN submissions. Fifteen deterministic CSS and DOM checks with no LLM evaluation. 21% triggered five or more patterns (heavy slop), 46% triggered two to four (mild slop), and only 33% came out clean.
Typography Tells
#1 Inter Everywhere
Inter used for headlines, body text, labels, and buttons with no secondary typeface. The default font in shadcn/ui, the component library most AI tools reach for first. When a site uses Inter for everything, the AI almost certainly pulled the entire shadcn default stack with hardcoded spacing tokens and fixed breakpoints.
#2 Accent Serif Italics
A single word in the headline rendered in Space Grotesk, Instrument Serif, or Geist Serif italic. The rest stays in default sans-serif. The italic accent loads a second font family for one word, causing FOUT on slow connections because the AI copied the visual pattern without implementing font-display or preload hints.
Color Tells
#3 VibeCode Purple
A specific shade of lavender-purple as the primary accent on buttons, links, badges, and gradient endpoints. The purple is a single hardcoded hex value, not a design token. Dark mode variants and hover states either reference the same value or skip the variant entirely. Purple-on-dark-grey combinations frequently fail WCAG AA contrast ratios.
#4 Dark Mode by Default
Permanent dark mode with no light mode toggle. Dark grey backgrounds with medium-grey body text. AI tools default to dark mode because the training data skews toward developer-facing pages. Permanent dark mode without a corresponding light mode usually means the color system has no semantic token layer.
#5 Failing Contrast
Medium-grey body text on dark backgrounds. WCAG AA requires a 4.5:1 contrast ratio for normal text. AI-generated dark themes routinely fail this. Users with low vision or non-retina displays cannot read secondary text. This is a legal compliance issue under ADA Title II, the European Accessibility Act, and Section 508.
#6 Gradient Overload
Gradient overlays on hero sections, cards, and buttons. Gradients behind text create contrast inconsistencies: text might pass WCAG at one end and fail at the other. AI tools do not test contrast at multiple points along a gradient.
#7 Colored Glows
Large colored box-shadows and glow effects around cards and buttons. These are GPU-intensive. A page with ten cards each carrying a 30px colored glow triggers paint operations on scroll that degrade performance on mobile devices.
Layout Tells
#8 Centered Hero Formula
A centered headline, subheadline, and two side-by-side buttons. AI tools generate this for a desktop breakpoint and apply minimal responsive adjustments. On tablets the headline wraps awkwardly. On mobile the two buttons overflow or stack without enough tap target spacing. AI-generated apps average approximately 160 issues per app, and layout breakdowns at non-standard viewports are the largest category.
#9 Badge Above the H1
A small pill-shaped badge positioned above the hero headline. The badge is typically a span without semantic meaning. Screen readers announce it as unlabeled text before the headline, confusing the page hierarchy.
#10 Colored Left Borders
A 3-4px colored stripe on the left edge of cards. In a real design system, different border colors communicate different states. AI-generated left borders use the same color on every card. The visual language is decorative, not semantic.
#11 Identical Icon Cards
Three or four feature cards in a row with identical height, padding, and border radius. Real content varies in length. AI generates fixed-height cards, so longer content either truncates or overflows. Icons are picked by keyword matching without checking whether they communicate the feature accessibly.
#12 Numbered Step Sequences
A "How it works" section with three numbered steps. The steps are rendered as styled divs, not an ordered list. Screen readers do not announce the sequence order. Connecting lines between steps disappear or misalign on mobile.
#13 Stat Banners
A row of three or four statistics evenly spaced across the width. On mobile, they wrap into a grid with uneven gaps, numbers touching edges, and labels wrapping mid-word. AI generates the desktop layout and applies flex-wrap without testing the wrapped state.
#14 Emoji Sidebar
Sidebar navigation with emoji icons. Emoji rendering varies across operating systems. The sidebar looks polished on macOS and broken on Windows. Screen readers announce emoji literally, creating confusing navigation.
#15 All-Caps Section Labels
Section headings in all caps with wide letter-spacing. All-caps text is harder to read because readers lose word-shape cues. For dyslexic users, all-caps text is a significant readability barrier. Labels typically sit above an H2 visually but are implemented as a span, confusing the document outline.
Why AI Produces These Patterns
Three forces converge: training data convergence (models train on the same corpus of landing pages), shadcn/ui and Tailwind defaults (the component library AI tools reach for first), and no design system context (AI generates code that compiles but does not have access to your tokens, responsive requirements, or interaction states).
How to Audit for AI Design Slop
Score the page against all 15 patterns. 0-1 is clean. 2-4 is mild slop requiring an audit of contrast, responsiveness, and interaction states. 5+ is heavy slop requiring a full design review. OverlayQA runs accessibility audits, design token checks, and AI-powered visual analysis against any URL. Install the Chrome extension and audit the next vibe-coded prototype before it ships.
Frequently Asked Questions
What is AI design slop?
AI design slop is the set of recurring visual patterns that identify a website or app as AI-generated. A Developers Digest study analyzed 500 Show HN landing pages with Playwright and identified 15 specific CSS and DOM patterns that appear in 67% of AI-generated sites.
How do you tell if a website was designed by AI?
Score the site against the 15 AI design slop patterns: Inter font everywhere, accent serif italic, lavender-purple accents, permanent dark mode, failing contrast, gradient overload, colored glows, centered hero formula, badge above the H1, colored left borders, identical icon cards, numbered step sequences, stat banners, emoji sidebar, and all-caps section labels. A site triggering five or more is almost certainly AI-generated.
Are AI design slop patterns only visual problems?
No. Each surface pattern predicts functional bugs underneath. Failing contrast violates WCAG accessibility standards. Identical card heights cause content overflow. Stat banners break at mobile viewports. Emoji icons render differently across operating systems.
Can you fix AI design slop without rebuilding the site?
Yes, for most patterns. Replace Inter with a custom typeface. Swap hardcoded hex values for CSS custom properties. Add prefers-color-scheme support. Fix contrast ratios. Implement hover, focus, and disabled states. Replace emoji with SVG icons. A structured QA pass identifies what to fix in priority order.