# Spend Your Boldness in One Place

**SHOULD** · **ID:** `aesthetics-color-dominance` · **Category:** aesthetics
**Source:** [Skills](https://skills.sh/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/aesthetics-color-dominance

> SHOULD: Use bold dominant colors with 1-2 sharp accent highlights. Avoid timid, evenly-distributed palettes. The 60-30-10 rule works, but pushing to 90% dominant with surgical accent placement is often better.

Commit to one dominant color with a single sharp accent and keep everything around it quiet, instead of an evenly-distributed timid palette

A palette where every color competes is not bold, it is undecided — and a palette of washed-out neutrals is not restraint, it is a refusal to choose. Both fail the same way. Spend the boldness once: one dominant color that carries the surface, one sharp accent reserved for the thing you want the eye to land on, and disciplined quiet everywhere else.

## Bad — do not do this

`aesthetics-color-dominance-bad`

```tsx
export function ColorDominanceBad() {
  return (
    <div className="w-full max-w-md p-6 bg-card rounded-lg">
      <div className="flex gap-2 mb-4">
        <div className="w-8 h-8 rounded bg-blue-400" title="Blue" />
        <div className="w-8 h-8 rounded bg-green-400" title="Green" />
        <div className="w-8 h-8 rounded bg-purple-400" title="Purple" />
        <div className="w-8 h-8 rounded bg-orange-400" title="Orange" />
        <div className="w-8 h-8 rounded bg-pink-400" title="Pink" />
      </div>
      <div className="space-y-2">
        <button className="px-4 py-2 bg-blue-400 text-white rounded text-sm">
          Primary Action
        </button>
        <button className="px-4 py-2 bg-green-400 text-white rounded text-sm ml-2">
          Secondary
        </button>
        <button className="px-4 py-2 bg-purple-400 text-white rounded text-sm ml-2">
          Tertiary
        </button>
      </div>
      <p className="text-xs text-destructive mt-4">
        Evenly-distributed colors create visual confusion with no hierarchy
      </p>
    </div>
  );
}
```

## Good — do this

`aesthetics-color-dominance-good`

```tsx
export function ColorDominanceGood() {
  return (
    <div className="w-full max-w-md p-6 rounded-lg bg-background">
      <div className="flex gap-2 mb-4">
        <div className="w-12 h-8 rounded bg-background border border-border" title="Dominant" />
        <div className="w-8 h-8 rounded bg-muted" title="Surface" />
        <div className="w-6 h-8 rounded bg-primary" title="Accent" />
      </div>
      <div className="space-y-2">
        <button className="px-4 py-2 bg-primary text-primary-foreground rounded text-sm font-medium">
          Primary Action
        </button>
        <button className="px-4 py-2 bg-muted text-muted-foreground rounded text-sm ml-2">
          Secondary
        </button>
      </div>
      <p className="text-xs text-success mt-4">
        Bold dominant color with sharp accent creates clear hierarchy
      </p>
    </div>
  );
}
```

## References

- [Anthropic frontend-design skill](https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md)
- [Refactoring UI](https://www.refactoringui.com/)