Dominant color, sharp accent

Let one color own the screen; spend the accent where eyes should land.

From frontend-design: dominant colors with sharp accents beat timid palettes.

Shift the distribution

Drag toward Dominant, then Squint to find the button.

Same five rolesEven

NorthwindProductPricingDocs

Ledger for small teams

Close the month in a day.

Start trialBook a demo

Bank feedsRulesReports

Distribution Even Squint

:root {
  --base:      #14161f; /* 70% */
  --secondary: #efe9dc; /* 25% */
  --accent:    #ff4a1c; /*  5% */
}
body  { background: var(--base); color: var(--secondary); }
.card { background: var(--secondary); color: var(--base); }
.cta  { background: var(--accent); color: var(--base); }

Where's the primary action?

Press Start, then click Start trial as fast as you can.

Even pastelsBad

Northwind

Then click Start trial

0 runs

Ink + one vermilionGood

Northwind

Then click Start trial

0 runs

Spend the accent budget

Add accented elements and watch the button lose its pull.

Accent budget1 element

Northwind ProductPricing

New: rules v2

Close the month in one day.

Bank feeds
Auto-coding

Start trial $29/mo

Accented elements 1 Button label

Vermilion Cobalt Lime Amber

Why it matters

Hierarchy comes from contrast. An accent is a signal only while it stays rare.

Pros

The primary action is found before reading.
The palette looks chosen, not assembled.
Three roles are easy to theme.

Cons

Charts need several distinct hues, not one accent.
Status colors carry meaning outside the accent budget.
Color alone fails some readers; pair it with weight.