Open three tabs of AI-generated landing pages. Any three. I guarantee at least two of them have a purple gradient, Inter font, rounded cards with subtle shadows, and three feature boxes with icons arranged in a grid. Its gotten so predictable that theres a name for it now: the Purple Problem.
And the wildest part? We know exactly why it happens.
The Origin: One Color in a Demo
In August 2025, Adam Wathan, the creator of Tailwind CSS, posted a semi-apologetic tweet that got over a million views. The gist: he was sorry for making every button in Tailwind UI use bg-indigo-500 five years ago, because now every AI-generated interface on earth is purple.
He picked indigo as the default accent color for Tailwind UI components. Not because it was the best color for buttons. Not because of some deep design philosophy. It was just a neutral, inoffensive placeholder that worked well in demos. Sits between blue and purple, decent contrast with white text, doesnt clash with much. A perfectly reasonable default.
The problem is what happened next.
How One Default Became the Internet's Color Palette
Tailwind CSS became the most popular utility framework on the web. Thousands of tutorials, starter templates, open-source projects, and YouTube walkthroughs used Tailwind UI components directly. And those components all had bg-indigo-500 buttons, text-indigo-600 headings, and from-indigo-500 to-purple-600 gradients.
This created an enormous volume of code on GitHub, Stack Overflow, blog posts, and documentation sites that all used the same colors. Not because developers loved purple. Because the defaults were purple and most people never changed them.
Then LLMs ate the internet.
When you train a language model on billions of tokens of web code scraped between 2019 and 2024, and a disproportionate amount of that code uses bg-indigo-500, the model learns a statistical truth: purple buttons are what web buttons look like. Its not a preference. Its a probability distribution.
The Feedback Loop That Made It Worse
Heres where it gets really interesting. Once AI tools started generating purple websites, those websites went live on the actual internet. Real deployed sites, real code in real repos.
Which means the next generation of training data now contains even more purple websites. The AI trained on AI output. The distribution shifted further toward indigo. And the cycle repeats.
This is the same pattern as any training data feedback loop: the model amplifies whatever biases exist in its training set, and then its output becomes part of the next training set.
Its Not Just the Color
The purple thing gets all the attention because its the most visually obvious, but the homogeneity goes deeper. Ask any AI to build a landing page without specific design constraints and youll get:
- Inter or system-ui font
- White or light gray background
- Rounded corners on everything (border-radius: 0.5rem)
- Subtle box shadows at low opacity
- Three-column feature grid with icons
- Hero section with gradient text
- A CTA button thats purple (obviously)
This is the median of every Tailwind-based landing page that existed in the training data. The AI isnt designing. Its averaging.
Why This Actually Matters
If youre building a real product with vibe coding tools, looking identical to every other AI-generated site is a brand problem. Users are developing pattern recognition for "this was made by AI." The purple gradient + Inter font + three feature boxes combo is becoming as recognizable as a WordPress theme from 2015.
For side projects and MVPs, maybe it doesnt matter. For anything that needs to stand out to users or investors, its a real issue.
How to Break Out
The fix is annoyingly simple: be specific in your prompts. Instead of "build me a landing page," try something like:
- Specify a color palette by hex codes
- Name a reference site ("style it like stripe.com" or "use the vercel design language")
- Pick a font explicitly ("use DM Sans, not Inter")
- Describe the layout you want instead of letting the model pick one
- Reference a design system (Material Design 3, Radix themes)
The AI is perfectly capable of generating diverse designs. It just needs constraints. Without them, it falls back to the statistical average of its training data. And that average is purple.
The Bigger Lesson
This whole thing is a case study in how defaults propagate through systems in ways nobody anticipated. Adam Wathan picked a reasonable default color for a demo. Five years later, a significant chunk of the internet's new UI is that color because an AI learned from the ripple effects of that one decision.
Its a reminder that when you build tools that millions of developers use, your defaults arent just defaults. Theyre the most likely outcome for everything downstream. In the age of AI code generation, that downstream is literally the entire web.
Next time your AI generates a purple landing page, dont blame the AI. Blame bg-indigo-500. And then change it to something else.
Top comments (0)