Design System Inspiration of Too Good To Go

Overview

Visual Theme & Atmosphere

Too Good To Go connects users with partner stores “to rescue unsold food and stop it from going to waste”. By its press page it has 120 million registered users and 180,000 active partners across 21 countries, and calls itself “the world’s largest marketplace for surplus food”, launched in 2016. The site is provided by Too Good To Go ApS, Landskronagade 66, Copenhagen, Denmark.

The site is warm and food-bright: a leafy green hero #00615f, a creamy oat-milk page #f9f3f0, huge uppercase Korolev headlines, and a palette named like a fruit bowl — crunchy apple #79e4a7, juicy watermelon #ff7973, sour lemon #fff29a. Body text is Tenon.

What makes it worth reading:

• Named brand colours. --color-brand-leafyGreen, creamyOatMilk, crunchyApple, juicyWatermelon, sourLemon, morningLight, twilightLilac — the palette speaks the product’s language.
• Theme tokens per surface. --theme-*-dark and --theme-*-light pairs switch heading, text and highlight colours between green and cream sections (heading #f9f3f0 on dark, #00615f on light; highlight #fffb9b on dark, #ff7973 on light).
• A two-face type system. Korolev 900 uppercase for display, Tenon for everything else.

Primary tasks

• Download the app; find food nearby.
• Sign up a business.

Brand Narrative

A Copenhagen company fighting food waste, with a palette named after food — apple, watermelon, lemon, oat milk. Green and cream alternate like packaging, and the headlines shout in Korolev.

Principles

• Fight food waste. The mission its careers page names.
• Colours named like food.
• Surface-aware theming. Every section flips its heading and highlight.

Personas

Not researched. No persona claim is made from a UI capture.

Colors

Measured with getComputedStyle on toogoodtogo.com/en-gb: 842 root custom properties — --dt-* 216, --typography-* 130, --light-* 111, --color-* 103, --theme-* 28, --btn-* 17 …; Tailwind’s --tw-* (51) excluded.

Greens

• Leafy green (#00615f) — --color-brand-leafyGreen, --theme-background-color-dark; the hero.
• Leafy green alt (#005250) — --theme-background-color-dark-alt.
• Dark green (#013d3c) · Button ink (#012625).
• Crunchy apple (#79e4a7) · Dark crunchy apple (#03a97b).
• Mint hover (#67d695) — --btn-primary-hover-type, --theme-tertiary-text-color-dark.
• Tertiary text (#339a72) — on light sections.

Cream and fruit

• Creamy oat milk (#f9f3f0) — the page and headings on green · Oat milk alt (#f3ebe8).
• Juicy watermelon (#ff7973) — highlights on light sections.
• Sour lemon (#fff29a) · Highlight (#fffb9b) — highlights on green.

Neutrals

• Foreground (#5f6d6d) — --theme-text-color-light.
• Text on dark (#dee3e3) · Header dark (#252d2d) · Canvas (#ffffff).
• Button hover (#ececee) · Button pressed (#dfdfe2).

Typography

Font family

Korolev (900) for display and Tenon (400, 500, 700) for text, both loaded (document.fonts).

Scale

H1 72px/900 uppercase in #f9f3f0; section headings 44px/900 uppercase or 75px Korolev in watermelon; Tenon 32px/400 subheads; buttons 16px/500; navigation 14px/400.

Layout

• A transparent header over a full green hero with a huge uppercase headline, then alternating cream and green sections.

Responsive Behavior

Not measured. Desktop 1440×1000 only.

Elevation & Depth

Flat; colour blocks separate sections.

Motion & Easing

Not measured.

Components

Measured with focus under a real Tab key and a hover counted only when :hover matched; consent declined.

• White pill — Download the app / Sign up your business: #ffffff, #012625 16px/500, 120px radius, 51px. Hover #ececee, press #dfdfe2; focus a 2px white outline.
• Navigation link — About, Business: white 14px over the hero. Hover and press change nothing; focus is the browser’s ring.

Radius

Pills at 100–120px (buttons and the search field).

States

Hover: white pills grey to #ececee. Press: #dfdfe2. Focus: a 2px white outline on pills, the browser ring on links.

Do’s and Don’ts

Do

• Alternate leafy green #00615f and oat milk #f9f3f0 sections, switching heading and highlight colours with the surface.
• Set display headlines in Korolev 900 uppercase.
• Use white pills with dark-green ink on green.

Don’t

• Don’t use pure white as the page ground; it is oat milk.
• Don’t put watermelon highlights on green; on green the highlight is lemon.
• Don’t set body text in Korolev.

Voice & Tone

Not assessed as authored voice.

Agent Prompt Guide

Quick Color Reference

#00615f leafy green · #f9f3f0 oat milk · #79e4a7 crunchy apple · #ff7973 watermelon · #fff29a lemon · #012625 ink · #5f6d6d text · #252d2d header

Example Component Prompts

• “A green #00615f hero with a 72px Korolev 900 uppercase headline in #f9f3f0 and a white pill button with #012625 text that greys to #ececee on hover.”
• “A cream #f9f3f0 section with a 75px Korolev heading in #ff7973.”