Too Good To Go is a mobile app that helps reduce food waste by connecting users with restaurants and stores that sell surplus food at a discounted price. Known for its friendly tone and strong environmental mission, the platform appeals to a broad audience who want to make more conscious consumption choices.

Final Delivery

🥯 Comprehensive Design System Foundations

Established a shared visual and structural foundation (color, typo, spacing, token, grid) to ensure consistency, hierarchy, and accessibility across the interface.

🥯 UI Kit

Built a reusable library of components and tokens that supports efficient design and scalable implementation.

🥯 System Documentation (Zeroheight)

Documented components, usage, and behaviors in Zeroheight to make the system understandable and easy to adopt.

Figma UI Kit 🔗

Zeroheight Documentation 🔗

Introduction

Bagel is an unofficial design system built for Too Good To Go, designed to turn a complex, growing interface into a clear, consistent, and accessible system. It combines reusable components, shared principles, and documentation to support long-term scalability.

My Role

Design System Creator

Component Documentation Contributor

Final Delivery

🥯 Comprehensive Design System Foundations

Established a shared visual and structural foundation (color, typo, spacing, token, grid) to ensure consistency, hierarchy, and accessibility across the interface.

🥯 UI Kit

Built a reusable library of components and tokens that supports efficient design and scalable implementation.

🥯 System Documentation (Zeroheight)

Documented components, usage, and behaviors in Zeroheight to make the system understandable and easy to adopt.

Figma UI Kit 🔗

Zeroheight Documentation 🔗

Introduction

My Role

Design System Creator

Component Documentation Contributor

Final Delivery

🥯 Comprehensive Design System Foundations

Established a shared visual and structural foundation (color, typo, spacing, token, grid) to ensure consistency, hierarchy, and accessibility across the interface.

🥯 UI Kit

Built a reusable library of components and tokens that supports efficient design and scalable implementation.

🥯 System Documentation (Zeroheight)

Documented components, usage, and behaviors in Zeroheight to make the system understandable and easy to adopt.

Figma UI Kit 🔗

Zeroheight Documentation 🔗

Context

What is Too Good To Go?

02 The Problem: Why We Chose to Redesign TGTG's Design System?

Problem 01

Ten Shades of ……Grey?

Color usage across Too Good To Go is inconsistent. While brand colors are applied clearly to primary actions, multiple similar grey tones appear throughout the interface without clear rules or meaning.

Problem 02

Button Déjà Vu

Buttons are used to represent actions across the app, but similar actions appear in multiple button styles and sizes. Primary buttons vary in height, and the same actions are represented by different icon styles, creating ambiguity for designers and developers when building new features.

Problem 03

Icons are Having an Identity Crisis

Icon usage across the app is inconsistent. Icons vary in shape, corner style, and stroke weight, and even the same symbol appears in multiple forms.

Problem 04

Hard to Read, Easy to Miss

Some accessibility issues remain in the app. Certain color combinations fail to meet WCAG contrast requirements, and closely spaced buttons create small tap targets that may hinder usability for users with motor or visual impairments.

Problem 01

Ten Shades of ……Grey?

Problem 02

Button Déjà Vu

Problem 03

Icons are Having an Identity Crisis

Icon usage across the app is inconsistent. Icons vary in shape, corner style, and stroke weight, and even the same symbol appears in multiple forms.

Problem 04

Hard to Read, Easy to Miss

03 Solution: How Can Bagel Design System Help?

Without shared rules, scaling becomes fragile. A design system provides a stable foundation that supports growth across teams and markets.

Enable Scalable Growth

Bagel's Foundation-Color ->

Without a system, every feature requires rethinking UI patterns from scratch. A shared design system speeds up design and development by enabling reuse and reducing rework.

Lower the Cost per Feature

List Pattern ->

Inconsistent components create inconsistent experiences. A design system establishes clear rules that make the interface predictable, cohesive, and trustworthy.

Improve UI Reliability

Button's Best Practice ->

04 Design Process: How We Build the Bagel Design System?

Step 1/3

Set the rules that keep every bagel consistent.

To avoid designing components in isolation, we began by defining a small set of design principles.

Reflection: This step helped me shift my mindset from asking “Does this look good?” to “Does this fit the system?” Ensuring consistency while still leaving room for creativity and adaptation.

Step 2/3

Building Bagel: From Foundations to Patterns.

With the design principles in place, we built the core of the Bagel Design System: starting from foundations, scaling up through components, and finally connecting everything through patterns.

Figma UI Kit 🔗

🥯 Foundation

We began by defining the system foundations: color, typography, spacing, and grid.

Green was set as the anchor color to align with Too Good To Go’s sustainability-driven brand.

We continued using Tenon to maintain brand continuity, and applied a consistent grid and spacing system to establish a shared structural baseline.

For iconography, we used Microsoft’s Design System-Fluent to unified the icons style.

My contribution: defined the spacing and grids, named the token.

🥯 Components

From there, we systemized core UI components (buttons, cards, chips, etc.) by designing them with flexible properties and variants to support multiple scenarios.

My contribution: created card, bottom navigation, search bar and divider components.

🥯 Patterns

Beyond individual components, we created patterns as ready-made building blocks that teams can reuse across screens. These pre-built patterns reduce the need to start from scratch, and speed up execution.

My contribution: built header and carousel patterns.

🥯 User Testing (we need validation🙂‍↕️)

To validate our system, we conducted a small round of user testing by inviting designers to design screens using the Bagel UI Kit.

Based on these feedbacks, we refined the UI kit by expanding component flexibility, improving documentation, and addressing setup-related friction.

Reflection: This step taught me how to collaboratively build a design system that is both consistent and comprehensive. More than improving my Figma skills or system knowledge, I learned the importance of communication and alignment when working with teammates who have different design habits and styles. I also learned to design components with generality in mind—considering multiple use cases rather than individual screens—to ensure flexibility and reuse across the system.

Step 3/3

A System Is Only as Strong as Its Documentation.

To make the system usable beyond our team, we documented the Bagel Design System in Zeroheight. The content was structured to be readable, scannable, and practical, helping designers quickly understand how to use each component. We also added setup instructions for typography, icons, and libraries to reduce friction and ensure a smoother onboarding experience for future users.

Zeroheight Documentation→

Clear Rules for Every Component

For every component, we defined anatomy, usage, best practice, and accessibility guidelines to ensure flexibility without sacrificing consistency. This structure helps components adapt across different contexts while still following clear, shared rules.

Reflection: Good documentation turns design decisions into shared knowledge, not personal preference. Through this step, I learned how to use a common design language to explain components clearly and consistently. I focused on articulating how and why components should be used, making the system easier for others to understand, adopt, and apply with confidence.

Bagel UI Kit’s Highlights

Flexible By Design

Adjust components to fit your specific context using built-in properties such as boolean controls and dropdowns. Each component is designed with multiple variants, allowing you to quickly adapt layouts, states, and behaviors without rebuilding from scratch.

Accessibility, Built in

Every component is designed to meet WCAG accessibility standards, with contrast, spacing, and interaction states considered upfront. This allows designers to focus on crafting experiences while trusting that inclusivity is already accounted for.

Ready-to-Use Patterns

Our pre-built patterns combine components into tested, reusable structures. Instead of starting from scratch, teams can quickly assemble interfaces using patterns that are consistent, scalable, and production-ready.

Just drag and move.

Flexible By Design

Accessibility, Built in

Ready-to-Use Patterns

Just drag and move.

Bringing Bagel to the Table (Pitch Deck Time)

We created a pitch deck to clearly communicate the purpose, structure, and value of the Bagel Design System to others. Presenting the system to others allowed us to step outside the design process and evaluate our work from a more critical perspective.

Pitch Deck 🔗

Pitch Deck 🔗

The Impact of Bagel

Your Time Matters

Save time on rebuilding similar components for every project.

Effortless Consistency

Make your designs look cohesive with half the efforts!

Accessibility That Just Works

Save time on rebuilding similar components for every project.

Be Flexible, Not Fragile

Our highly customizable system can withstand the test of regular updates.

Your Time Matters

Save time on rebuilding similar components for every project.

Effortless Consistency

Make your designs look cohesive with half the efforts!

Accessibility That Just Works

Save time on rebuilding similar components for every project.

Be Flexible, Not Fragile

Our highly customizable system can withstand the test of regular updates.

Conclusion

Conclusion

Bagel's Next Step

Conclusion

Bagel's Next Step

Soft Launch and Dogfooding

We would introduce the Bagel Design System through internal dogfooding, allowing designers and developers to actively use the system in real workflows.

Refine and Optimize the System

Based on feedback and real usage, we would refine component flexibility, expand patterns, and improve accessibility and customization options.

Evolve Continuously Over Time

Keep ongoing updates, governance, and iteration to help the system stay relevant as new features, platforms, and constraints emerge.

Soft Launch and Dogfooding

We would introduce the Bagel Design System through internal dogfooding, allowing designers and developers to actively use the system in real workflows.

Refine and Optimize the System

Based on feedback and real usage, we would refine component flexibility, expand patterns, and improve accessibility and customization options.

Evolve Continuously Over Time

Keep ongoing updates, governance, and iteration to help the system stay relevant as new features, platforms, and constraints emerge.

Conclusion

My Personal Takeaway

Conclusion

My Personal Takeaway

This project shifted my perspective from designing screens to designing systems.

🥯 Design System Thinking: A design system is less about UI and more about creating shared decision-making rules that scale.

🥯 Team Collaboration: Consistency comes from collaboration and alignment, not from individual design preferences.

🥯 Product & UX Perspective: Designing components means anticipating future use cases, not just solving the current screen.

Special thanks to our team.

Team Members (left to right): Carol, Wendy, Shreya and Rohini

This project shifted my perspective from designing screens to designing systems.

🥯 Design System Thinking: A design system is less about UI and more about creating shared decision-making rules that scale.

🥯 Team Collaboration: Consistency comes from collaboration and alignment, not from individual design preferences.

🥯 Product & UX Perspective: Designing components means anticipating future use cases, not just solving the current screen.

Special thanks to our team.

Team Members (left to right): Carol, Wendy, Shreya and Rohini

Meet Bagel🥯

Steady, simple, made with intention.

Zeroheight Documentation

Figma UI Kit

Pitch Deck