Colour Coding
The traffic-light colour system for rental statuses, availability grid cells, and delivery / in-use / collection phase bands — always paired with labels.
Overview
Signals uses a shared traffic-light colour language wherever rental workflow or equipment availability is shown: status dots, badges, diary cards, and availability cells. Colour is always paired with a text label — never used alone — so the UI stays readable in light and dark mode and for colour-vision differences.
The same key component (<x-signals.legend>) renders the legend on the rentals index, the rental diary, the availability grid, and the availability phase band key.
Rental status (traffic light)
Statuses follow a red → green progression from quote to confirmed order, with black for complete / invoiced and greys for out-of-play states.
| Status | Colour | Role |
|---|---|---|
| Draft / Open | #71717a |
Neutral grey — pre-pipeline |
| Quote / Provisional | #dc2626 |
Red anchor — open quote |
| Quote / Reserved | #ea580c |
Orange-red — warmer, closer to conversion |
| Quote / Postponed | #e07a7a |
Muted desaturated red |
| Quote / Lost | #71717a |
Grey family — out of play |
| Quote / Dead | #52525b |
Darker grey — out of play |
| Order / Active | #16a34a |
Green anchor — confirmed |
| Order / Dispatched | #f59e0b |
Amber — operational, moving toward completion |
| Order / On Hire | #84cc16 |
Lime |
| Order / Returned | #4ade80 |
Light green |
| Order / Checked | #22c55e |
Green-500 |
| Order / Complete | #18181b |
Black — complete / invoiced |
| Order / Cancelled | #a1a1aa |
Light grey — must not read as quote-red |
Document state chips (Enquiry / Quote / Order) use the matching badge tokens s-badge-draft, s-badge-quote, and s-badge-order (grey / red-family / green-family).
Availability grid
Availability cells reuse the same traffic language:
| Cell state | Colour | Meaning |
|---|---|---|
| Available | #16a34a |
Free capacity |
| Warning | #f59e0b |
Low but positive |
| Shortage | #dc2626 |
Demand exceeds stock |
| Booked | #3f3f46 |
Black-family neutral — fully booked |
Weekend columns keep the same hues at reduced opacity (white colour-mix), matching the existing availability token approach.
Phase bands (non-traffic accents)
Delivery / In Use / Collection bands mark progression along a hire, not risk. They use a deliberate non-traffic accent family so they are never confused with status colours:
| Phase | Colour |
|---|---|
| Delivery | #3b82f6 (blue) |
| In Use | #8b5cf6 (violet) |
| Collection | #06b6d4 (cyan) |
Admin overrides
Built-in rental status colours are seeded from the enum defaults and resolved through the Rental Status lists. Administrators can override a status colour in Admin → Lists (Rental Status metadata). Customised colours are preserved across upgrades; only rows that still match the previous shipped default are updated when the platform ships a new ramp.
Related
- Rentals — lifecycle and status transitions
- Rental Diary — status-coloured cards and combined key
- Equipment Availability — grid and phase keys
- Component Library —
<x-signals.legend>reference