Pockit is a mobile app.
Sumaiyya Mahinn
Pockit is a mobile app. They asked me to design one thing, the onboarding flow. I started with no design files at all, just the product and a brief.
What I delivered- The onboarding flow, as scoped. But while designing it, it was obvious the app had no system underneath it. Screens didn't match, and every new one would be a guess. So I built one.
Token architecture
- 200+ tokens in Figma variables, in three layers:
Primitives: the raw values (every colour, size and step)
Semantic: what each value is for, like "text-primary" or "surface-raised"
Component roles: what each part of a component uses
These are spread across six collections: colour, typography, spacing, radius, elevation and primitives. Change one value and it updates everywhere it's used.
Dark mode
Built as a proper mode from the start, not an inverted afterthought. Every semantic token has a light and a dark value.
How I work on undocumented products
I don't try to reverse-engineer everything. I work out what the slice I'm shipping needs, build that properly, and document the system as I go, so whoever comes next isn't starting where I did.
Status: engagement completed.
Like this project
Posted Sep 30, 2026
Pockit is a mobile app. They asked me to design one thing, the onboarding flow. I started with no design files at all, just the product and a brief. What I d...
