Design system
As HyperStart grew, speed and consistency started slipping. We had no system, just scattered styles and one-off components. So I built one modular, evolving, and now empowering 95% of the product UI.
Overview
The system was built to scale with the product, not just clean up the UI. What started as a set of components grew into a unified foundation used across the app. It reduced UI turnaround time, improved design-dev sync, and gave us the confidence to ship fast without breaking consistency.
Over three months, alongside my regular design work, I systematically built and refined components each week. Leadership wasn’t convinced at first. But after I quietly started building and showing results—a faster UI, stronger consistency, and a team-wide demo—the value was clear. They backed it fully and committed engineering time to scale it.
Role
Built and owned the system end-to-end, from components to Storybook handoff
single source of truth
The system isn’t just a Figma file. It’s tightly integrated with our development process. Every token, component, and pattern is reflected in a shared Storybook, keeping design and code in lockstep.
This alignment has drastically reduced handoff confusion, review cycles, and visual bugs in production.
Writing has been a big part of my journey. From UX copy to landing pages, I've always seen language as an interface in itself.
I write with clarity and care, avoiding jargon, fluff, and anything that makes the users pause to interpret. The goal is always the same: be clear, be kind, and enable users to use the product with confidence.
Iterative by nature
The system evolves week by week, logged in a change log, refined through use, and shaped by real needs across the product. A design system should be modular and ever-evolving, adapting as products grow. I focus on building flexible components that help teams move fast without breaking structure.
the philosophy
Design systems should grow with the product, not limit it. I built this for usability, not because having a design system is flashy. It is nice and easy to read, because velocity matters more than over-polishing.
Accessible throughout
Accessibility wasn’t an afterthought—it was baked into every component from the start. We ensured color contrast met WCAG standards, interactive elements were keyboard navigable, and components supported clear focus states.
Impact and future scope
I’m currently working on multi-level tokenization for this system. Since I have achieved the main goal of reducing UI handoff TAT, I’m now exploring design systems more deeply with books on typography, grids and more complex systems.
There are 2 other products I aim to build using this system - HyperStart eSign and HyperVerge One. They lack maturity at the moment and since I’ve spent significant time coming up with something that works and is scalable, it will enable designers working on those two products to free up time for more creative problem solving.
There's more to this designer than meets the viewport.
This wasn't even in the wireframe. You still found it? Awesome.
Drop a howdy.
© Craftedbysom 2025
I've crafted every pixel with—
Let's get you on a desktop to see my portfolio
Wait, are you on a small screen?
// SOM
/// product Designer based in india, focused on product and interaction design for ai and saas