Skip to content

MOKASA · The brand world · v1, October 2026

Quiet everywhere. Magenta where the money moves.

Warm neutrals, one bright signal and plain words. Everything that makes MOKASA look and sound like itself, from the wordmark to the box on the back of a delivery bike.

Meet the brand
The M tile. The one coloured object in the system.Rendered in HTML and CSS. No photos.

01 / The identity

One word, in capitals. Nothing to decode.

The logo is the name, set heavy and tight. No bubble, no dot, no symbol fighting for attention. It sits in ink on warm white, and steps aside for the product.

The signature

Ink on canvas. Use this version first. In dark mode it flips to canvas on ink.Wordmark typeface to be finalised

The magenta lockup

White on magenta, 4.7:1. The only time magenta is allowed to be the background.

For dark

#F2F1EC on the band. Never pure white on black.

Clear space and minimum size

Clear space
x = half the cap height, on every side. Nothing enters it.
Wordmark minimum
72px wide on screen, 20mm in print.
Below that
Use the M tile instead.

What it stands for

Served well.

We can't serve everyone. The businesses we serve pay for it, and get a team that answers.

 

Always on.

The shop keeps selling at 2am. Customers ask, order and pay without leaving WhatsApp.

 

Honest by design.

The agent never invents a price and never confirms a manual payment. A person does.

02 / The M tile

When the name won't fit. One letter does the work.

A white M, drawn on a 1024 grid, in a magenta rounded square. It is the app icon, the favicon, the agent avatar in the inbox and the profile photo on our own WhatsApp.

Construction

112112 500380 r 232
Legs 112 units, diagonals 104, the V stops 52 units above the baseline so the counters stay open at 16px. Corners are softened with a 6 unit round join, echoing the tile.

Sizes

128
64
32
16 min
Ink

Rules for the tile

  • Clear space is a quarter of the tile on every side.
  • Minimum 16px on screen, 6mm in print.
  • Magenta tile by default. Ink tile on magenta or busy surfaces, and in the app chrome until the final logo lands.
  • App stores and WhatsApp crop the corners for you, so those exports are square.

App icon, home screen

Favicon, browser tab

WhatsApp profile photo

The URL and chat above are illustrations, not live addresses.

03 / Colour

Magenta is a signal. Not a wallpaper.

Ninety percent of every screen is ink and warm neutral. Magenta appears where money or life is happening: the button that sells, the live dot, the agent, the one number that matters. Tap a value to copy it.

  • Signature fill

    Magenta

    RGB 224 21 111

    Primary CTA, live dot, the M tile, one chart highlight. White text on it, 4.7:1.

  • Hover and text

    Deep magenta

    RGB 184 21 92

    Hover state, and magenta whenever it has to be read as text on light. 6.1:1.

  • Soft tint

    Soft magenta

    RGB 253 231 241

    The "AI handling" pill and the takeover banner. Nothing bigger.

  • Does the everyday work

    Ink

    RGB 31 31 27

    Text, the wordmark, in-app primary buttons, active tabs, the AI chat bubble.

Warm neutrals

Paper, cream and ink. Borrowed from good stationery.

Status, never brand

Paidok #2F6B4C on #EAF3EE · 5.6:1
Awaiting paymentwarn #8A5A0B on #FBF3E2 · 5.4:1
Failedbad #B42318 on #FDECEA · 5.8:1
Out for deliveryinfo #2F5F8A on #EAF1F8 · 5.9:1

The magenta budget

Count the magenta.

More than about four magenta spots on one screen means some have to go.

Allowed

  • One magenta button per screen
  • Live dot, unread badge
  • Active nav marker
  • AI pill, agent tile
  • One chart series or point
  • Focus ring, selection

Never

  • Section or card backgrounds
  • Headings and body links
  • Icons and chat bubbles
  • Card borders, table rows
  • Gradients
  • WhatsApp green as brand

Contrast, checked

AaWhite on magenta4.66 : 1 · AA
AaDeep magenta on canvas6.09 : 1 · AA
AaDeep magenta on soft5.42 : 1 · AA
AaMagenta text, dark mode6.49 : 1 · AA
AaInk on canvas15.8 : 1 · AAA
AaMuted on canvas5.13 : 1 · AA
AaSubtle, 24px and up only3.47 : 1 · AA large
Aa#E0156F as text4.46 : 1 · avoid

04 / Typography

Big, tight, one family. Mono only for things you copy.

Inter Tight for headlines and numbers, Inter for everything you read, including order IDs and MoMo references with equal-width digits. Two families, both free on Google Fonts.

Inter TightDisplay · 600 · tracking -0.02 to -0.045em · line height 1.0

Your shop
never sleeps.

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

GHS 1,250.00
₦48,500 · KSh 3,200

InterBody and UI · 400 to 600 · ss01 cv11

Ask. Order. Pay.
All in one chat.

Regular 400. Your order is on the way.

Medium 500. Awaiting payment.

SemiBold 600. Confirm payment.

Inter, references500 · tabular figures · uppercase

#MK-1042 · MOMO REF 7Q2K9XW1
PAYSTACK T48201933 · 21:07

The scaleMarketing / app
Hero 40-72
Sell while you sleep.
H2 28-36
Payments, checked.
Lead 20
Works on your existing WhatsApp number.
Body 16 / 14
Customers browse your catalogue and pay with MoMo or card.
Label 11
Sales via WhatsApp · this week
KPI 22-30
GHS 18,420

05 / Voice and copy

Short, sure, local. Like a good shop manager.

Sentences under twelve words. Cedis, naira and shillings. MoMo, Paystack, Lekki and Westlands. No em dashes, no exclamation marks, no emoji in the product.

  • 01

    Say what happens.

    Headlines describe the result, in plain words.

    We sayCustomers order and pay inside WhatsApp.

    We don'tUnlock seamless omnichannel commerce experiences.

  • 02

    Numbers prove it. Real ones.

    Prices, limits and our own measured timings. Never invented stats, ratings or logos.

    We sayPayment link sent. Order #MK-1042, GHS 450.

    We don'tTrusted by 10,000+ businesses. 300% more sales.

  • 03

    Confident, not loud.

    Premium means calm. One idea per line.

    We sayYour shop never sleeps.

    We don'tSupercharge your sales with revolutionary AI!!!

  • 04

    Say what the AI won't do.

    Honesty is part of premium. Limits build trust.

    We sayThe AI never confirms a manual payment. You do.

    We don'tFully autonomous. No human needed, ever.

Our lead line

Your shop never sleeps. Neither do your orders.

Seasonal · Black Friday

Don't lose orders this Black Friday. Let the agent answer.

Buttons are verbs

Confirm paymentHand back to AIStart free

Empty states are honest

No orders yet

Orders appear here the moment a customer pays in WhatsApp.

Talk to a human

"You are replying. AI is paused on this chat."

Takeover copy says exactly who is in charge.

06 / In the product

The product is the picture. The brand stays small.

Inside the dashboard the logo shrinks to a corner and magenta marks only what is live. In WhatsApp the customer sees the shop, not us. That is the point.

Dashboard

Logo top left, small.

Wordmark at 72px in the sidebar, the tile in the breadcrumb. The work is the hero.

Magenta count

Four spots, no more.

Active marker, unread badge, live dot, one chart series. Everything else is ink.

WhatsApp

The shop's brand, not ours.

Customers see the business name and photo. MOKASA appears once, on the checkout.

07 / The everyday

Small things. Same restraint.

Ink on natural materials, the tile as the one spot of colour. The same rule as the product: if it can be quiet, it is.

The tote. Undyed canvas, ink print.
The cap. Ink crown, one magenta patch.
The mug. For the owner checking orders at 6am.
Stationery. Ink wordmark on paper, the magenta lockup only on the card back. Names are illustrative.
Lid life. Stickers for people who sell in their sleep.
The 2am notification. The shop sold something while the owner slept.
The counter card. The shop's name leads, ours follows. Sample QR, not scannable.

08 / In the world

Made for the street. Built to be read from a bike.

At any size the system is the same: warm white, ink type, one magenta tile. It holds up on a billboard on the Spintex Road and on a box in Lagos traffic.

The billboard. The lead line, as big as it gets. Warm white, never a magenta wall.
The window sticker. White vinyl, ink type. Never WhatsApp green.
The rider box. Matte ink, wordmark in canvas, one tile.

09 / The sticker sheet

Small stickers. Straight talk.

For counters, laptops, cool boxes and rider helmets. Same rules as everywhere: ink, white, soft magenta, and the tile.

  • Your shop never sleeps.
  • Order on WhatsApp
  • Ask. Order. Pay.
  • Paid. Packed. Sent.
  • Open all night on WhatsApp
  • Served well.
  • Accra · Lagos · Nairobi
  • Ask us anything. Even at 2am.

10 / Do this, not that

Keep it plain. The plainness is the brand.

Most mistakes come from adding things. A bubble, a dot, a glow, a green. Take them away.

  • Do: Ink on warm white.

    The default, every time it can be.

  • Do: White on the magenta lockup.

    The one place magenta fills a whole surface: the lockup, the card back, the tile.

  • Do: Canvas on the dark band.

    One dark band per page, and the footer.

  • Never add a speech bubble.

    We are not a chat app. The bubble is retired, for good.

  • Never add a dot.

    No full stop, no live dot, no accent on the wordmark.

  • Never use WhatsApp green as brand.

    Green lives inside the phone screen, nowhere else.

  • No large magenta backgrounds.

    Except the dedicated magenta lockup. Magenta is the signal, not the room.

  • Don't colour the wordmark magenta.

    Ink, canvas, or white on the lockup. Never pink type on white.

  • Don't stretch it or add effects.

    No squash, no shadows, no glows, no gradients, no outlines.

11 / Downloads

The whole kit. Ready to use.

Letters are outlined, so the files look right with no fonts installed. SVG scales to any size. PNG is high resolution with a transparent background unless noted.

Wordmark typeface to be finalised. These files are the interim mark in Inter Tight 800.

  • WordmarkInk, transparent, for light backgrounds
    SVG wordmarkPNG 2400
  • Wordmark for dark#F2F1EC, transparent
    SVGPNG 2400
  • Magenta lockupWhite on #E0156F, solid, clear space built in
    SVGPNG 2400
  • M tileMagenta, rounded, transparent corners
    SVGPNG 1024
  • M tile, inkFor magenta or busy surfaces
    SVGPNG 1024
  • App icon1024 square, full bleed. Stores round the corners.
    SVGPNG 1024
  • WhatsApp avatar640 square, safe inside the circle crop
    SVGPNG 640
  • Favicon32px PNG, plus an SVG for modern browsers
    SVGPNG 32
Palette variablespalette.css · light and dark tokens Palettepalette.json · hex, RGB, roles, contrast

We can't serve everyone. The people we serve are served well.

Get the files Back to the top