A system is a short list of jobs, written down and then left alone. Colour on this list has four: ink for reading, a surface for the sheet, one action, and a danger signal. Action is the only vermilion. Danger is drawn in ink, not given a second red. The failure is an open list. Each new screen adds another blue, nobody names it, and soon no one can say which colour is the button.
The left plate is that list with the names missing: four squares and no jobs. The right plate names Ink, Surface, Action, and Danger, and only Action is vermilion. If a screen needs a colour that is not on the list, change the screen or revise the list in public. Do not grow it quietly in the file.
How to check it
- Count every colour that is not ink, paper, the action, or the danger mark. An extra tint of the action is still an extra colour. It belongs to an open list.
- Read the names on the swatches. Each one should say the job. A hex with no job, or a mood word such as “calm”, is not an entry in the system.
- Mark every use of the action colour on one real screen. If it paints a decoration, a second button, and a rule, it is no longer the action.
:root {
--ink: #16150f;
--surface: #fffdf8;
--action: #c0300f;
--danger: #16150f;
}
.button-action {
background: var(--action);
color: var(--surface);
}
.button-danger {
background: transparent;
color: var(--danger);
border: 1px solid var(--danger);
}