# Avoid Purple and Multicolor Gradients

**NEVER** · **ID:** `design-ibelick-no-purple` · **Category:** design
**Source:** [@Ibelick](https://www.ui-skills.com/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/design-ibelick-no-purple

> NEVER: Use purple or multicolor gradients. They are hallmarks of AI-generated slop and generic templates. Choose distinctive, intentional colors.

Purple and rainbow gradients are overused in AI-generated designs - avoid them

Verbatim from the baseline-ui skill — the line that follows its blanket "NEVER use gradients unless explicitly requested" (see design-ibelick-no-gradients), singling out the two variants that are never a considered choice. Our reasoning: violet-to-fuchsia and full-spectrum rainbows are the house style of every AI design tool and every undesigned SaaS template, so shipping one tells the viewer exactly where the interface came from. They also carry the same technical costs as any gradient — no stable contrast ratio under text, no single token to re-map in dark mode — with none of the brand justification.

## Bad — do not do this

`design-ibelick-no-purple-bad`

```tsx
export function IbelickNoPurpleBad() {
  return (
    <div className="space-y-4">
      <div className="p-6 rounded-lg border">
        <div
          className="text-2xl font-bold bg-clip-text text-transparent bg-[image:var(--ex-no-purple-text)]"
        >
          AI-Powered Analytics
        </div>
        <p className="text-sm text-muted-foreground mt-2">
          Transform your data with machine learning
        </p>
        <button
          className="mt-4 px-4 py-2 rounded-lg text-white text-sm bg-[image:var(--ex-no-purple-button)]"
        >
          Get Started Free
        </button>
      </div>
      <p className="text-xs text-destructive">
        Purple/pink/orange gradient - screams "AI generated" generic SaaS
      </p>
    </div>
  );
}
```

## Good — do this

`design-ibelick-no-purple-good`

```tsx
export function IbelickNoPurpleGood() {
  return (
    <div className="space-y-4">
      <div className="p-6 rounded-lg border">
        <div className="text-2xl font-bold text-foreground">
          AI-Powered Analytics
        </div>
        <p className="text-sm text-muted-foreground mt-2">
          Transform your data with machine learning
        </p>
        <button className="mt-4 px-4 py-2 rounded-lg bg-primary text-primary-foreground text-sm hover:bg-primary/90 transition-colors">
          Get Started Free
        </button>
      </div>
      <p className="text-xs text-success">
        No gradients - looks professional and unique to your brand
      </p>
    </div>
  );
}
```

## References

- [ibelick — baseline-ui skill](https://raw.githubusercontent.com/ibelick/ui-skills/main/skills/baseline-ui/SKILL.md)
- [Design System Colors](https://www.smashingmagazine.com/2023/04/color-mechanics-ui-kits/)