# Anti-Slop Gallery A contrastive catalog of AI-generated design fingerprints. Each entry shows the pattern that reads as AI-slop, explains why, and demonstrates a refined alternative that solves the same need with intent. These patterns are not bad in isolation. They are bad because models converge on them by default. Using any one of them is a signal to stop and commit to an aesthetic direction from `aesthetic-directions.md` instead. --- ## 1. Glassmorphism everywhere Frosted-glass cards with `backdrop-filter: blur()` and semi-transparent white fills were a genuine 2020 macOS Big Sur moment. Models now reach for them as decoration on any surface — navbars, modals, stat cards, landing pages — regardless of context. The tell is blur with no foreground to blur against, or blur stacked on blur with no depth logic. It reads as "I don't know what this surface should be, so I made it translucent." ```html

Revenue

This month

$12,480

``` ```html

Revenue / May

$12,480

+18.2% vs April

``` Use backdrop-filter only when a foreground object genuinely occludes a background (a sticky nav over scrolling content, a dialog over a photo). Never as a default surface fill. --- ## 2. Purple-to-blue gradient hero The `from-purple-600 to-blue-600` hero is the single most recognised AI fingerprint of 2023-2025. It pairs with gradient text, a centered CTA, and three feature cards below. It appeared on every generated SaaS mock because it is the default of every starter template. A brand that looks like every other brand has no brand. ```html

Build faster with AI

The platform for modern teams.

``` ```html

Issue 04 / Summer

The kitchen,
slowly.

``` If the design calls for a gradient, use one drawn from the committed palette at low amplitude (within one hue, or between two analogous hues), not the default tailwind purple-blue. --- ## 3. Cyan-on-dark cyber theme `bg-slate-950` with `text-cyan-400` accents and neon glows is the "technical product" reflex. It suggests rigor without earning it. It works exactly once, for a terminal emulator or a dev-ops dashboard that actually shows logs. For a marketing page about a scheduling app, it is costume. ```jsx // slop
SYSTEM ACTIVE

127 ops/sec

``` ```jsx // refined: light palette, real monospace reason (it is a number readout), no glow
Active

127 ops/sec

``` Dark mode is a legitimate choice. Cyan-on-dark with a glow shadow is not a design; it is a reflex. --- ## 4. Rounded icon chip above every heading The 48x48 rounded-square with a Lucide icon and a soft tinted background above every section heading. It is a template artefact. It adds no information, breaks the vertical rhythm, and signals that the author did not know how to differentiate sections any other way. ```html

Fast

Our platform is blazingly fast.

``` ```html
01

Fast, because
nothing reloads.

Pages stream in partial. The scheduler holds state between navigations.

``` If the design genuinely uses iconography, draw custom marks or use a weight-consistent set, and place them where they carry meaning, not as decoration above every `

`. --- ## 5. Hero metric template Three stat cards in a row: big number + small label + small gradient accent bar. Used on every AI-generated dashboard and every landing page that wants to look quantitative. The cards are always identical in size and spacing and always communicate the same weight, which means nothing stands out. Real data has outliers; template data does not. ```html

Users

12.4K

↑ 12.3%

``` ```html
Active subscribers
12,487
Readers who opened at least one issue this quarter.
Churn
0.9%
NPS
72
``` Weight the headline number. Demote the others. Vary column spans. Never grid-3 three equal stat cards. --- ## 6. Identical card grid `grid-cols-3 gap-6` of cards containing an icon, a heading, and two lines of text. The visual equivalent of "Lorem ipsum with extra steps." The sameness of the cards communicates nothing — no hierarchy, no narrative, no reason to read any particular card. ```html

Reliable

99.99% uptime SLA.

``` ```html

The principle

Do the smallest thing that could possibly work, then learn.

Long-form explanation here. Not a two-line summary. This is the card that carries the narrative.

Reliability

99.99% over 18 months.

Support

Response within 12 minutes, measured.

``` If you must grid cards, vary their spans, give one emphasis, and let the others recede. Equal weight is anti-hierarchy. --- ## 7. Gradient text on headlines `bg-gradient-to-r from-X to-Y bg-clip-text text-transparent` on a headline. It robs contrast, fails AA on the lighter stops, and reads as a decorative substitute for typographic confidence. A well-set headline in a single colour is more striking. ```html

The future of work

``` ```html

The future of work,
slower.

``` Colour on a single word — as a foil — carries more weight than a gradient across the whole line. --- ## 8. Sparklines as decoration A 40-pixel-wide SVG line that wiggles, placed in a card because "it looks analytical." The line carries no readable data, no axis, no range, no comparison. It is the chart equivalent of lorem ipsum. ```jsx // slop

Revenue

$48,290

``` ```jsx // refined: either a real chart with axes and comparison, or nothing

Revenue / trailing 12 weeks

$48,290

Median week $3,842. Worst week $1,180 (Feb 14). Best $6,090.

``` If you cannot label the axes, do not draw the chart. Replace it with a sentence. --- ## 9. Drop-shadow on rounded rectangle `rounded-xl shadow-lg` with a white fill and slate border. The default Material-lite card. It is not wrong; it is invisible. Nobody will ever say "I remember that site with the rounded cards and the soft shadow." ```html

Card title

Some content.

``` ```html

Card title

Some content.

Card title

Some content.

``` Either commit to a shadow language (hard offset, or no shadow at all) or remove the container. --- ## 10. "Get Started" + right-arrow CTA Every AI landing page ends with a pill-shaped button reading "Get Started →". It is the single most templated element on the web. The copy says nothing specific to the product, the arrow is a tell, and the pill is a reflex. Replace with a verb that names the actual action. ```html ``` ```html
``` If the button is a pill, it should be a pill because the aesthetic calls for pills (neo-brutalist-playful, soft-pastel). Otherwise match the surrounding geometry. --- ## 11. Monospace everywhere Setting body copy in a monospace font to signal "developer-focused" or "technical." Monospace is for tabular data, code, and deliberately retro aesthetics (retro-futurist, brutalist-raw). Using it for a paragraph reduces reading speed by ~20% and signals costume, not substance. ```html

Our mission

We believe developers deserve better tools. Our platform combines...

``` ```html

Mission / v4

Tools that respect the afternoon.

We build for the last two hours of the day, when energy is low and the bug is still open.

``` Use one monospace family for labels, code, and tabular numerals. Never for body prose. --- ## 12. Center-everything layout Every element centered horizontally, uniform vertical spacing, hero in the middle, three cards in the middle, CTA in the middle. It is the path of least compositional resistance. It cannot express hierarchy because every element gets the same horizontal treatment. Asymmetry is how a page says "read this one first." ```html

Title

Subtitle that restates the title.

``` ```html

Paris / est. 2021

A quarterly for
patient cooks.

Subscribe / €48 year
Issue 04 cover
Issue 04, photograph by M. Lefèvre.
``` Pick one axis of asymmetry per layout. Flush-left body, right-aligned metadata. Weighted hero, lighter asides. Grid breaks where emphasis lives. --- ## How to use this gallery When you catch yourself writing any of these twelve patterns, stop. Open `aesthetic-directions.md`, pick a direction, and let the direction dictate the surface treatment, palette, typography, and composition. The refined column on every entry above is only one possibility — each direction in the catalogue would solve the same need differently. The point is not that glassmorphism or centered layouts are forbidden. The point is that defaulting to them with no commitment underneath is what produces slop.