Hello, I'm Muwaffaq.
I build products I'd want to use myself. If I wouldn't open it twice, I don't ship it.
I've designed and built 8 websites and apps, set up 5 design systems, made 4 launch films, and shipped 2 products of my own to production. Most recently I rebuilt QuickPay, a Nigerian money app: 105 messy screens became 91 on one token system with dark mode.
I work from Figma variables to production code in Next.js, Astro and Tailwind, and I use Claude Code and Figma MCP to move at the speed of a small team, while I hold the craft bar myself.
Selected work
Real recordings of each productMore work
Playground
See all explorations →
Currently
Grip has a signal. Nūring builds a smart glove that reads grip to measure effort, recovery and accumulated load, starting with baseball. I design and build across the product: the athlete app, the design system and the web.
- Athlete web appGlove pairing, onboarding and the athlete's view of their dataDesign · Engineering · On request
- Engineering workFront-end and product engineering across Nūring's appsEngineering · On request
- Nūring design systemTokens, icons and components shared by every surfaceDesign system · On request
This work is confidential. I'm happy to walk you through it on a call.
Design systems
I build the tokens first, so dark mode and Arabic become a setting, not a redesign. Each system has a full write-up: why it was needed, how it's structured, the rules, and what it changed.
Try it on QuickPay: same component, three modes.
QuickPay · Home
The real screen from the Figma file, rebuilt from its components. Switching changes only the variable mode, or the direction for Arabic.
color/bg/canvas #f7f6f2color/bg/hero #d63f06color/bg/brand-subtle #fff4edcolor/text/primary #2d2b28direction ltr
Light and Dark values come straight from QuickPay's Figma variables. The Arabic version isn't in Figma yet; its copy needs a native review.
Launch films
- treetiProduct launch film4K
- AttikLaunch video and reelsSocial
- AlmutamirBefore and afterCase film
How I work with AI
- Claude Code to build and test real apps. Figma MCP to set up systems and rename hundreds of layers.
- It defaults to generic layouts and misses edge cases, so I set the tokens first, check every contrast pair and stress-test screens.
Contact
Let's build something people want to use.
Senior product design roles, remote or Gulf. I reply within a day.