31Status
The status atom: a dot, a mono word, colour third. Never a background wash (Principle 3) — so it survives grayscale, colourblindness, and never competes with the primary button.
Use it for
- Course/lesson/ticket state in lists, cells, headers
Not for
- A message with a body — Alert
- Series colour in a chart — status hues are reserved
The five states
idle is a hollow dot — "not started" is legible as a shape, not just a grey.
Not started
In progress
Complete
Expiring
Failed
markup
<span class="ns-status ns-status--idle">Not started</span>
<span class="ns-status ns-status--info">In progress</span>
<span class="ns-status ns-status--success">Complete</span>
<span class="ns-status ns-status--warning">Expiring</span>
<span class="ns-status ns-status--error">Failed</span>Accessibility contract
- The word carries the meaning; the dot and colour reinforce it