One accent color

Spend color once, through --color-primary; keep the rest neutral.

From shadcn (Vercel plugin): neutral base, one accent via --color-primary.

Every accent dilutes the CTA

Add accents; rings show where the eye lands.

An accent per surfaceBad
Acme / BillingUsage this month
Requests1.2M
Errors0.4%
Seats18/25
Pro trial Invoices Upgrade
1 accent · CTA 100%
One accentGood
Acme / BillingUsage this month
Requests1.2M
Errors0.4%
Seats18/25
Pro trial Invoices Upgrade
1 accent · CTA 100%
.stat   { background: var(--color-card); color: var(--color-card-foreground); }
.stat .label { color: var(--color-muted-foreground); }
.badge  { background: var(--color-secondary); color: var(--color-secondary-foreground); }
.cta    { background: var(--color-primary); color: var(--color-primary-foreground); }

Rebrand in one move

Rebrand, then try fixing the five pickers.

A color per componentBad
Email alerts
Storage
Billing settings
One tokenGood
Email alerts
Storage
Billing settings
--color-primary: oklch(0.488 0.243 264)5/5 on brand
@theme inline {
  --color-primary: oklch(0.488 0.243 264.376);
  --color-primary-foreground: oklch(0.985 0 0);
  --color-ring: var(--color-primary);
}
.button   { background: var(--color-primary); }
a         { color: var(--color-primary); }
.switch[aria-checked="true"], .progress > span { background: var(--color-primary); }
:focus-visible { outline: 2px solid var(--color-ring); }

Why it matters, pros and cons

Why it matters

Color is the loudest cue on a neutral page. Spend it once, on the next action.

Pros

  • The primary action is findable at a glance.
  • A rebrand is one token.
  • Button, link, switch and ring agree.

Cons

  • Status colors are semantic tokens, not accents.
  • Charts need their own series palette.
  • Some hues fail contrast; recheck the foreground.