Primary Color

Accent colors used to get picked screen by screen, on the spot. The list view got a slightly dark blue, settings got a lighter blue, checkout got a green. Taken one screen at a time, nothing looks wrong.

For someone moving between them, two things break. One is the sense that this is a single product. The other is more practical: where to press has to be relearned on every screen. And when three saturated buttons sit side by side, the emphasis cancels itself out and nothing is emphasized. If signup, browse, and help are all the same deep blue on a signup page, people stop for a moment between the three, and a moment is all it takes to lose someone.

Designate one color from the palette and use it once per screen.

1. Designate a step inside the palette. If the color palette divides one hue from 100 to 900 by lightness, one of those steps — 600, say — gets fixed as this role.
2. Use it once per screen. The single action you want the user to take takes the color, and everything else on the screen accepts a smaller one.
3. Let the other actions step back. An outlined button, a text-only button, or the neutral color family used for backgrounds and text.
4. Assign steps for each state up front. Default 600, hover 700, pressed 800, disabled 300 — decided once, so building a new button involves no choosing.
5. Check the contrast against text. Putting white text on this color requires the color contrast ratio, the brightness difference expressed as a number, to clear the threshold. Companies whose brand hue is a light one run into this constantly, and usually end up using a darker step for buttons than the one marketing signed off on.

Whether it's being used correctly shows up if you blur the screen and look at what survives. One dark mass left means yes; three or four means picking again.

"There are three primaries on this screen. Let's keep one."

Several emphases mean no emphasis at all, so two of them have to give the color up.

"White on 600 comes to 3.9, so it fails. Drop to 700."

Go one step darker in the same hue to meet the threshold.

"Let this button step back to neutral."

It isn't the main action here, so it gives up the color to the one that is.

The Pagedeck document list went through this. New document, create folder, and import were all primary, and Noa kept only new document, moving the other two to outlined buttons. The share of sessions that pressed new document went up afterwards.