# Avoid Gradients Unless Requested

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

> NEVER: Use gradients unless explicitly requested. Solid colors are easier to maintain, more accessible, and don't clash with content.

Solid colors are cleaner and more maintainable - only use gradients when explicitly asked

That is the rule verbatim from the baseline-ui skill — one RFC-2119 line under "Design". Our reasoning: a gradient is a decision nobody asked for that then has to be maintained in every theme, and it quietly breaks the things around it. Text on a gradient has no single contrast ratio, so it passes at one end and fails at the other; a gradient surface has no single token, so dark mode has to re-author it rather than re-map it. Solid colours are cheaper, testable, and themable. If the brand genuinely calls for a gradient, that is an explicit request — build it once, as a token, and keep text off it.

## Bad — do not do this

`design-ibelick-no-gradients-bad`

```tsx
export function IbelickNoGradientsBad() {
  return (
    <div className="space-y-4">
      <div
        className="p-6 rounded-lg text-white bg-[image:var(--ex-no-gradients-card)]"
      >
        <h3 className="font-semibold text-lg">Premium Plan</h3>
        <p className="text-sm opacity-90 mt-1">Unlock all features</p>
        <button
          className="mt-4 px-4 py-2 rounded-lg text-sm font-medium bg-[image:var(--ex-no-gradients-button)]"
        >
          Upgrade Now
        </button>
      </div>
      <p className="text-xs text-destructive">
        Gradients everywhere - looks generic and reduces text contrast
      </p>
    </div>
  );
}
```

## Good — do this

`design-ibelick-no-gradients-good`

```tsx
export function IbelickNoGradientsGood() {
  return (
    <div className="space-y-4">
      <div className="p-6 rounded-lg bg-primary text-primary-foreground">
        <h3 className="font-semibold text-lg">Premium Plan</h3>
        <p className="text-sm opacity-90 mt-1">Unlock all features</p>
        <button className="mt-4 px-4 py-2 rounded-lg bg-background text-foreground text-sm font-medium hover:bg-background/90 transition-colors">
          Upgrade Now
        </button>
      </div>
      <p className="text-xs text-success">
        Solid colors - clean, professional, better contrast
      </p>
    </div>
  );
}
```

## References

- [ibelick — baseline-ui skill](https://raw.githubusercontent.com/ibelick/ui-skills/main/skills/baseline-ui/SKILL.md)
- [Flat Design Guidelines](https://www.nngroup.com/articles/flat-design/)