Small, static labels. Job status has its own token set (D12), so every status reads the same everywhere; "Booked" moves off Tailwind's lime onto Bolster green, and in progress is blue. Status badges carry no dot: the word is the cue, colour the second; a dot isn't an icon, and status icons (the job list's marks) show only where a list asks for them (D61).
Job status
Lead
Draft
Pending
Booked
In progress
Active
Outstanding
Status marks
On list pages a status wears a shape as well as a colour (D28), so the shape says the status and colour only backs it up. Jobs fill a quarter at a time as they move on; a slash is the client saying no. Once the shape carries meaning it's a graphic that must reach 3:1, so draft, pending and in progress have their own darker mark colours.
Draft
Pending
Booked
In progress
Paid
Declined
Lead
| Mark | data-mark | Means |
|---|---|---|
| empty | Not started (a lead) | |
| dashed | Not sent yet | |
| quarter | With the client | |
| half | Signed | |
| three | Work underway | |
| full | Closed, paid | |
| slash | Declined, lost |
Feedback tones
| Fill | Neutral | Success | Warning | Danger | Info |
|---|---|---|---|---|---|
| subtle | Not connected | Paid | Due soon | Overdue | New |
| solid | Not connected | Paid | Due soon | Overdue | New |
| square | Admin | Verified | Beta |
Count
51299+
Rules
- One or two words, sentence case, no punctuation.
- Status comes from data-status only; don't pick a tone that "looks right".
- Badges aren't buttons. A filter chip that toggles is a segmented control or a filter card.
<span class="badge" data-status="booked">Booked</span>
<span class="badge" data-tone="danger">Overdue</span>
<span class="badge" data-count>5</span>