Design System
Tailwind based design system built for most of my work and personal projects.
Scope
Enterprise‑grade design system originally built for NCEMA, later adapted for multi‑brand use across internal modules and partner surfaces
Role
Lead Product Designer (system strategy)
TL;DR
We created a token‑driven, Tailwind‑backed design system that keeps multiple NCEMA modules visually consistent while allowing brand/theming flexibility.
The token taxonomy follows Primitive → Semantic → Brand/Mode, with naming conventions inspired by Google Material Design. Components started from Tailwind primitives and were heavily customized for accessibility, RTL, and operational use‑cases.
“We could have taken a per-component tokenization approach, but the challenge was building a multi-branded system where custom components are frequently introduced. In such a setup, relying on per-component tokenization would have dramatically increased 💰 cost, complexity and maintenance cost.”
Problem
The initial challenge began at the very start of the NCEMA project — establishing a unified, consistent design identity. After the system’s success at NCEMA, we decided to expand its use across all projects with different brands . To achieve this, we built it in a way that allows very minor adjustments in color, shape, and behavior to suit each brand while preserving the same design foundation.
By using a combination of 🧩 tokens, variables, 🎨 styles, and most importantly scripts & plugins, we were able to achieve this and successfully apply it across 4 different brands.
Work in progress
——————————