RouteWise
ePOD design system · v0.1 · product UI on Nocturne, presentation on Industry
01 Colour
Ground
--color-bg
--color-bg
Surface
--color-surface
--color-surface
Accent
--color-accent
--color-accent
Text
--color-text
--color-text
Status — always colour + icon + label
✓ Complete
#5CBF8E
#5CBF8E
! Attention
#E3A947
#E3A947
✕ Exception / missing
#E8696B
#E8696B
→ In transit
#6AA4E6
#6AA4E6
○ Not started
neutral-600
neutral-600
02 Type · Inter, tabular figures
Display 42/500From paper to proofH2 32/500Control towerH4 20/500TRP-24471 · Sasolburg → MaputoKPI 36/50087.4% R 12 480 000Body 14/4003 × 50 kg bags damaged at drop. Photos captured 11:42 SAST, received 11:44.Label 11 capsPredicted ETA
03 Status chips
✓ Delivered! Predicted late✕ Stamp rejected→ In transit○ Not started◆ DG Class 8✦ AI suggested
04 Buttons
05 Form controls
06 Cards & KPI
On-time
91.2%
Open exceptions
7
07 Map pins
TransitAttentionExceptionBBorder · 6h 10m
08 Table
| Trip | Status | Stops | ETA |
|---|---|---|---|
| TRP-24471 | → In transit | 2/4 | 16:40 |
| TRP-24488 | ✕ Shortage | 3/5 | 18:05 |
09 Mobile components · 48px+ targets
⚡ Offline · 7 items waiting · last sync 14:32
50 kg bag · Blend 2:3:4
37
10 Chart style
POD turnaround (hours) · Illustrative
— RouteWise- - Paper baseline