Overview

IDP — the Imam Development Program — is a non-profit supporting Imams across 14 African countries. As their brand designer I kept making one-off assets: a poster here, a campaign there, a social post next week. It all looked fine on its own, but nothing was reusable, and the brand only lived in flat files.

So I built a design system. The idea was to take IDP's brand — its colours, type and logo — and turn it into a proper kit you can actually build products with: tokens, components, and real screens to prove it works.

The challenge

A brand guideline tells you what the colours are. It doesn't help you build anything. Every new design still starts from scratch, and small things drift — a slightly-off pink, inconsistent spacing, a button that looks different on every page.

I wanted the opposite: a system where the brand is decided once and everything else just inherits it. Pick the right component, and it's already on-brand — right colour, right spacing, right corner radius — without anyone thinking about it. The goal was less "rules to follow" and more "Lego blocks that can't be assembled wrong."

Colour, in three layers

The colour system has three tiers. At the bottom are the raw colours — IDP's pink, blue and grey, each expanded into a full range of light-to-dark shades. In the middle are "semantic" tokens that describe a job instead of a colour: bg/brand, text/title, border/focus. At the top, components use only those job-based tokens — never a raw colour code.

The payoff: if IDP ever tweaks its pink, I change it in one place and every button, badge and card updates instantly. Nothing is hard-coded.

One type scale, one serif for sacred moments

The type scale runs from big display headings down to captions, all on a fixed set of sizes and weights so hierarchy stays consistent everywhere. The brand serif, Albra, is locked to one job only — quotes and the occasional special header — so the religious weight of certain content gets its own voice without making everything feel heavy.

The building blocks

The kit covers the everyday pieces: a set of 24px icons, buttons in four levels of importance, and full form controls — checkboxes, radios, switches, text fields, dropdowns — each with every state already designed (default, hover, focus, error, disabled). Plus badges and tags for status and categories. You don't design these again; you pull them off the shelf.

Bigger pieces, built from the small ones

The smaller parts combine into real components: the IDP logo lockup, web and mobile navigation, content and impact-stat and quote cards, and overlays like dialogs, banners and toasts. A "Sponsor an Imam" dialog, a donation-confirmation toast, an impact card reading "40,000 Imams to be supported across Africa by 2027" — all assembled from the same blocks.

How it's wired (the part I'm proudest of)

There's a whole page documenting how the system works — how things are named, how a colour flows from raw value to token to component, and the Figma habits that keep it tidy: every component built with auto-layout, every spacing and colour pulled from a variable, each piece carrying its own description. It means someone else could pick this up and extend it without guessing.

Seeing it work

The real test of a system is whether you can actually build with it. So I assembled two full concept screens — a web landing page and a mobile home screen — using nothing but pieces from the kit. No new colours, no off-system spacing. That's the proof it holds together.

How I built it

I built the whole thing in Figma using variables and component properties. Colours, spacing, radius and type all live as tokens, so the brand is defined once and flows everywhere. Components use toggles and editable text instead of a dozen near-identical copies — one button covers every type and state. The aim throughout was a system other people can use, not just admire.

The results

The brand went from a set of flat files to a working kit. New designs start from on-brand components instead of a blank canvas, a brand change cascades everywhere automatically, and the system can grow into real web and mobile product — not just social posts.

For me this is the project where design and engineering finally met. Token pipelines, naming conventions, components that can't be assembled wrong — it's systems thinking, just pointed at design instead of code.