A chip has one job. It names a status, or it filters a list. It does not do both, and it does not replace the button that does the work. The label is a word. Colour is the second signal, used only after the word is already clear.
The failure is three matching vermilion pills and no words. Paid, due, and draft look the same, so the person has to guess. The guess gets worse when vermilion is also doing duty for errors, selection, and anything new. Neutrals carry the ordinary states. One colour means one meaning. If vermilion means "this needs a person", it does not also mean "this is settled".
Ink is enough for a settled state. An outline is enough for work that is not finished. The left plate is the pills. The right plate names the states: Paid in ink, Due in vermilion, Draft as an outline.
How to check it
- Turn the colour off. The remaining word still names the state.
- Count the vermilion chips on the screen. They share one meaning.
- Name the job of each chip. It is a status or a filter, not both, and not the primary action.
.chip {
min-height: 2rem;
padding: 0 0.7rem;
border: 1px solid var(--fg);
border-radius: 0;
background: transparent;
color: var(--fg);
font-size: 0.875rem;
}
.chip[data-status="paid"] {
background: var(--fg);
color: var(--bg);
}
.chip[data-status="due"] {
border-color: var(--accent);
background: var(--accent);
color: var(--bg);
}