

Unify
|
CASE STUDY · 2025—26
Design System
One language for design & dev.
Co-owned as a Product Design Intern.
↔
Responsive
1440 → 2560
◫
Scalable
100+ components
⚡
Lightweight
Modes, not variants
Dev-ready
Tokens & handoff

Dashboard · 1440
1440 × 1024
Card Background Color
Label
HEX
No Color
#
2563EB
Cancel
Save
Button
25
❖ Button
XL
3XL
4XL
Dev
Shubham
modes, not variants
reusable
components
1440 → 2560
SHOWREEL · 0:49

01 — THE PROBLEM
Designer said 6.
Developer said 7.
Padding, colours and type drifted between Figma and code. Every team rebuilt the same UI — and 2K–4K screens broke the layout.
02 — WHAT I DID
Co-owned Unify with one other designer
Built variables & tokens — 3 tiers
Built & maintained 100+ components
Defined Figma modes for 1440 → 2560
Handoff, edge cases & fixes with devs
03 — WHY MODES
Modes, not variants.
One file switches between screen sizes — no duplicate frames, no redesign, smaller files.
100+
components & variants
605
variables
4
screen modes
0
duplicate frames
04 — UP CLOSE
Four components, up close.
01
Button
340 variants. States, sizes and styles from one component.
5 styles
5 states
4 sizes
02
Sidebar
Real hover and expand — then Figma variable modes from 1440 to 2560.
3 modes
236 responsive vars
03
Color Picker
Custom-built. Hue, palette, hex and live preview stay in sync.
Custom
Tokenised
04
Calendar
Range selection with real date states. Date, month and year views.
8 states
3 views
05 — DESIGN → DEV
One source. Handed off in Supernova.
Tokens and component docs synced from Figma to Supernova. Devs built from the same source — and every redesigned screen uses it.
01
Figma
Unify library — tokens, variables, components
→
02
Supernova
Token sync + component docs for devs
→
03
Development
Built in parallel from the same tokens
→
04
Product
Redesigned dashboard, every screen


WHAT’S NEXT · IN PROGRESS
Rebuilding Unify for the AI era.
Rules, skills and modes that Claude can read — so AI-built UI stays on-system.
New Update — COMING SOON
Thanks for reading.
mestryshubham8@gmail.com · linkedin.com/in/shubhammestry
Back


