Two products. Separate patterns. One shared wallet ecosystem.

MSQ and SUT were evolving as separate Web3 products even though users could trade the same KWT token through both. The design infrastructure had not kept pace: buttons used different radii, typography drifted between surfaces, and colour changes required manually updating components.

In financial services, visual inconsistency isn’t just an aesthetic problem. It erodes exactly the kind of trust users need to feel when making decisions about their money.

As the design-systems lead, I had to create a standard four designers could share, seven engineers could implement, and four other stakeholders could understand without slowing ongoing product delivery.

Smaller. Sharper. Token-first from day one.

I rebuilt v1.0 from the foundation: tokens before components, followed by shared patterns, documentation and a coded reference engineers could use directly.

The principle behind v2.0: build for adoption, not comprehensiveness. A smaller system used consistently creates more value than a large library teams work around.

The See-Do Process: every screen shows what you can do next.

The guiding principle behind every MSQ component: a user should never look at a screen and wonder what they can do. Available actions need to be visible, not discoverable. This shaped button hierarchy, empty states, and notification patterns throughout the system.

A system teams could extend without breaking.

Designers now share the relevant components, tokens and documentation alongside each design. Engineers receive the implementation reference with the interface, while new additions are reviewed against an explicit use case and “When Not To Use” guidance before they enter the shared library.