← SadaPay · Case study · 2021 – 2022

Tokens before they were trendy.

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.

Scroll

Nukta · Design System · SadaPay · 2021 – 2022

Eight designers.
Zero shared language.

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.

1st Token-based design system in Pakistan's tech industry

Tokens first.
Components second.

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 appearancecolor-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

The system
outlasted the designers
who built it.

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.

Back to SadaPay
Next Case Study SadaBiz