Vijay Verma | August 26, 2019 | 5 min read
Zomato’s new Sushi Design System

“The effort required to build a design system is tiny compared to the effort required to maintain it.” – Kyle Peatt

Say hello to Sushi – Zomato’s all-new design system that we’ve built from the ground up. It’s not just a design system for us, but more than that it helps us provide a new and enhanced experience for our users using the Zomato app.

Let me break down what this actually means and what went into building Sushi. 

What is a Design System?

A design system is a large set of reusable components combined with a set of rules, storing visual design information, like colours or spacing, and enables us to build consistent applications quickly. 

Why build a Design System?

Our first design system was created back in 2017. It was designed to enhance the existing features but was not as scalable as we wished it would be. That’s why we started working on a more flexible and robust solution.

Given the pace at which Zomato is growing, it becomes imperative on our part to maintain good user experience. With every new feature we release, the aim should be to be able to utilize as many existing components so that we are not introducing any visual inconsistencies. Whether we are working with pixels, code, or words, it’s helpful to have design patterns in place — they not only save time but also keep our UI consistent, thereby creating a better user experience.

Instead of re-thinking the foundation of every new experience that we add on Zomato, the Sushi Design System will now allow designers, developers, product managers as well as other stakeholders to focus on easily transforming ideas to live products.

How did we come up with a brand new system?

Design Principle

Some core principles we kept in mind during this process – 

  • User Centricity – We want to ensure that every interaction our users have with our product is a positive one and solves for something, thereby building a strong connection with our brand or product across platforms
  • Inclusivity – Our products serve everyone, from teens who are still in college to people not too savvy with modern-day technology. We want to design and build our platform which is viable by as many people as possible, regardless of ability, age and geography
  • Simplicity – We deliver delight and satisfaction through a clean and focused experience every time. By relying on existing, common design patterns that are intuitive in form, function and flow, we ensure a more user friendly interface for all
  • Consistency – We create familiarity and strengthen intuition by applying the same solution to problems across our platforms

Structure of Design System

We followed the Atomic Design methodology by Brad Frost and mapped it in our design system spectrum.

Atomic Design: Mapping with our design system

Creating Foundations

Foundations are digital brand guidelines, which define typography, color palettes, icons, spacing, shadow and information architecture of our design system. All foundations are atoms and are broken down into two levels –

Principles provide philosophical continuity but don’t provide any actual code, such as – how our text will truncate, scrolling behavior, spacing, etc. so that designers will refer to it and respect it while creating new design patterns.

Basics cover guidelines for aspects such as typography styles, colors, icons, imagery that help in formulating consistent components.

Foundations: Typography and Colour System
Foundations: Icons, Spacing, and Shadow

Component Library

Components refer to distinctive user interface (UI) elements that are used over and over throughout the development of a product – normally actionable or sometimes just to convey meanings. However, components can either be Molecules or Organisms as there is a fine line of distinction between the two. A few examples include buttons, inputs, selects, toggles, lists, ratings, tags, etc.

Sushi Components (Low Level): Buttons and Core Components

Each component is defined by titles, subtitles, images, action buttons and some optional text/elements.

All these components are stored in a shared repository called library, which is a great way to build consistent UI and speed up the app’s development. Consistency in UI increases familiarity with the app for users, bringing down user confusion to a minimum when interacting with our product.

Sushi Components (Mid Level): Image Frames
Sushi Components (High Level) — Restaurant Cards

Pattern & Templates

After defining the basics, we collect all the base components, which are then used to build more complex, reusable, and scalable snippets called pattern or templates.

Zomato (Template): Restaurant and Sneak Peek

The real deal

So this is all we had to share with you about Sushi. The real deal is that we are finally rolling out the new Zomato App and Zomato Web versions based on our design system, for everyone in the coming few months.

Here’s a sneak peek into our new versions – 

Zomato app – v14 (mock)
Zomato web 2.0 (mock)
Zomato web 2.0 (mock)

The best tool for the job

We started building our new UI Kit, called Sushi, in the Sketch app. Because, back then everybody loved to work on a single Sketch file and only shared it when required with the help of the cloud, inVision or simply exported it. We did not highly depend on the usage of symbols or components; we just duplicated elements as needed and created another screen without using symbols to update elements. Searching for existing components and templates was always a tedious task.

Creating style and component symbols in Sketch is very much a possible task, however maintaining/using these symbols is where life gets tough. After exploring some alternatives, we found Figma to be the best suited for our design system. Figma uses a dedicated panel for assets, that makes them easily available and better organized. 

Read: Why we switched to Figma here


All components and patterns are being implemented in our technical frameworks across platforms and our developers are working on these to push our patterns to the finish line. Soon, we’ll have everything in sync from the mobile app to web.

What next?

We’ve already been able to rely on our design system for some big projects and will continue to do so. The design system provides us with a shared understanding of our visual style and enables all of us to prototype and experiment with ideas in high fidelity faster and at a much lower cost.

Lastly, Sushi was built on the belief that we can never predict all future requirements, we can only prepare for it. It has so far been a fruitful experience, with all the engineers and product managers understanding the value of our design system. We are looking forward to see where we go with this next.

Stay tuned to our blog for more insights on our design system.

[If you are a product designer who loves challenges and is keen on working with Zomato, do check this out.]


More for you to read


Inder Deep Singh | June 6, 2024 | 15 min read
Unlocking Innovation: Zomato’s journey to seamless iOS code sharing & distribution with Swift Package Manager

Read more to know about how we migrated Zomato’s 10-year-old iOS codebase to Apple’s Swift Package Manager. The blog highlights the process behind building a central syncing mechanism needed across multiple apps, the challenges encountered, and how we resolved them.


Keshav Lohia | April 18, 2024 | 2 min read
Menu Score: How we cracked the Menu Code (and you can too!)

Menu score empowers our restaurant partners to build exceptional and delightful food ordering menus. Read on to know more about how this simple tool helps restaurant partners grow their business.


Security Team | April 16, 2024 | 6 min read
Hackoween: Elevating cybersecurity resilience at Zomato through competitive challenges

Read more about how we are strengthening cybersecurity and promoting a security-first approach for our engineering team.


Zomato Engineering | February 29, 2024 | 6 min read
A Tale of Scale: Behind the Scenes at Zomato Tech for NYE 2023

A deep-dive into how Zomato handled the massive order volumes on New Year’s Eve. More than 3 million orders delivered in a single day!