Semantic Color

While colors were picked for whatever suited each screen, the same color collected a different meaning in every place. If a red that meant danger on one screen means emphasis on the next, a user can't infer anything from color at all.

Pagedeck had that happen. Red had been the delete button and the error message for a long time, and then the banner announcing a new plan used that red as its background. The support requests weren't about the banner's content; they asked what the warning was. When Mia checked the numbers, the banner had also been clicked less than usual. Users had already learned that red meant danger.

Semantic color is the agreement that protects what they learned. Pair each color with a meaning, fix the pair, and don't reuse that color outside it.

Assign one color per meaning and use it only there. Four pairs usually cover it.

1. Success is green. Something saved, or a payment went through.
2. Warning is yellow or orange. Not a problem yet, but worth looking at — storage reaching 80 percent belongs here.
3. Error is red. Something failed, or an action can't be undone.
4. Information is blue. Useful to know, with nothing for the user to do.

One color per meaning isn't enough in practice. Each meaning needs separate values for background, border and text. Use the same red for both a background and the text on it and there's no contrast ratio left to read by, so the background takes a pale step and the text a dark one.

Not relying on color alone belongs here too. A list marking success with a green dot and failure with a red one is indistinguishable for roughly one man in twenty, so color blindness practice adds an icon or a word alongside.

Naming is where this actually gets decided. When the value is registered as a design token, name it for the meaning rather than the color. Call it red and the name breaks the day the error color becomes orange; call it error and only the value changes.

"That banner background is the error color. Let's move it to another family."

Don't use the color outside the meaning it was assigned.

"Rename the token from red to error."

Name it for the role, not the hue.

"Using green to highlight the paid plan makes it look done before anyone pays."

A color learned as success creates a false reading somewhere else.

After the banner, Pagedeck wrote the meanings onto one page and agreed that new screens pick only from that table. Noa built the table and Theo renamed the tokens by meaning. The plan banner shipped again in a brand color.