Design System Inspiration of Too Good To Go
1. 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.
2. Color Palette & Roles
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).
3. Typography Rules
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.
4. Component Stylings
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).
5. Layout Principles
- A transparent header over a full green hero with a huge uppercase headline, then alternating
cream and green sections.
6. Depth & Elevation
Flat; colour blocks separate sections.
7. 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.
8. Responsive Behavior
Not measured. Desktop 1440×1000 only.
9. 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."
10. Voice & Tone
Not assessed as authored voice.
11. 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.
12. Principles
- Fight food waste. The mission its careers page names.
- Colours named like food.
- Surface-aware theming. Every section flips its heading and highlight.
13. Personas
Not researched. No persona claim is made from a UI capture.
14. States
Hover: white pills grey to #ececee. Press: #dfdfe2. Focus: a 2px white outline on pills, the
browser ring on links.
15. Motion & Easing
Not measured.
Tier 1 sources: https://www.toogoodtogo.com/en-gb (live homepage — 842 root custom properties read via getComputedStyle, Tailwind excluded; Korolev and Tenon loaded; two components measured at rest, hover, pressed and focus, captured 2026-09-26); https://www.toogoodtogo.com/en-gb/zz-this-does-not-exist (nonsense-path control — HTTP 404 in the browser, read 2026-09-26); https://www.toogoodtogo.com/en-gb/press (press — 120 million registered users, 180,000 active partners, 21 countries, launched 2016, read 2026-09-26); https://www.toogoodtogo.com/en-gb/legal/contact-us (Too Good To Go ApS, Landskronagade 66, 2100 Copenhagen, Denmark, CVR 37561304, read 2026-09-26)
