Design system
The tokens and components every screen is built from. Press Tab to see focus styles.
Colour
Every text colour passes WCAG 2.2 AA: 4.5:1 for text, 3:1 for input borders and the focus ring. Colour never carries meaning alone; badges and alerts always add an icon and a word.
Tokens
--color-bg--color-surface--color-surface-sunken--color-surface-hover--color-border--color-border-strong--color-text--color-text-muted--color-text-subtle--color-brand--color-brand-hover--color-brand-subtle--color-danger--color-danger-hover
Brand contrast
- White on brand
- Brand on white
- White on danger
- Subtle text on white
Tones: text on background
- NeutralDraft, cancelled, handled8.28:1
- InfoScheduled6.71:1
- ActiveIn transit6.41:1
- SuccessDelivered5.78:1
- WarningWarning6.23:1
- CriticalCritical6.58:1
Typography
Inter, with tabular figures in tables, times, IDs and KPIs so numbers line up.
Type scale
- Trip TRP-24121 · Lahore → Karachi
- Trip TRP-24121 · Lahore → Karachi
- Trip TRP-24121 · Lahore → Karachi
- Trip TRP-24121 · Lahore → Karachi
- Trip TRP-24121 · Lahore → Karachi
- Trip TRP-24121 · Lahore → Karachi
- Trip TRP-24121 · Lahore → Karachi
Weights
Regular 400 · body text
Medium 500 · labels, buttons
Semibold 600 · headings
Spacing, radius and shadow
A 4px grid. Components never use raw pixel values.
Space
Radius
Shadow
Form controls
Every field has a visible label. Hints and errors sit under the label and are linked to the input, so screen readers read them too.
Text field
Optional. Up to 30 characters.
Enter the weight in kilograms.
Select
Where the truck is loaded.
Choose the pickup city.
Textarea
Visible to everyone on the dispatch team.
Tell us why the window changed.
Checkbox
Radio group
Badges
Every badge has an icon and a word, so it still reads in greyscale or for colour-blind users.
Trip status
Severity
Plain badge
Alerts
Critical alerts interrupt screen readers (role=alert). The rest are announced politely (role=status).
Tones
Check the plan
- Drop 1 opens 40 min before the truck can get there from the pickup.
Temperature out of range
Cards and empty state
Card
Cargo
What the truck is carrying
Pharma, 2–8 °C · 3,200 kg · 8 pallets
Card without a header
Cards group related details. The header row is optional.
Empty state
No trips match these filters
Try a different search, or clear the filters to see every trip.
Skeleton
Shown until saved data has loaded, so the page never flashes wrong content. The shimmer stops when reduced motion is on.
Table rows
Stat cards
KPIs. When a card filters the table, it becomes a toggle button with aria-pressed.
Clickable (filters)
Display only
Dialog and toast
Dialogs use the native <dialog> element: focus moves in, Tab stays inside, Esc closes, and focus returns to the button that opened it. A toast confirms what happened.
Dialog
Toast
Stepper
Steps you have reached are buttons, so you can jump back. The text line always says where you are; on phones it replaces the labels.
Step 2 of 4, step 3 reached
Error summary
Shown at the top of a form when Next or Save fails. It takes focus, and each link jumps to its field.
Pattern
Table
Sticky header, 48px rows, no zebra stripes. Sortable headers cycle ascending, descending, then back to the default order.
Sortable
| TRP-24118 | Saffron Hill Foods | 12,000 kg |
| TRP-24103 | Kestrel Pharma | 3,200 kg |
| TRP-24127 | Greyrock Cement | 18,500 kg |
Exception rules
What makes a trip need attention. The rules are configuration: this table is built from the same list the app uses.
11 rules
| Rule | When it fires | Suggested actions |
|---|---|---|
| Temperature out of range | The latest reefer reading is outside the cargo’s allowed band. | Contact driver, Escalate, Record action |
| Missed time window | A stop’s time window has closed and the truck hasn’t arrived. | Contact driver, Reschedule stop, Notify client, Escalate |
| Tracking lost | No position from the truck for more than 45 minutes. | Contact driver, Escalate |
| Late arrival risk | The latest ETA for a stop is after its time window closes. | Notify client, Reschedule stop, Record action |
| Driver hours limit | The driver is close to or over the 10-hour daily driving limit. | Plan rest stop, Reassign vehicle or driver |
| Vehicle or driver missing | A scheduled trip has no vehicle or driver within 12 hours of pickup. | Reassign vehicle or driver |
| Needs a refrigerated truck | Temperature-controlled cargo is on a vehicle without refrigeration. | Reassign vehicle or driver |
| Over vehicle capacity | The load is heavier than the assigned vehicle can carry. | Reassign vehicle or driver, Record action |
| Long wait at stop | The truck has waited at a stop longer than the 2 h free time (detention). | Notify client, Record action |
| Consignment note missing | The truck left the pickup without a consignment note (bilty) on file. | Mark consignment note received, Contact driver |
| POD overdue | No signed proof of delivery 24 hours after delivery. | Mark POD received, Notify client |