Afriex design system

Afriex has two products. Over 500,000 people across 30+ countries use the app to send and receive money, and businesses move over $40M a month through the merchant dashboard.

Both were designed feature by feature as the company grew. The dashboard ended up with more than 30 modals, each one made for the feature it shipped with. Engineers kept pointing out that they didn’t match, and there was no single place to check which one was correct.

I built one library that covers both products. Colour, spacing, radius, icons and motion are shared, and each product keeps its own components and patterns.

A switch at the top of every page moves between the app and the dashboard, so designers and engineers on either product read from the same place.

The modals were the most visible problem, so I started there. They now share one width, one radius and one overlay, and the primary action always sits on the right. I also removed the header icons and explainer lines most of them carried.

Drawers open beside a table when someone needs more detail, so they don’t lose their place. Tables use the same filters, row heights and status badges across the dashboard.

Each component has a variant for every state it can be in, including empty, loading and error. When an engineer builds a new screen, the error state has already been designed.

The app shares the same foundations and has its own set of components, sized for a phone. They follow the same rules for states as the dashboard, so moving between the two products doesn’t mean learning a second system.