Why every AI-built site has the same purple gradient

You've scrolled past it a hundred times without registering it: a hero section fading from indigo to violet, corner to corner, behind a headline set in a typeface nobody chose on purpose. Give Product Hunt five minutes and you'll hit it on a project management tool, an AI wrapper, a dev tool, and a newsletter platform. Four products with nothing in common except how they got built.

Where the palette actually comes from

It isn't a coincidence, and it isn't really a trend either. Tailwind CSS ships a default color scale, and indigo-500 through purple-600 sit a couple of clicks from the demo swatches in every Tailwind tutorial ever screen-recorded: #6366f1, #818cf8, #a78bfa, #8b5cf6, #7c3aed, #a855f7, #9333ea, #c084fc, #d946ef. Those aren't a description of a vibe. They're a list of literal hex values, the kind a detector can grep for.

Product marketing reinforced it from the other direction. Notion, Vercel, and Linear-era marketing sites all standardized on the same family, and that taught a generation of designers, and later the models trained on their output, that this is what innovative software looks like. Tooling defaults and inherited taste ended up pointing at the same handful of hex codes.

Why it keeps showing up in generated pages

When a generator has to fill a hero section in one pass, it reaches for whatever sits at the top of its training distribution. For "modern SaaS gradient," that's this exact palette. Our violet-gradient detector looks for two or more hits: Tailwind utility classes (from-indigo-500, via-purple-600, to-violet-500 and neighbours) or the raw hex codes written straight into CSS. The two-hit threshold matters because one stray class is nothing (plenty of hand-built sites use indigo too), but two or more in the same gradient stack stops being an accident.

What it's worth in the score, and what it isn't

On this site that pattern is a 15-point aesthetic signal, one of the heavier tells in its category. But aesthetic is also the category craft damps hardest: a page with real self-hosted fonts, actual ARIA, and a defined token layer gets to claim less from the gradient than one with none of that, because deliberate craft elsewhere is evidence someone was making choices instead of accepting defaults.

Looks are the weakest evidence in the whole set. Anyone can reach for a gradient on purpose, which is why craft damps this entire category.

So finding this gradient doesn't mean the page is bad, and it doesn't prove it was generated end to end. It means the palette was inherited rather than decided. That's a narrower claim than "this whole page is AI slop," and plenty of good products are still guilty of it. Most teams spend their attention budget somewhere other than the hero background.

How to actually fix it

• Grep your CSS or Tailwind config for the hex codes above (6366f1, 818cf8, a78bfa, 8b5cf6, 7c3aed, a855f7, 9333ea, c084fc, d946ef). Two or more hits is the exact threshold this detector fires on.
• Pick one accent that comes from your product or brand, not the framework default, and define it as a single CSS variable or design token.
• Reuse that token elsewhere on the page too: buttons, links, focus states. That's what makes it read as a decision, not a color that only exists in one gradient nobody revisited.
• If you like purple, keep purple. The fix isn't the hue, it's choosing it on purpose and using it more than once.