Color

Picking colors was treated as a matter of taste for a long time. Whoever was building a screen grabbed a blue they liked, and on the next screen they grabbed a different blue. With ten screens that costs nothing. It surfaces when there are 200 screens and six people making them.

Pagedeck went through exactly that. The button blue Noa put in a mockup and the button blue Theo shipped were subtly different, and nobody noticed until the two screens sat side by side on one monitor. Gray was worse. Counting the grays used for body text, helper text, borders, and disabled buttons turned up seventeen distinct values. There was nowhere to ask which one was correct, so anyone new copied a value off a neighboring screen, which copied the wrong gray along with it. Once a value has spread it is hard to pull back, because no one remembers which gray was the original and which drifted during copying.

The scattered values were not the larger problem. The larger problem was that the work color had been doing was invisible. Color is not only decoration. Four buttons of the same size and the same color on one screen force a person to read all four; make one of them solid and the rest get skimmed past. Red text is read as something has gone wrong before the words are read at all, and pale gray text is read as this cannot be pressed right now. Color was carrying hierarchy and state like that with no names attached to those jobs, so design reviews produced only sentences about preference, along the lines of this blue feels a bit loud. Preference has no evidence to argue against, so those meetings usually ended with whatever the most senior person in the room said. A color settled that way wobbles again on the next screen. When the basis for a decision is a person, the decision changes every time the person does.

What the idea of color as a system did was move color from individual picks to a structure. Instead of choosing a value first, you fix the roles first: a color for the main action, a color for danger, a color for the background. The slots are defined and then one value goes into each slot. That changes the sentences in the meeting. Instead of this blue is loud, it becomes this is not a main-action slot and it is using the main-action color, and the second sentence is a claim anyone can check. Color sits inside visual design as a material alongside typography and layout, and all three share the purpose of deciding, through what is visible, what gets read first. The difference is that type size shows its own answer when you measure it while color does not, which is why color is the one that most often stays unruled.

The terms under color fall into four groups. Composition decides which color holds which role. Quality measures whether the result can actually be read. Theme reissues the same screen at a different brightness. Notation writes color down as numbers. Composition comes first, and the other three inspect, transform, or record what it produced.

Composition has four slots.

1. Color palette — the set of colors a product has agreed to use. It is not one blue but a family built out in several steps of brightness. Numbering them from lightest as 100, 200, 300 and on up to 900 is common. With that in place, a team can speak in steps: 100 for a background, 600 for a button, 700 for the pressed state. The agreement that nothing outside the palette gets used comes attached. Families usually stop at somewhere between five and eight. One brand family, one set of grays, and three or four colors with fixed meanings will cover most screens.
2. Primary color — the color in that palette standing for the brand and for the main action. It goes on the single thing you most want done on a screen. On a signup screen the signup button takes it, and the tour button beside it retreats into an outline. Use it in more than three places and the emphases cancel each other out, leaving nothing emphasized. Blur the screen until it is unreadable: if one solid block remains, the color was used correctly, and if three or four remain, the choice needs redoing.
3. Semantic color — colors whose meaning is decided ahead of time. Green for success, yellow for warning, red for error, blue for information, pinned as pairs and used for nothing else. Break the pin and the learning collapses. If red has been the delete button and then the same red turns up as the background of a promotional banner, people read the banner as a warning and stall for a beat. Green behaves the same way. Green used for success, then reused to highlight a paid plan, makes something that has not happened yet look already done on a checkout screen.
4. Neutral color — the grayscale family used for backgrounds, text, and borders. It draws no attention and covers most of the actual screen. The accident where gray multiplies into seventeen values always happens in this group, so teams nail the steps down to six or eight and allow choices only from inside that set. Assigning a number per slot, with body text on the darkest step, helper text one step up, and borders on the light side, removes the decision from every new screen.

Quality has one slot. Contrast ratio expresses the brightness difference between text and its background as a single number. Pale gray text on a white background lands around 2.8 to 1, and taking the same gray two steps darker brings it to 4.7 to 1. Body text is commonly held to 4.5 to 1 or better, so the first fails and the second passes. It is a number to measure while choosing the color, not after. Check it once everything is built and the palette has to be redrawn. Companies whose brand color is in the yellow family get caught most often. Yellow produces almost no contrast against white, so white text on a yellow button cannot be read, and the fix is either black text or a color pulled far darker.

Theme has one slot too. Dark mode is a screen composed around a dark background. It is not the job of flipping the light screen's colors. The same blue reads much stronger over a dark background, so a step or two lighter is the usual answer. Places that expressed layers with shadow stop working there as well, and a brightness difference takes over the job. Supporting dark mode therefore means holding two values per color, one for light screens and one for dark, as a pair. Backgrounds tend not to use pure black either. White text on true black looks like it is bleeding and is tiring over a long read, while a dark gray one step up reads more comfortably.

Notation has one slot. Color model is the system for writing color as numbers. Writing it as amounts of red, green, and blue is one common form, and writing it as hue, saturation, and brightness is another. The second makes the steps of one family easy to generate by changing only the brightness value, which helps when designing a palette. Whichever notation is used, giving the value a name and registering it as a design token makes the mockup and the code call the same name. When Noa darkens a button by one step in a mockup, Theo no longer transcribes a value; he confirms that the value behind the same name has changed.

The four groups run in one line. Composition sets roles and values, quality filters whether those values can be read, theme redefines the same roles at a different brightness, and notation writes the whole thing in a form a machine can read. When the front of the line is empty, the back has nothing to do. Match contrast without assigning roles and you get a screen that is legible yet still gives no clue about what matters. Assign roles without binding the notation to names and the rule you agreed on lives only inside a document while the screen keeps the old values.

"I don't think this button should go primary. That gives the screen two main actions."

Splitting the emphasis means neither one is emphasized any more.

"This gray body text is at 3 to 1 against the background. I'll move it one step darker."

The change is being made against a contrast standard rather than a preference.

"That color isn't in the palette. Where did it come from?"

A flag that a color from outside the agreed set has entered the screen.

The longest conversation about color at Pagedeck came in the quarter dark mode was first attempted. Noa built a dark mockup by inverting the brightness of the light screen's colors, and the red in error messages came out strong enough to hurt, while the gray of disabled buttons sank into the background and disappeared. It became clear on the spot that this was not a problem of flipping colors but of redefining a value for every role.

Theo reported that color values were written directly into more than 300 places in the screen code. Putting dark values in meant finding all 300. Mia pushed the dark mode release back a quarter and decided to spend that time converting every color value into a name. Once values are behind names, the dark set is just one more set of values behind the same names. The urgent thing was dark mode, but the thing that had to come first was the naming. What Noa and Theo did that quarter was less about choosing new colors than about finding a slot for the colors already in use.

The most common mistake is reading color purely as a question of brand impression. Choosing a logo color and choosing screen colors go by the same word, so the belief sets easily. In practice most of what color does on a screen is carry information rather than impression. What to look at first, whether something can be pressed right now, whether the thing just done worked — all of it arrives through color. Treated as impression alone, color becomes decoration applied at the end once the planning is finished, and building in that order produces screens where three buttons stand out equally. A user stalls for three seconds deciding which one to press, and those three seconds show up in the conversion rate.

Believing color alone can distinguish information is the other frequent one. Green dots and red dots down the left of a list separate at a glance, which feels like a well-made screen. About one man in twenty sees those two colors as a similar brown. The two dots also become identical in a document printed in black and white. Left as is, the status column is effectively empty for those users, who then have to open successful and failed items one by one to tell them apart. Since the fix is nothing more than adding a shape or a word on top of the color, color blindness considerations get handled in the same step as building the palette.