← SadaPay · Case study · 2021 – 2022
Pakistan's first token-based design system.
SadaPay was growing fast — a team of eight shipping in parallel with no shared language. Components existed but weren't systematic. I built Nukta in 2021 — a token-first design system that bridged design and engineering with one shared vocabulary.
Nukta · Design System · SadaPay · 2021 – 2022
SadaPay's design team had grown from one to eight. Multiple product squads shipping features in parallel meant inconsistent spacing, mismatched colors, buttons that looked different on every screen. Designers and engineers were speaking different languages.
Every new hire meant more divergence. Every feature shipped without a system meant more design debt. Components existed, but they were patches on a growing problem — not a foundation anyone could build on.
I started with an audit — every screen, every component, every color value across the entire product. Dozens of near-identical grays. Inconsistent type scales. Padding values that varied by screen.
Before designing a single component, I defined the primitive tokens: colors, spacing, typography, elevation, radii. Then I mapped those primitives to semantic tokens that described intent, not appearance — color-surface-primary instead of gray-900. The system could adapt to light mode, dark mode, or new brand colors without touching a single component.
I worked with engineering from day one. Every token in Figma had a corresponding token in the codebase. No translation layer, no interpretation — the same language in both tools.
A contract between design and engineering — a shared source of truth that both teams could reference, contribute to, and rely on.
The thesis behind Nukta
Nukta gave SadaPay consistency at scale during a period of rapid growth. New designers onboarded faster because the system taught them SadaPay's design language. Engineers stopped guessing at spacing and color values. Handoff became a non-issue — both sides spoke the same token language.
Most importantly, Nukta survived designer turnover. When team members left and new ones joined, the system held. The product stayed consistent because the knowledge wasn't in people's heads — it was in the system.