WorkImam Development Program

A design system for a non-profit working in 18 countries.

Client: Imam Development Program
Year: 2026
Services: UI/UX, Design
We made: Colour, type and spacing tokens, Components with every state, Templates for campaigns and reports, Developer handoff in Figma, CSS and JSON

Two component sheets from the IDP design system, buttons and colour tokens, in browser windows

The brief

The Imam Development Program supports imams in 18 countries. Its brand lived in flat files, so every campaign image, social post and report started from a blank page.

The problem

Pieces took weeks or months, and the website, Instagram and reports didn’t match, because the outside developers matched colours by eye.

Before.

After: a social post on IDP pink, made by the marketing manager on the system — After, made by the team on the system.

The button component in four levels, each in its default, hover and disabled state

The colour primitives: rows of swatches from light to dark with their hex values

A donation dialog, four banners and a toast, built from the same small components

Form controls: checkboxes, radios, switches, text inputs and dropdowns in every state

What we did

We audited what existed, talked to the people who publish and the people who build, and turned the brand into a system in Figma: three layers of tokens, components with every state drawn, templates for the pieces the team makes most, and a handoff in the formats the developers asked for.

How it landed

The fundraising and marketing managers now make their own campaign pieces on it, and the developers build from the same tokens. The new website and the Imam Portal are built on it.