Where it started: the system was first built for the luxury watches redesign. See it in context →
Three hard things, all at once.
I led two designers to build and document a complete design system for Tata CLiQ Luxury. Any one of these would have been enough. We had all three.
1. Sketch to Figma
The design landscape had moved on, and every file had to migrate to Figma.
2. A branding overhaul
The brand was redesigned to keep pace with a changing Indian luxury consumer.
3. Resources vs vision
We needed a system urgently, but the product work couldn't stop while we built it.
A plan a team of three could actually keep.
Three designers, me included, had to keep shipping the product and build a new system at the same time. So I planned it in phases we could actually keep.
Fig. 1 · Nine months, three phases, running alongside live production projects.
Taking a pause.
Before designing a single component, we worked out what luxury should mean in a digital space, together.
- What luxury means to each of usI ran brainstorming sessions with the whole team to surface our shared perceptions of luxury, good and bad.
- Everyday apps, reimagined as luxuryI asked the team to redesign two non-ecommerce apps as our own version of luxury. The fundamentals we found carried straight into the design language.
- Market insightsResearch across luxury brands showed us how luxury is being redefined today.
Turning "slow commerce" into rules a team could follow.
The new brand stood for slow commerce: helping people enjoy finer moments and choose mindfully. For a shop, that means never rushing anyone into an impulse buy.
Not rushing people is a design decision. So is every pixel that follows it.
Together we pinned down what made the identity feel the way it should. Deliberate white space. Rounded corners for warmth. A palette of warm greys, timeless blacks and white, with sparing use of cool Veri Peri. Precision and attention to detail. Consistent hierarchy, so the experience felt effortless.
Building in phases, from the smallest decision up.
We built from the smallest decision up: tokens → atoms → molecules → organisms.
We dropped H1, H2, H3 for Small, Medium and Large. It sounds minor. It meant the system could grow without renaming everything.
We also kept separate type styles for desktop and mobile. That naming paid off later: when we built the luxury editorial experience, which needed very different typography from the product, listing and checkout journeys, the system stretched to it without being renamed.
Fig. 5 · The type scale, with serif for storytelling and sans for everything functional. Shown here in this site's typefaces.
Named by scale, not position
Small to 5X Large instead of H1 to H6, so any new surface can pick sizes without renaming everything.
An averaged golden ratio
12 · 14 · 16 · 18 · 20 · 24 · 32. Each step grows by a near-constant ratio, rounded to sizes that render crisply.
Skip a level for hierarchy
A heading and its body never sit on neighbouring steps, so the contrast between them is always clear.
The highlight of this phase was a set of versatile text atoms, the building block behind everything from CTAs to editorial headings. To keep components modular, we developed a method that got the most out of auto layout without the complexity it often brings: simple booleans and dynamic spacing.
Emotion, specified down to the line-height.
Every element got written down: variants, when to use them, and real examples, so anyone applies the same rule the same way.
Rebuilding the library, not just moving it.
We didn't just copy the old Sketch library into Figma. We rebuilt it with the new design language inside, and kept it simple enough for designers and developers alike.
A system only works if it ships the way it was designed.
At first, developers built components differently from how we'd designed them. Instead of blaming the handoff, we sat with them, learned their constraints, and changed how we wrote things down. After that, designs shipped the way they were meant to.
The foundation of a digital identity.
The system became the base of Tata CLiQ Luxury's look and feel. Every token went live, and new components land every sprint. It was built to extend to Fashion and Palette, and that roll-out is under way.
We did it as the smallest design team in the company.
Key contributions
- Aarti Kava: Vision, strategy & design system creation
- Aryan Kandhari: Design system creation
- Anaya Purandare: Visual documentation
- With Naman Jain (iOS developer) and Akshay Garg (iOS lead developer)
