Bright Bloom · Palette D
Every token below is wired to app/globals.css. Flip the theme to check both canvases: the customer surface runs on Petal White, operator surfaces on Deep Ivy.
The five swatches exactly as the design doc specifies them, with the role each one plays in this product.
Background
Deep Ivy
#14201A
Base canvas on operator surfaces.
Primary
Meadow Green
#3FAE73
Brand identity and confirmations. Never “do this”.
Accent
Bright Bloom Yellow
#FFE94A
Caution only: overdue, capacity, hazardous.
Accent 2
Violet Pop
#7C3AED
The one and only primary action colour.
Neutral
Petal White
#FBF8F0
Base canvas on the customer surface.
Five swatches don't make a UI. These come from the doc's own Bright Bloom mockups rather than being invented, except the destructive red, which the palette simply doesn't have.
Elevated surface
#1C2E23
From the doc's mockup
Green text tint
#7FD9A6
From the doc's mockup
Muted green text
#CFEBD9
From the doc's mockup
Warning surface
#2A2612
From the doc's mockup
Warning text
#D8D0A0
From the doc's mockup
Destructive
#E5484D
Added, not in the palette
Sora sets headings, Manrope sets body. Sizes and weights come straight from the doc.
Display
52 / 1.05 / 800
Nairobi collections
H1
36 / 1.15 / 800
Nairobi collections
H2
28 / 1.2 / 700
Nairobi collections
H3
20 / 1.3 / 700
Nairobi collections
Body
16 / 1.6 / 400
Nairobi collections
Small
13 / 1.5 / 500
Nairobi collections
Micro
11 / 1.4 / 700
Nairobi collections
The status vocabulary a dispatcher scans hundreds of times a day. Tone is chosen by what the state means, never by what looks good next to it.
Nothing has happened yet
Acted on, carries the action colour
Still in motion
Confirmation
Caution, needs attention
Failure
Inert, not a failure
Told apart by glyph, not colour. Kerbside bins are colour-coded in the real world, but borrowing that here would put green on organics and red on hazardous, directly contradicting green-means-confirmed and red-means-failed.
Hazardous is the exception that proves the rule: it earns caution styling because it changes what a crew must do, not because of what it is.
One primary action per screen, in Violet Pop. Green is available for confirmations that are genuinely terminal.
Four tones, four jobs.
Cards sit one step above the canvas. Skeletons hold the same shape as the content they stand in for.
Westlands · Route 2
14 stops · KDA 442J
Next stop: Rhapta Road, 09:40