RakbankMaking UI creation scalable through a design system

Context

Two designers serving 15+ product teams with no shared tokens, library, or handoff standard. Every engineer received screenshots or PDFs. The only thing that scales in that situation isn't more designers — it's infrastructure.

Challenge

15 product teams solving the same spacing, button states, and RTL from scratch. Design-to-engineering handoff took three weeks per feature. No shared source of truth meant every implementation was a guess.

My role

I led the system from scratch. I owned the token architecture, component library, documentation strategy, and the rollout across all 15 teams.

What I changed

• Built the token layer first — colour, typography, spacing, motion — with Arabic/English RTL switching in the token layer itself, not as a per-component override. A shared library fixes visual inconsistency for designers. Tokens give engineers the same source of truth.
• Shipped 200+ unique components and 2,287 product instances on top of that layer.
• Wrote documentation for engineers, not designers: implementation guidance, acceptance criteria, edge cases. If an engineer can build a correct implementation without asking a designer to clarify, they will.
• Defined the adoption path so teams could ship without constant design gatekeeping. Result: adopted across teams I was never directly involved with.

Outcome

Adopted across all 15+ product teams. Handoff time: three weeks to four days. The governance gap I would fix in hindsight: no defined process for when a new pattern becomes a component vs a one-off. Three independent appearances in production should be the threshold. Until then, solve locally.