states, or what a control is doing

A control is not one picture but a small set of them, and the set is what people learn. Rest, hover, focus, pressed, disabled; for a field, add error; for anything in a list, add selected. The system gives each state one look and uses it everywhere, so that a person who has met one button has met them all.

the assignment

• Rest is the component's own color: red for the action, white for a secondary button, ink for a dark one.
• Hover is yellow, always. It is the hand asking whether it has arrived, and yellow is the emphasis color, so the answer is yes, here.
• Focus is a 3 pixel blue ring, 2 pixels outside the element, or a 5 pixel blue underline inside a field. Blue is structure, and focus is the keyboard's structure. The ring is never removed; where it is replaced, the underline takes its place.
• Pressed is ink with yellow text. It is the strongest contrast in the palette, and the moment of pressing is the strongest moment in the interaction.
• Disabled is paper with a grey border and grey text. It is the only use of grey, and it means the control is present but not available. A disabled control still shows its label; a control that disappears is a different design decision.
• Selected and current are yellow, and carry an attribute: aria-current for navigation, aria-selected for tabs, aria-pressed for toggles, checked for inputs.
• Error is a red border, a red underline, and a message that starts with a red square and says what to fix.

why the assignment is fixed

A product with a hundred components has a hundred chances to invent a new hover. Each invention is small and each is reasonable, and together they make a product nobody can learn, because the signal for the same event differs from screen to screen. Fixing the assignment at the token level removes the chance. Emphasis is the hover color; a component that wants a different one is asking to change the system, not the component.

It also keeps color honest. Yellow means here or chosen; it does not mean warning on one screen and new on another. When a color has one meaning the eye can read it without the label, and the label confirms rather than explains.

feedback is function

The first article in this journal argued that feedback is a use. States are where that argument becomes code. A button that looks the same at rest, under the pointer and under the finger is a picture of a button. The states are what make it an instrument, and the timing matters as much as the color: 120 milliseconds, linear, so the change is noticed and not watched.

the attribute is the state

The stylesheet never reads a class like is-active. It reads the attribute that describes the state: aria-current, aria-selected, aria-invalid, disabled, checked, open. That means the look and the meaning cannot drift apart. If a tab is styled as selected, it is selected, to the screen reader as well as to the eye. A state that exists only in a class name is a state only sighted people can see.