Establishing a Design System for a Consistent, Multi-Theme Experience
Establishing a Design System for a Consistent, Multi-Theme Experience
Project Specs
Role: Product Designer (1 of 2)
Year: 2024
Deliverables: Component Library
& Documentation
Overview
As Namma Yatri continued to grow, so did it's design language. We developed a cohesive design system customized for all Namma Yatri products across various Indian states, including Odisha Yatri, Kolkata, and Bangalore.
My role involved building and expanding the design system to ensure seamless compatibility across all mobile devices, offering multiple theme options for each state, and accommodating both light and dark modes for optimal user experience.
As Namma Yatri continued to grow, so did it's design language. We developed a cohesive design system customized for all Namma Yatri products across various Indian states, including Odisha Yatri, Kolkata, and Bangalore.
My role involved building and expanding the design system to ensure seamless compatibility across all mobile devices, offering multiple theme options for each state, and accommodating both light and dark modes for optimal user experience.



(01)
The challenge
(01)
The challenge
(01)
The challenge
Our product was inconsistent across the app
Our product was inconsistent across the app
Since the redesign, we hadn’t established a dedicated design system, leading to significant inconsistencies across the product. This resulted in increased development time, as designers frequently handed off inconsistent components to engineers and repeatedly recreated commonly used patterns.
Since the redesign, we hadn’t established a dedicated design system, leading to significant inconsistencies across the product. This resulted in increased development time, as designers frequently handed off inconsistent components to engineers and repeatedly recreated commonly used patterns.
(02)
The Process
(02)
The Process
Identifying all the inconsistency first
Identifying all the inconsistency first
We started by gathering all the screens and doing a thorough design audit to spot any inconsistencies and see where we could reuse components from the old design system to save time and effort. From there, we mapped out all the components needed to build a flexible design system that supports different themes and can easily adapt to both light and dark modes. While dark mode isn’t live yet, we’ve designed the system to make adding it in the future seamless.
We took inspiration from other design systems and started with the basics, focusing on building the core foundational elements—our atoms. These simple building blocks became the backbone for all our components and patterns. By getting this foundation right, we were able to create a solid, scalable framework that’s easy to build on as we grow.
We started by gathering all the screens and doing a thorough design audit to spot any inconsistencies and see where we could reuse components from the old design system to save time and effort. From there, we mapped out all the components needed to build a flexible design system that supports different themes and can easily adapt to both light and dark modes. While dark mode isn’t live yet, we’ve designed the system to make adding it in the future seamless.
We took inspiration from other design systems and started with the basics, focusing on building the core foundational elements—our atoms. These simple building blocks became the backbone for all our components and patterns. By getting this foundation right, we were able to create a solid, scalable framework that’s easy to build on as we grow.











(03)
Theming
(03)
Theming
Following a structure to bring in theme + Dark & Light modes
Following a structure to bring in theme + Dark & Light modes
Figuring this out was challenging and took a lot of experimentation and trial and error. After several iterations, I landed on the structure below and documented it to make it easily accessible for both designers and developers.
We defined Core Colors as the foundation, which were adapted into Theme Colors for products like Namma Yatri and Odisha Yatri. These were then mapped to UI Colors, supporting both Light and Dark Modes for future scalability.
Figuring this out was challenging and took a lot of experimentation and trial and error. After several iterations, I landed on the structure below and documented it to make it easily accessible for both designers and developers.
We defined Core Colors as the foundation, which were adapted into Theme Colors for products like Namma Yatri and Odisha Yatri. These were then mapped to UI Colors, supporting both Light and Dark Modes for future scalability.




(04)
Documentation
(04)
Documentation
Documenting the design system for fellow designers and developers
Documenting the design system for fellow designers and developers
We used Figma to outline usage guidelines, best practices, and other essential information to ensure consistency. The documentation provided a reference point for the team whenever questions about the system came up, helping them utilize it to its fullest potential. Given the complexity of the design system, I also created an FAQ section to assist new designers in quickly understanding and navigating the system.
We used Figma to outline usage guidelines, best practices, and other essential information to ensure consistency. The documentation provided a reference point for the team whenever questions about the system came up, helping them utilize it to its fullest potential. Given the complexity of the design system, I also created an FAQ section to assist new designers in quickly understanding and navigating the system.



Unifying Transit & Cabs to kill commute fiction
Unifying Transit & Cabs to kill commute fiction
Namma Yatri
Namma Yatri
iOS & Android App
iOS & Android App



Safety Tools That Turn Ride Anxiety Into Peace of Mind
Safety Tools That Turn Ride Anxiety Into Peace of Mind
Namma Yatri
Namma Yatri
iOS & Android App
iOS & Android App
I'd love to hear from you and explore collaboration, answer your questions, or simply chat.
Let’s Connect
Monday, December 9
© 2024 — AMRUTHAKUDUVA
I'd love to hear from you and explore collaboration, answer your questions, or simply chat.
Let’s Connect
Monday, December 9
© 2024 — AMRUTHAKUDUVA
I'd love to hear from you and explore collaboration, answer your questions, or simply chat.
Let’s Connect
Monday, December 9
© 2024 — AMRUTHAKUDUVA
I'd love to hear from you and explore collaboration, answer your questions, or simply chat.
Let’s Connect
Monday, December 9
© 2024 — AMRUTHAKUDUVA
I'd love to hear from you and explore collaboration, answer your questions, or simply chat.
Let’s Connect
Monday, December 9
© 2024 — AMRUTHAKUDUVA
I'd love to hear from you and explore collaboration, answer your questions, or simply chat.
Let’s Connect
Monday, December 9
© 2024 — AMRUTHAKUDUVA