State Design Is About Meaning, Not Colour

Most libraries treat a pressed state as a darker background. For buttons that works. For card-like components, such as selection cards, choice cards and chips, it quietly broke meaning in our mobile library.

When one signal does two jobs

A white card that turns grey under your finger reads as disabled for a moment. And because selection in the product is shown with colour, a tinted background on press started to look like a half-selected state. The same visual change was answering two different questions.

The rule

• Bordered, card-like components keep a white background in every state, selected or not.

• Only the border changes: one step darker on hover, another on press.

• Selected items step through darker shades of the brand green the same way.

• Green means selected or active, and nothing else.

Components without a border, like dropdown items and tabs, use a soft grey background ladder instead. Buttons and checkbox halos keep their own treatment. Exceptions are fine as long as they’re written down.

The trade-off

A border change is subtler than a fill, and on a phone the finger covers part of the card. So the steps have to be far enough apart to read. Subtle is fine; ambiguous isn’t.

The principle

Give every signal one job. When the background never changes, it can’t be mistaken for disabled. When green only means selected, nobody has to guess. And a rule built from three tokens is one a designer, a developer or an agent can apply without asking.