Every screen in the HQ dashboard and all five mobile apps is built from the tokens and components on this page.
Approving this page approves the visual language of the entire platform.
Brand colours
Three brand colours with strict roles. Green means do the thing: primary actions and positive states.
Magenta means look here: brand identity, active navigation, emphasis and alerts. Navy is structure: sidebars, headers and primary text.
A magenta and a green button of equal weight never sit side by side.
Primary action · Green 500#37A668
Brand accent · Magenta 500#B41E77
Structure · Navy 900#212839
Magenta 50#FDF0F7
Magenta 100#FADCEC
Magenta 200#F2B6D6
Magenta 500#B41E77
Magenta 600#991960
Magenta 700#7A1450
Green 50#EDF8F2
Green 100#D6EFE2
Green 200#AEDFC6
Green 500#37A668
Green 600#2C8553
Green 700#216640
Navy 900#212839
Navy 800#2C3448
Navy 700#3B4459
Navy 600#4E586E
Navy 500#66718A
Neutral 100#EDF0F3
Colour discipline. Green and magenta never compete for the same job.
Semantic colours (warning amber, danger red, info blue) are derived and reserved for status, never used as brand decoration.
Success#37A668
Warning#C77A0A
Danger#C63434
Info#2563A8
Typography
Three families, each with one job. Every column of figures uses tabular numerals so digits align perfectly;
this single detail does more for enterprise credibility than anything else. Fonts are self-hosted, so they render identically offline.
Display & headings · Plus Jakarta Sans 600 / 700 / 800
Network overview, 1,499 tonnes on hand
Geometric, modern, premium
Body & UI · Inter 400 / 500 / 600 / 700
The quick brown fox jumps over the lazy dog. Enterprise users want information:
13 px body, tight line height, generous horizontal padding.
Excellent at small sizes. 13 px is the default body size across the dashboard.
Tabular numerals throughout: 1,111,111 and 8,888,888 occupy identical width.
Type scale
1112131518222836
Headings track at -0.02em. Uppercase labels track at +0.06em, like the section labels on this page.
Logo
The zebra head is used as supplied on light surfaces and inverted to white on navy. Clear space equals
half the logo height on every side. The mark is never recoloured to magenta or green.
On light surfaces · as supplied
On navy · white version
ZEBRA CROPBANK
Sidebar lockup · logo + letter-spaced wordmark
Shape, spacing & elevation
Everything sits on a 4 px grid. One elevation language: cards are a 1 px neutral border with a whisper of shadow.
Borders and heavy shadows are never mixed.
Corner radius
10
14
20
pill
Elevation
sm · cards
md · popovers
lg · drawers
Transitions run at 150 ms. Nothing bounces.
Components
A working sample of the shared component library. These are the same styles the prototype runs on, not illustrations.
Buttons
Primary is always green: one clear next step per screen. Magenta is never a button colour.
Status badges
PaidAllocatedIn transitPendingHeld for reviewCancelled
Every lifecycle in the platform (orders, movements, payouts, invoices) maps to this one badge set.
Form fields
kg
Bags convert live: 45 bags of maize = 4,500 kg
Enter a valid phone number.
Toggles & segmented control
BuyingNot configured
A disabled toggle communicates the activation rule: unconfigured channels can never be switched on.
KPI tile
Stock on hand
1,499t
+8.4% vs last period
Progress stepper
Submitted
Allocated
Zaria · 120.00 t, Gboko · 40.00 t
In transit
Live truck tracking
Delivered
Data table
Bank
Manager
Capacity
Stock on hand
Status
Makurdi
Terver Akaa
2,500.00 t
449.25 t
Active
Zaria
Aisha Mohammed
3,000.00 t
446.00 t
Active
Wukari
Danjuma Agbu
1,000.00 t
4.20 t
Setting up
13 px rows, uppercase 11 px headers, numerics right-aligned in the mono face. Sortable headers, hover states and designed empty states everywhere.
Charts
Inline SVG, no chart library. Series colours (green, magenta, blue) are validated for colour-vision-deficiency separation. Hover any mark for a tooltip.
Zebra CropBank design system v1.0 · sign-off gates the development phase
