Story
From One Scooter to an Ecosystem – Building Chetak’s Modular and Scalable Design System
As Chetak’s product ecosystem expanded, its digital foundation needed to evolve beyond a single-product mindset.
Design System
Automobile
2025
The Chetak Design System from the Ground Up
What started as a single-page experience quickly became a limitation. As Chetak expanded its product portfolio and introduced new series, the website struggled to keep up—both structurally and experientially. It wasn’t just a design problem; it was a systems problem. We needed a foundation that could scale with the brand, bring consistency across touchpoints, and still feel premium, modern, and distinctly Chetak. This is where the role shifted from designing screens to designing a system—one that could balance aspiration with reliability, and storytelling with structure.
Before defining principles or building components, it was important to align everyone on what Chetak should feel like as a brand in the digital space. We facilitated a Visual Thinking workshop with key stakeholders, creating a collaborative space to explore and define this direction. Through guided exercises, teams identified keywords, associated visual cues, and debated what the brand should evoke—balancing legacy with modernity, and reliability with aspiration. This exercise helped translate abstract ideas into tangible directions, forming an early blueprint for the visual language.
What started as a single-page website evolved into a scalable design system built to grow with the brand.
Setting the North Star: Principles Before Pixels
With alignment in place, the next step was to formalize the guiding principles that would shape every design decision. The existing brand guidelines were too limited to support the expanding ecosystem, so we introduced three foundational principles—Elevate, Ensure, and Enable.
Elevate: Elevate the buying and owning experience of the Chetak EV range, so that the user finds it engaging, delightful and experientially feel some.
Ensure: Ensure that customers know Chetak is here-to-stay and will be at the fore-front of electrical mobility.
Enable: Enabling customers with ready-to-access information so that they can be informed and aware of ownership benefits.
These principles weren’t just statements—they became a filter through which every design decision was evaluated. The challenge lay in balancing contrasting attributes, ensuring the experience felt both aspirational and dependable, modern yet timeless, without compromising on usability or clarity.
We didn’t just define how things look—we built a system that helps teams design, decide, and scale with clarity.
A 3-layer token architecture, moving from foundational brand primitives to product-level expression
Designing the System: Tokens, Components, and Scalable Foundations
Translating these principles into a scalable system required a shift from static design decisions to flexible frameworks. We began by expanding the visual language, deriving tints and shades from primary, secondary, and tertiary palettes, and structuring them through semantic tokenisation. Instead of defining colors by appearance, we defined them by purpose—creating a system that could adapt across contexts, themes, and future needs without losing consistency. This was complemented by establishing core foundations such as grid systems, typography scales, spacing rules, and visual styles, ensuring a cohesive structure across layouts. To enable modularity and reuse, we adopted atomic design principles, breaking the interface into atoms, molecules, organisms, and compositions, allowing teams to build efficiently while maintaining consistency.
Motion was embedded into the system from the outset, adding depth through reactive backgrounds, parallax effects, and micro-interactions that enhanced usability without overwhelming the experience. Special attention was given to product visibility, using split-complementary color strategies to ensure the scooters remained the focal point across screens.
The result was not just a design system, but a scalable operational framework—one that empowered teams to move faster, maintain consistency, and evolve the experience seamlessly as the brand continued to grow.
