# Limit Accent Colors

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

> SHOULD: Limit accent color usage to one per view. Use existing theme or Tailwind color tokens before introducing new colors. Every new color needs justification.

Use only one accent color per view to maintain visual hierarchy and reduce noise

Verbatim from the baseline-ui skill — one line under "Design". Our reasoning: an accent works by being the exception, so its power is inversely proportional to how often it appears. Two accents on one screen do not give you two emphases; they give you an argument, and the user has to resolve it before they can act. Spend the accent on the single most important action in the view and let everything else be neutral — secondary actions can be text or outline, not another colour. This is about EMPHASIS, and it is compatible with the semantic palette: destructive red on a delete confirmation and success green on a completed state are meanings, not accents (see design-color-meaning), and they should not be recruited to add visual interest.

## Bad — do not do this

`design-ibelick-color-restraint-bad`

```tsx
export function IbelickColorRestraintBad() {
  return (
    <div className="space-y-4">
      <div className="p-4 border rounded-lg space-y-3">
        <div className="flex items-center justify-between">
          <span className="font-medium">Dashboard</span>
          <span className="px-2 py-1 bg-green-500 text-white text-xs rounded">Active</span>
        </div>
        <div className="flex gap-2">
          <button className="px-3 py-1 bg-blue-500 text-white text-sm rounded">View</button>
          <button className="px-3 py-1 bg-purple-500 text-white text-sm rounded">Edit</button>
          <button className="px-3 py-1 bg-orange-500 text-white text-sm rounded">Share</button>
          <button className="px-3 py-1 bg-pink-500 text-white text-sm rounded">Export</button>
        </div>
        <p className="text-sm">
          <span className="text-red-500">3 errors</span> •
          <span className="text-yellow-500"> 5 warnings</span> •
          <span className="text-cyan-500"> 12 info</span>
        </p>
      </div>
      <p className="text-xs text-destructive">
        Rainbow of colors - no clear hierarchy, overwhelming visual noise
      </p>
    </div>
  );
}
```

## Good — do this

`design-ibelick-color-restraint-good`

```tsx
export function IbelickColorRestraintGood() {
  return (
    <div className="space-y-4">
      <div className="p-4 border rounded-lg space-y-3">
        <div className="flex items-center justify-between">
          <span className="font-medium">Dashboard</span>
          <span className="px-2 py-1 bg-muted text-muted-foreground text-xs rounded">Active</span>
        </div>
        <div className="flex gap-2">
          <button className="px-3 py-1 bg-primary text-primary-foreground text-sm rounded">View</button>
          <button className="px-3 py-1 bg-muted text-sm rounded">Edit</button>
          <button className="px-3 py-1 bg-muted text-sm rounded">Share</button>
          <button className="px-3 py-1 bg-muted text-sm rounded">Export</button>
        </div>
        <p className="text-sm text-muted-foreground">
          3 errors • 5 warnings • 12 info
        </p>
      </div>
      <p className="text-xs text-success">
        One accent color for primary action - clear hierarchy, calm interface
      </p>
    </div>
  );
}
```

## References

- [ibelick — baseline-ui skill](https://raw.githubusercontent.com/ibelick/ui-skills/main/skills/baseline-ui/SKILL.md)
- [Psychology of Color in UX](https://www.smashingmagazine.com/2025/08/psychology-color-ux-design-digital-products/)