Based in Madrid, Spain

Loading amazing data...

Mustache.

Role

Head of Design

Date

01 July, 2024

Responsabilities

Leadership
Design execution
Cross-team collaboration

Timeline

3 months

Overview

As we launched a new mobile app at Rappi, we took the opportunity to rebuild and improve our component library within Mustache, our Design System.

We also made key adjustments and enhancements to Foundations, ensuring a more cohesive and scalable system.

This project focused on enhancing consistency, efficiency, and scalability while strengthening design-development collaboration.

+ 0

components

layers

libraries

This is Mustache.

Mustache supports a wide range of B2C and B2B products across web and mobile, so every decision must account for the scale and complexity of this ecosystem.

Below is a breakdown of how our Design System is structured, detailing its different layers and their purpose.

Foundations (I)

Typography, icons, colors...

Miscelaneous

Vector & 3D assets

/

Covers & Slides

Utils for design

Mobile app (II)

Components library

/

Web app

Components library

/

etc ...

More products

Specs files

Pixel perfect designs

(I, II): In this project, I will focus on the work done in Foundations and our mobile app’s component library—our most impactful product, serving tens of millions of users placing orders every day.

Goals.

1.

Visual consistency

Standardize components, styles, and interactions to ensure a cohesive and polished user experience.

2.

Improve design and development efficiency

Streamline workflows, reduce redundancies, and enhance collaboration to speed up execution.

3.

Create a flexible and scalable system

Build a system that adapts to evolving needs, supports new use cases, and grows with our products.

Principles.

Aesthetics

A polished UI enhances trust and reduces friction.

Gestalt approach

We use Gestalt principles for intuitive, coherent components.

Light cognitive load

Clear choices and structure enable effortless decisions.

Visual hierarchy

Contrast, size, and spacing improve focus and scanning.

Consistency

Predictable patterns accelerate learning for seamless UX.

Adaptability

Components evolve to support new cases with consistency.

Foundations.

Organization of the file

In our Foundations file, we follow industry best practices for structuring Design Systems, with dedicated pages for essential design elements.

Each page is organized with a clear layout: an introductory section on the left that provides context and guidelines, and a main content area on the right that showcases all design assets and specifications in detail.

This structure ensures clarity, ease of navigation, and efficient collaboration across teams.

General improvements

tokens

We improved the definition and structure of our design tokens, making them more scalable and adaptable to the diverse needs of all Rappi products. This new system ensures consistency across our ecosystem while allowing flexibility to support future growth and evolving design requirements.

Token	Usage	Primitive
colors / ink
primary	For headlines and icons	black
standard	For paragraphs	neutral.80
weak	For labels or placeholder text	neutral.50
…	…	…

colors

We expanded and fine-tuned our color palette to enhance contrast and ensure accessibility, making our interfaces more inclusive and visually consistent.

Token	Old hexadecimal	New hexadecimal	Status
line.blank	—	#FFFFFF	New
ink.accent	#29D884	#34C85A	Update
background.weak	#F0F1F3	#ECEFF3	Update
…	…	…	…

typography

We introduced the Medium weight, replacing Bold in many screens to reduce visual load and improve readability. Additionally, we adjusted the line height of certain styles for better text balance and clarity.

Token	Weight	Size	Line height	Status
h4Bold	Bold	24px	32px	Update
h4Medium	Medium	24px	32px	New
h4Regular	Regular	24px	32px	Update
…	…	…	…	…

icons

We added numerous new icons and redesigned existing ones with a 2px stroke, ensuring visual harmony with the lighter Medium weight typography and creating a more cohesive, balanced interface.

spacing

We defined semantic spacing tokens for every type of spacing, achieving a solid and consistent rhythm across all areas of the app.

Components library.

Organization of the file

Our Component Library file is thoughtfully organized, with each page containing multiple components that belong to the same group. Each page is divided into two sections: one showcasing the atoms and components, and the other to the right, providing detailed documentation for each component within the group.

Good practices

variants

Variants are fundamental in components, but analyzing their characteristics is crucial. Understanding which features can coexist helps define what should be a variant and what should be a boolean.

booleans

Using booleans is crucial for optimizing the number of variants in our components, as it enhances usability while simplifying maintenance and scalability.

_atoms

Atomic Design ensures a scalable, modular structure by breaking components into smaller parts, promoting consistency, reusability, and faster design and development.

atoms

molecules

organisms

templates

pages

In the following example, you can see how the product-card component includes an atom called _price-type, responsible for supporting all the pricing and discount logic in Rappi.

Well, in reality, this atom is much more complex — this example is purely illustrative.