C. Status pills
C.0 Reference samples (from crops/org5-settings.png using png.py; exact pixel values):
| Colour | Where | Matches |
|---|---|---|
| #991B1B (153,27,27) | “Delete organisation” heading | Tailwind red-800 |
| #B91C1C (185,28,28) | button text and 1 px border | red-700 |
| #FCA5A5 (252,165,165) | 1 px card border | red-300 |
| #15803D (21,128,61) and #DCFCE7 | the dominant greens in full-att11.png |
green-700 / green-100 |
The greens are not used: Citron covers success (owner preference).
Shape (UX spec P10 + brand p.16): fully round, 24 px tall (32 on public), 12/16 semibold, horizontal padding 8–10. The word is mandatory and the icon is optional. Neither source shows icons in pills.
Historical — do not copy (1A-E01): the matrix below predates the small-mark/large-surface distinction.
| Tone | Light | Dark |
|---|---|---|
| success | bg-success text-on-success (13.23) |
bg-success-soft text-success-ink (14.52) |
| warn | bg-warn text-on-warn (10.37) |
bg-warn-soft text-warn-ink (12.41) |
| info | bg-info text-on-info (9.23) |
bg-info-soft text-info-ink (11.63) |
| emphasis | bg-emphasis text-on-emphasis (5.51) |
same |
| accent | bg-accent-soft text-accent-ink (5.16) |
same (7.19) |
| danger (danger-zone vocabulary) | bg-panel border border-danger-line text-danger (6.47) |
same (9.71) |
| neutral | bg-surface border border-line text-ink (12.64) |
same (18.14) |
Current rule (v2.0.1, 2026-11-13): The dark success/warn/info cells above are historical. Use the Current example immediately below (lesson 9, app toneMarkClasses, SW-373 on 2026-11-13). Accent, danger and neutral retain their documented exceptions. (1A-N07) — supersedes the line above; see docs/current-rules.md#cr-status-01.
Current example (1A-E01): same classes in light and dark for small status marks; each pill includes a word.
| Tone | Both themes |
|---|---|
| success | bg-success text-on-success |
| warn | bg-warn text-on-warn |
| info | bg-info text-on-info |
| emphasis | bg-emphasis text-on-emphasis |
| accent | bg-accent-soft text-accent-ink |
| danger | bg-panel border border-danger-line text-danger |
| neutral | bg-surface border border-line text-ink |
| Domain · status (backend value) → tone · word |
|---|
Request: draft neutral “Draft” · pending_approval warn “Pending approval” · accepted info “Accepted” · rejected danger “Rejected” · issued accent “Issued” (today danger, must be fixed) · partially_returned warn “Partly returned” · returned success “Returned” · closed_with_issue danger “Closed with issue” |
Loan / self-checkout: checked_out accent “Checked out” (today danger) · returned success. Return condition: no_issue success · needs_fix warn · damaged danger · missing danger |
Asset: available success · reserved info · issued accent · maintenance warn · damaged danger · lost danger · retired neutral |
| Public availability: Available success “N available” · Limited emphasis “N left” (p.16) · Unavailable neutral |
Event: draft neutral · published success · cancelled danger · completed info |
Registration: pending_approval warn · registered success · waitlisted info · rejected danger · cancelled neutral · attended accent |
Booking: pending warn · confirmed success · rejected danger · cancelled neutral · completed info · no_show danger “No-show” |
Payment: pending warn “Unpaid” · paid_online success “Paid online” · paid_offline success “Paid offline” · waived info · canceled neutral “Cancelled” |
Refund: pending warn · succeeded success · failed danger |
Machine: idle success “Available” · running accent · reserved info · maintenance warn · offline neutral |
Service request: pending warn · accepted info · in_progress accent · completed success · collected neutral · rejected danger · failed danger |
Certificate: pending warn · rendering info · active success · failed danger · revoked neutral |
Copy changes (“Unpaid”, “Partly returned”, “N left”) need owner sign-off. The other words keep the backend labels.
StatusStepper: completed = success, current = accent-soft + aria-current="step", issue = the danger
pill, upcoming = neutral.
Part of Space Works brand → SpaceWorks UI: design-system spec, published from docs/ui-brand-spec.md. Edit it there.