Select this text to see the highlight effect
🥯 Baked Fresh!
 A Design System That Actually
Feels Good to Use

Design System

🥯 Baked Fresh!
 A Design System That Actually
Feels Good to Use

Design System

Inside the Kitchen

Project Overview

As Too Good To Go scaled across teams and markets, we created Bagel, a design system built to bring clarity and consistency back into the product.

The goal was to streamline design workflows, bake accessibility into the foundation, and create a system designers and developers could rely on.

Bagel lives as a reusable UI library with clear patterns and documentation in Zeroheight.

As Too Good To Go scaled across teams and markets, we created Bagel, a design system built to bring clarity and consistency back into the product.

The goal was to streamline design workflows, bake accessibility into the foundation, and create a system designers and developers could rely on.

Bagel lives as a reusable UI library with clear patterns and documentation in Zeroheight.

As Too Good To Go scaled across teams and markets, we created Bagel, a design system built to bring clarity and consistency back into the product.

The goal was to streamline design workflows, bake accessibility into the foundation, and create a system designers and developers could rely on.

Bagel lives as a reusable UI library with clear patterns and documentation in Zeroheight.

View Documentation

View Documentation

Made For

Too Good To Go

Team

4 UX Designers

My Responsibilities

Content audit, Accessibility checking,
Figma advanced prototyping, Brand

Pitch

Timeline

4 Months

A sneak-peak into the final solution

What is Too Good To Go? Why did it need a design system?

The Challenge

Too Good To Go helps people rescue surplus food and reduce waste. It’s a product built on good intentions — and it grew fast.

As the product expanded across teams and features, the interface started to show strain. The experience still worked, but underneath, things were getting messy.

Too Good To Go helps people rescue surplus food and reduce waste. It’s a product built on good intentions — and it grew fast.

As the product expanded across teams and features, the interface started to show strain. The experience still worked, but underneath, things were getting messy.

Too Good To Go helps people rescue surplus food and reduce waste. It’s a product built on good intentions — and it grew fast.

As the product expanded across teams and features, the interface started to show strain. The experience still worked, but underneath, things were getting messy.

To understand exactly what was not working, we deconstructed the whole app and found the following issues:

To understand exactly what was not working, we deconstructed the whole app and found the following issues:

To understand exactly what was not working, we deconstructed the whole app and found the following issues:

Near-identical colors used inconsistently, creating visual drift and accessibility risk
Components with the same purpose behaved differently across screens
Accessibility issues surfaced late, increasing rework
Icons lacked a shared style, weakening visual trust

Introducing Bagel

The Methodology

Bagel is Too Good To Go’s design system — a shared design language that supports scale without sacrificing warmth or usability.

Bagel Design System!

Baking Principles

Principles

Before building Bagel, I defined a set of design principles to guide every decision in the system. These principles acted as a shared reference point helping resolve tradeoffs, reduce subjectivity, and ensure consistency as the system evolved.

Guiding Principles

The Ingredients: Foundations

Foundations

Before building components, I focused on establishing clear foundational rules that reduced inconsistency and made design decisions easier across teams. These foundations became the backbone of the Bagel design system.

Purposeful Color System
Condensed a scattered palette into accessible, role-based colors for text, surfaces, borders, icons, and states.

Typography & Hierarchy
Established a unified type scale to create clear hierarchy and eliminate guesswork in sizing and usage.

Spacing & Layout
Defined a predictable spacing system and grid to bring rhythm, balance, and consistency to layouts.

Design Tokens
Created clear, human-readable primitive and semantic tokens to remove ambiguity and streamline workflows.

Foundational Elements

The Recipe: Building the UI Kit

The UI Kit

Design Once, Use Everywhere

Every component can be used in multiple contexts.

User Demographics
User Demographics
User Demographics
No more ‘Starting From Scratch’

Our pre-built patterns are already tested and ready-to-use!

User Demographics
User Demographics
User Demographics
Built for Everyone

Every component meets WCAG standards and are designed to handle inclusivity while you focus on the design.

User Demographics
User Demographics
User Demographics
Build faster, Ship sooner

Just drag, drop, and move on to the harder problems.

Taste Test

Usability Testiing

Before finalizing documentation, we tested Bagel in practice to make sure it worked beyond theory. The goal wasn’t to prove the system was “done,” but to validate that it was usable, flexible, and reliable in real design scenarios.

Before finalizing documentation, we tested Bagel in practice to make sure it worked beyond theory. The goal wasn’t to prove the system was “done,” but to validate that it was usable, flexible, and reliable in real design scenarios.

Before finalizing documentation, we tested Bagel in practice to make sure it worked beyond theory. The goal wasn’t to prove the system was “done,” but to validate that it was usable, flexible, and reliable in real design scenarios.

Documentation as a Product

Zeroheight Documentation

Bagel lives in documentation that’s meant to be read and trusted.

Each component and pattern includes:

  • Anatomy diagrams

  • Clear do’s and don’ts

  • Guidance on when to use which variant

  • Voice and tone notes

  • Accessibility reminders

Zeroheight Documentaion

What value does Bagel create?

The Final Outcome

Bagel isn’t just a UI library. Its real value comes from giving everyone a shared source of truth aligning designers, developers, and stakeholders around consistent decisions that scale with the product.

Bagel isn’t just a UI library. Its real value comes from giving everyone a shared source of truth aligning designers, developers, and stakeholders around consistent decisions that scale with the product.

Bagel isn’t just a UI library. Its real value comes from giving everyone a shared source of truth aligning designers, developers, and stakeholders around consistent decisions that scale with the product.

Fresh Out of the Oven

Outcomes & Final Review

User Demographics
User Demographics
User Demographics

The team- Carol Bai, Wendy Li, Shreya Lohakare (Me), Rohini Rajan

We presented Bagel to mock stakeholders, focusing on the system’s purpose, principles, and how it supports consistency, accessibility, and scale. Rather than walking through every component, we showed how Bagel acts as a shared source of truth that reduces rework and improves decision-making.

The presentation validated that the system was clear, practical, and easy to understand — even for non-designers. Bagel was received as more than a UI library; it was understood as a scalable design language ready to be used in real product work.

We presented Bagel to mock stakeholders, focusing on the system’s purpose, principles, and how it supports consistency, accessibility, and scale. Rather than walking through every component, we showed how Bagel acts as a shared source of truth that reduces rework and improves decision-making.

The presentation validated that the system was clear, practical, and easy to understand — even for non-designers. Bagel was received as more than a UI library; it was understood as a scalable design language ready to be used in real product work.

We presented Bagel to mock stakeholders, focusing on the system’s purpose, principles, and how it supports consistency, accessibility, and scale. Rather than walking through every component, we showed how Bagel acts as a shared source of truth that reduces rework and improves decision-making.

The presentation validated that the system was clear, practical, and easy to understand — even for non-designers. Bagel was received as more than a UI library; it was understood as a scalable design language ready to be used in real product work.

Lessons from the Kitchen

Contributions & Reflections

I focused on the system-level work behind Bagel auditing colors, typography, components, and accessibility issues, shaping the token structure and naming conventions, and contributing to component behavior, patterns, and documentation in Zeroheight. My role was about creating clarity: turning scattered decisions into rules teams could rely on.

Through this process, I learned that a design system isn’t about assembling components, but about removing ambiguity. Starting with strong foundations reduced alignment work later, baking accessibility into the system prevented rework, and clear documentation proved just as important as the UI itself. The biggest takeaway was simple: a system only works if people trust it — and that trust comes from clarity, consistency, and care.

I focused on the system-level work behind Bagel auditing colors, typography, components, and accessibility issues, shaping the token structure and naming conventions, and contributing to component behavior, patterns, and documentation in Zeroheight. My role was about creating clarity: turning scattered decisions into rules teams could rely on.

Through this process, I learned that a design system isn’t about assembling components, but about removing ambiguity. Starting with strong foundations reduced alignment work later, baking accessibility into the system prevented rework, and clear documentation proved just as important as the UI itself. The biggest takeaway was simple: a system only works if people trust it — and that trust comes from clarity, consistency, and care.

I focused on the system-level work behind Bagel auditing colors, typography, components, and accessibility issues, shaping the token structure and naming conventions, and contributing to component behavior, patterns, and documentation in Zeroheight. My role was about creating clarity: turning scattered decisions into rules teams could rely on.

Through this process, I learned that a design system isn’t about assembling components, but about removing ambiguity. Starting with strong foundations reduced alignment work later, baking accessibility into the system prevented rework, and clear documentation proved just as important as the UI itself. The biggest takeaway was simple: a system only works if people trust it — and that trust comes from clarity, consistency, and care.

Next Project

Back To Top