Design in grayscale first

Settle hierarchy in grayscale first; add color last.

Refactoring UIrefactoringui.com
Refactoring UI — Official site with resources and examples
Adam Wathan & Steve SchogerVisit site ↗

From refactoring-ui: Core Principle and the Quick Diagnostic table.

Pricing cards without color

Press Grayscale, then drag the hue.

Color does itBad

Starter

$9 / month

  • 3 projects
  • Email support

Pro

$29 / month

  • Unlimited
  • Priority support
1.0:1
Hierarchy does itGood

Starter

$9/mo

  • 3 projects
  • Email support

Pro Popular

$29/mo

  • Unlimited
  • Priority support
9.0:1
.plan-pro .price { font-size: 36px; font-weight: 700; }
.plan-pro .cta   { background: var(--gray-900); }
.plan-pro .cta   { background: oklch(45% 0.15 var(--hue)); }

The squint test

Squint to 6px, then edit the revenue.

Four colors, one sizeBad
Revenue$48,210
Customers1,284
Churn2.1%
Avg. deal$37.50
4 × 20px / 600, 4 hues
One dominant metricGood
Revenue this month $48,210 +12% vs last month
Customers
1,284
Churn
2.1%
Avg. deal
$37.50
36/700 · 14/500 · 12 muted
.metric-primary   { font-size: 36px; font-weight: 700; color: var(--gray-900); }
.metric-secondary { font-size: 14px; font-weight: 500; color: var(--gray-900); }
.metric-label     { font-size: 12px; color: var(--gray-500); }
.dashboard        { filter: grayscale(1) blur(6px); }

Fix it without adding color

Toggle fixes and watch the diagnostic score.

Your cardScore 1

Team

$49 / month

For groups that share projects and need admin controls.

Seats
10
Storage
100 GB
Support
Priority
padding 12 · gaps 13/17/23 · price 16/400
Quick Diagnostic8 rows
1/101 of 8 rows pass
  • Hierarchy reads when squinting?
  • Works in grayscale?
  • Enough white space?
  • Labels quieter than values?
  • Spacing on a consistent scale?
  • Text width constrained?
  • Sufficient text contrast?
  • Shadow fits the elevation?

Why it matters, pros and cons

Why it matters

Color hides weak hierarchy. Settle it in grayscale and color becomes decoration.

Pros

  • Forces real size, weight and spacing decisions.
  • Survives color blindness, dark mode, print.
  • Any brand hue drops in later.

Cons

  • Status color is information; design it with color.
  • Brand-led marketing pages may start from a palette.
  • Grayscale mockups can feel lifeless to stakeholders.