Design system · WP1 · review gate 1

Component library

Every component the 70 admin screens are built from, in every variant and state. Values come from docs/design/DESIGN_SYSTEM.md, extracted from the canvases — nothing here was invented.

TOKENS
tokens.css
PRIMARY
--cmx-primary
HELD
--cmx-gold
DESTRUCTIVE
--cmx-danger-ink
A

Colour

no blue anywhere — this is deliberate
Primary
--cmx-primary
actions, links, positive
Accent
--cmx-accent
active nav, live
Gold
--cmx-gold
held / escrow
Danger
--cmx-danger-ink
destructive, reversed
Chrome
--cmx-chrome
sidebar, app frame
Ink
--cmx-ink
primary text
Muted
--cmx-muted-3
table meta
Border
--cmx-border
default rule
B

Status badges

tone carries meaning, never decoration
Confirmed Delivered Held Under review Failed Cancelled Draft Escrow Boarded

The rule that holds across all three surfaces: money not yet earned is gold, money released is green, money reversed is red. An agency must be able to tell what it can actually withdraw without reading a label.

C

Money

never a float, never a plain string
Available
FCFA 186,400

Withdrawable now

In escrow
FCFA 542,300

Released 24 h after completion

Refunded
FCFA -6,300

Commission returned pro rata

D

KPI tiles

the top strip of nearly every screen
Bookings today
4,182 +12.4%
vs. same day last week
Gross revenue
FCFA 18.4M +8.1%
all agencies
In escrow
FCFA 6.2M
across 41 agencies
Failed payments
37 +9
needs review
E

Buttons

every destructive action confirms and captures a reason
F

Identifiers

the formats the design actually prints
CMX-BKG-284119 CMX-PCL-90341 ESC-2026-884120 WDR-2026-011198 TKT-9F41-2266 EXEC-44 LT-4472-AB

Every row carries three identifiers: an auto-increment key that is never exposed, a ULID for API and URL use, and the human code above. Exposing the key would leak volume and invite enumeration.

G

Data table

carries most of the 70 screens
4,182 bookings
Booking ↑ Passenger Route Agency Status Gross Commission Net
CMX-BKG-284119 Chantal Mbila Douala → Yaoundé
Departs 07:30
 Sawa Voyages Confirmed FCFA 9,000 FCFA 630 FCFA 8,370
CMX-BKG-284120 Emmanuel Fotso Yaoundé → Kribi
Departs 07:30
 Étoile Voyages Held FCFA 7,000 FCFA 490 FCFA 6,510
CMX-BKG-284121 Aïssatou Bello Douala → Limbe
Departs 07:30
 Sawa Voyages Refunded FCFA 5,400 FCFA 270 FCFA -5,130
H

Empty state

the design draws one loading skeleton in 124 screens — see OPEN_QUESTIONS D3

No bookings match these filters

Try widening the date range, or clear the agency filter to see every agency.

I

Typography

mono for machines, sans for people
Douala → Yaoundé --cmx-fs-h1 26px Page title, big KPI value
Douala → Yaoundé --cmx-fs-h3 18px Card title, modal title
Douala → Yaoundé --cmx-fs-lg 16px Admin top-bar screen title
Douala → Yaoundé --cmx-fs-sm 13.5px Table cell
Douala → Yaoundé --cmx-fs-3xs 10.5px Badge
Douala → Yaoundé --cmx-fs-micro 9.5px Overline — the most common size in the design