Onafriq · Design system
One brand, every product
When MFS Africa became Onafriq, the new brand had to show up in every product the same way. I co-led the design system that made that happen, owning the variables, tokens and documentation behind it.
- Company
- Onafriq, formerly MFS Africa
- My role
- Product designer, co-led the design system
- What I owned
- Variables and tokens, documentation, components
- Timeframe
- 2023–2024
01
Under one roof
MFS Africa had grown far beyond mobile money. It had become a payments network across Africa and beyond, and its products had grown up separately: different screens, different patterns, different ideas of what the brand looked like.
The rebrand to Onafriq was a chance to bring all of it under one roof. A new logo and colours would only go so far on their own. The design system was how the new brand actually reached every product, from the consumer app to the tools businesses use every day.
02
One shape, everywhere
If there's one thing that makes Onafriq recognisable, it's the curve. Every holding shape keeps three square corners and rounds one. It softens a grid of hard edges, so the brand feels open and approachable rather than rigid.
It follows a simple rule: the curve is three times the margin. That meant it could be rebuilt at any size, from a billboard to a sidebar, and still look like the same shape.
The same curve in the navigation, the photography, the layouts and the product.
03
Brand foundations
The brand guidelines set the tone for everything else: an optimistic yellow, a deep charcoal to ground it, and two digital accents for moments that need more colour.
“Our brand imagery should demonstrate the positive impact we are making on the lives of the people we serve.”Onafriq brand guidelines
04
Product foundations: Zuri
Zuri was the design system behind every Onafriq product. This is where most of my work sat: turning the brand into variables and tokens that designers and engineers could build with.
Colour
Each brand colour became a full scale, from 050 to 900, so screens had enough range for backgrounds, borders, text and states. Yellow 500 stayed the hero.
Tokens
I set up the variables and tokens. Instead of picking a hex code, a designer picks a role, like “Primary button” or “Text & icon default”, and the token points to the right colour. Change the token once and every screen follows.
Typography
One typeface, Radikal, in a clear scale from H1 at 34px down to 12px labels and links.
Icons and flags
Line icons with a touch of yellow, and a set of country flags for the markets Onafriq works in.
05
Components
Navigation was the component every product shared, so it had to be right. Each item has a state for everything a user can do to it, and the sidebar ends in the brand curve.
06
Patterns
Components only go so far. Patterns show how they work together in a real moment, including when things go wrong. Uploading a document is a good example: every state a user can land in is designed.
07
Handing off to developers
A design system only works if what's in Figma is what ends up in the product. Because I set up the variables and tokens, a big part of my job was making sure engineers could pick a component up and build it without guessing.
I also sat with developers in Storybook to review the built components and check some of the tokens against the designs. It was a quick way to spot where the code and Figma had drifted apart before it reached users.
Every component came with
- All its states, side by side: default, hover, selected, open, disabled and error.
- Token names, not hex codes, so colour and type came straight from the system.
- Spacing and sizes taken from the same scale every time.
- Usage notes: when to use it, and when to reach for something else.
- Real content and edge cases, like long names, empty lists and files that fail to upload.
One name, from design to code
| Token | Value | In use |
|---|---|---|
| Primary buttonYellow 500 | #F0F000 | Save |
| Text & icon defaultGrey 800 | #242729 | Payments |
| Brand charcoalCharcoal | #2F3234 | Sidebar |
Designers and engineers used the same names, so “Primary button” meant the same thing in a Figma file, a ticket and the code.
08
From legacy to new
Not everything was built from scratch. Some components already existed and needed to be brought into the new system. Tooltips are a good example: the same job, with clearer hierarchy and a stronger primary action.
09
In use
Put together, the foundations and components give every product the same feel: the charcoal sidebar with its curve, yellow for the main action, and the same type and spacing throughout.
10
Impact and what's next
- One visual language across Onafriq's products, instead of the brand being patched on screen by screen.
- Change once, update everywhere. Because colours were tokens, a brand change became one change, not hundreds.
- A shared source of truth. Documentation meant designers and engineers worked from the same components and names.
- Beyond the product. I also produced marketing assets that carried the rebrand across social channels, which helped lift engagement during the transition.
A design system is never finished. When I left, parts of Zuri were still being built out, and new components were being added as products needed them.