Built and scaled a tokens‑driven design system (light/dark), aligning design and code, improving efficiency and quality across products; documentation and governance practices reduced rework and sped delivery.
Design System
Tokens
Figma
Accessibility
Benchmarking
Key information
Context
At Kotak Cherry, multiple investment products were scaling fast but inconsistencies in UI, slow design-delivery cycles, and duplicate components led to confusion and inefficiency. When I joined Kotak Cherry as an intern, I took full responsibility for building a scalable and comprehensive design system under the design lead's supervision.
DLS glimpse
Timeline of the project
Months 1-2
Month 3
Month 4
Month 5 - onwards
Challenge
I have noticed that the developers are repeatedly asking the designers for space, colour, and typography specs for each project, which is impacting the overall milestones of other projects. So I have listed down some of the biggest pain points below:
I spotted alignment issues, clashing typography, and mismatched spacing across products.
Designers and developers repeatedly built the same UI components from scratch, wasting time and effort.
Specs, design files, and live code often drifted out of sync, leading to delays and rework.
Teams worked in silos with little shared vocabulary or resources, making cross-team collaboration challenging.
Existing docs were scattered, outdated, or hard to find making it tough to reuse patterns or onboard new team members.
Why invest in a design system?
1
A proper streamline process will increase the work efficiency and reduce rework.
2
Overall, the UI consistency will be maintained across the product, leading to an improvement in UX.
3
Defining specific targets ensures progress is measurable and aligned with business value.
Benchmarking against industry standards
I reached out to the frontend developers and designers working at the bank to understand the pain points and how we can benchmark the industry-standard design system to bring a quality and scalable Cherry design system.
competitive benchmarking
Behind the scene
We continued to discover new scenarios with each round of changes, so we worked through several days of updates. To move faster, I asked my teammates to send me the components they were using in their projects. That way, I could add everything at once and make sure we didn’t miss anything.
20-50 screens
Philosophy
1
The Cherry design philosophy is built on principles that put users first, encourage continuous learning, and keep solutions simple and clear. These values guide us in creating meaningful and scalable design experiences.
Thoughtful colors
2
The color palette provides a flexible yet consistent foundation for design, with clearly defined primary, secondary, and accent tones. All colors are system variables, making them easy to apply and maintain.
Typography
3
The text style establishes a structured typographic hierarchy, making it easy to maintain readability and visual balance. All heading styles are standardized and flexible for different use cases.
Component
4
The button components enable users to easily take necessary actions and achieve their desired results while reducing the risk of human errors during interaction. We offer a variety of button styles to accommodate different actions.
Component
5
The list system provides standardized interactive elements—radio, toggle, and checkbox—supporting multiple states and variations. Designed for both light and dark modes, they maintain usability and visual clarity.
Results that matter
Since the launch of the design system within the company, I have observed significant improvements in productivity, efficiency, and consistency across our product designs. Additionally, it allows us to create responsive component designs that cater to various device sizes.
Defined components for the light and dark themes in Figma.
UI bugs have reduced significantly with an increase in time saved.
Engineers, designers, business and users are satisfied with the polished product.
My takeaways
Building the design system helped me create a shared language between design and code, making our team stronger and more efficient. I learned that close collaboration between designers and developers is crucial for smooth handoffs and tangible progress. Creating clear and helpful documentation was essential to ensuring that everyone could use the system with confidence.
Showing measurable results, such as faster delivery and fewer errors, helped me gain trust from leadership and teams. Designing with accessibility and inclusion from the start made the system valuable to all users.
