Why AI tools love purple gradients, and how to stop yours
Ask an AI tool for a landing page and a purple gradient appears. Why that default happens, why it hurts your product, and how to replace it with an identity.
If you have asked an AI coding tool for a landing page, you have seen it: an indigo to purple gradient behind the headline, a white card with rounded corners, three feature boxes. It is not a bug in the model. It is what a model does when the request gives it nothing to go on.
Where the default comes from
A model with no brief reaches for the most typical answer, and the typical modern tech page leans on blue to purple gradients. The result is a page that looks like thousands of others, which a visitor reads, fairly or not, as low effort. We wrote the longer version in why AI-generated UI looks the same.
The fix is not a different gradient
Asking for "no purple" gets you a teal gradient. The pattern survives because the brief still has no identity. What works is giving the model decisions it can follow:
- A ground colour and what it is for.
- One action colour and the rule for where it goes.
- A type pairing, with sizes.
- The texture or material, if any: grain, glass, paper, none.
- A short list of what this design is not.
The not-list does the most work
"No mesh gradients. No neon. No glass on body text. No gradient on buttons." Each line removes a family of generic answers before a line of CSS is written. It is the cheapest part of a design system and the one most people skip.
Make it stick past one prompt
A prompt is gone by the next session. Put the decisions somewhere Claude reads whenever it builds UI: a design skill that triggers on UI work, or project instructions. Then the fifth screen matches the first. Give Claude Code your design system covers the file layout.
Oddly, one of our skills is violet. Glass Instrument UI uses violet on purpose, with lime as the only action colour, a holographic ramp limited to three lines of type, and a list of what the look is not, and the difference between it and the default purple page is exactly those rules.
Questions
Why does AI-generated UI use purple gradients?
Because the request gives it no identity to follow, so it produces the most common answer for a modern tech landing page, and indigo to purple gradients are very common in the pages models learned from.
Is purple bad for a brand?
No. The problem is the default, not the colour. A purple chosen on purpose, used in a specific way with a distinct second colour and rules, reads as a brand. A gradient nobody chose reads as a template.
How do I stop Claude from using a purple gradient?
Give it a palette with named jobs and a list of what the design is not, in a place it reads every time it builds UI, such as a design skill or CLAUDE.md. A one-off prompt fixes one screen at most.