Food Delivery / iOS / Android / Web

Deliveroo

Deliveroo keeps the page cool and plain and makes the address search the one round, teal thing to start from.

Download
  • #00CCBC
  • #43DDC8
  • #003935
  • #01857C
  • #2E3333
  • #F6F9F9

Color

Every color token in the file, grouped by role.

Brand

  • primary#43DDC8
  • on primary#003935
  • brand teal#00CCBC

Surfaces

  • canvas#FFFFFF

Text

  • teal text#01857C
  • ink#0B0E0E
  • ink heading#2E3333
  • ink muted#535F5F
  • on night#FFFFFF

Lines

  • teal border#1BA69C
  • border#D5DDDD
  • border strong#A3AFAF

More

  • deep teal#056273
  • page#F6F9F9
  • gray band#F1F0F0
  • night#0B0E0E

Typography

Each style is set with the file's own family, size, weight and spacing.

  • stratosstratos is private and not available in open fonts. Shown in Figtree, the closest open match.
  • plex-sansOpen font, listed in the open library as IBM Plex Sans.
  • display60px / 700 / 80px

    Deliveroo

  • headline40px / 700 / 48px

    Deliveroo

  • title28px / 700 / 36px

    Pack my box with five dozen liquor jugs

  • subtitle22px / 700 / 28px

    Pack my box with five dozen liquor jugs

  • body16px / 400 / 22px

    The quick brown fox jumps over the lazy dog

  • button16px / 600 / 24px

    Continue to checkout

  • small14px / 600 / 19px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • xs3px
  • sm4px
  • md8px
  • lg16px
  • pill100px

Spacing

The spacing scale, drawn to size.

  • sm8px
  • md12px
  • base16px
  • lg24px
  • xl40px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button outline
    button-outline
  • search button
    search-button
  • address field
    address-field
  • input
    input
  • footer
    footer
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 120 lines
version: alpha
name: Deliveroo-design-analysis
description: "A food delivery service in Deliveroo teal (#00ccbc, buttons #43ddc8) with deep teal text on the buttons (#003935), cool gray neutrals, Stratos headlines, IBM Plex Sans for everything else, 4px buttons and a fully round address search."
status: Draft
appVersion: "measured in a browser, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#43ddc8"
  on-primary: "#003935"
  brand-teal: "#00ccbc"
  teal-text: "#01857c"
  teal-border: "#1ba69c"
  deep-teal: "#056273"
  ink: "#0b0e0e"
  ink-heading: "#2e3333"
  ink-muted: "#535f5f"
  canvas: "#ffffff"
  page: "#f6f9f9"
  gray-band: "#f1f0f0"
  border: "#d5dddd"
  border-strong: "#a3afaf"
  night: "#0b0e0e"
  on-night: "#ffffff"

typography:
  # Font note: "stratos" is a private font and is not available in open fonts. Closest open alternative: "Figtree".
  display:
    fontFamily: "stratos, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 60px
    fontWeight: 700
    lineHeight: 80px
  headline:
    fontFamily: "stratos, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 48px
  title:
    fontFamily: "stratos, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 36px
  subtitle:
    fontFamily: "plex-sans, 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 28px
  body:
    fontFamily: "plex-sans, 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 22px
  button:
    fontFamily: "plex-sans, 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 24px
  small:
    fontFamily: "plex-sans, 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 19px

rounded:
  xs: 3px
  sm: 4px
  md: 8px
  lg: 16px
  pill: 100px

spacing:
  sm: 8px
  md: 12px
  base: 16px
  lg: 24px
  xl: 40px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 48px
    padding: 12px 24px
  button-outline:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.teal-text}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    height: 40px
    padding: 8px 16px
  search-button:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: 56px
    padding: 16px 40px
  address-field:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    height: 64px
    padding: 12px 40px 12px 48px
  input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    height: 48px
    padding: 12px 16px
  footer:
    backgroundColor: "{colors.night}"
    textColor: "{colors.on-night}"
    typography: "{typography.body}"
    padding: 24px

Overview

Deliveroo delivers restaurant food, groceries and more in the United Kingdom and Europe. Its site is cool gray and white with its teal brand color, deep teal text on light teal buttons, Stratos for headlines and IBM Plex Sans for everything else. The address search is the one fully round control. [Observed]

What defines the look:

  1. Teal on teal. Buttons are light teal #43ddc8 with deep teal #003935 text, not white. The brand teal #00ccbc fills promotion bands. [Measured]
  2. Teal for links and outlines. Second actions are white with #01857c text and a #1ba69c outline. [Measured]
  3. Cool grays. Text is #0b0e0e and #2e3333, secondary #535f5f, the page #f6f9f9, borders #d5dddd. [Measured]
  4. Stratos and Plex. Stratos sets headlines (loaded in bold cuts only), and IBM Plex Sans sets text, buttons and forms. [Measured]
  5. 4px buttons, round search. Buttons and fields use a 4px corner, while the address field and its Search button are full pills, 64 and 56 high. [Measured]

Source for this file: the United Kingdom home page with its address search, the log in page and a not-found page (the cities address no longer exists), measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass. Deliveroo does not publish its design system. Restaurant lists need an address. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Button teal#43ddc8 with #003935 textSearch, Log in, Get started, Open app [Measured]
Brand teal#00ccbcPromotion bands [Measured]
Teal text and outline#01857c, #1ba69cSign up, links, outlined buttons [Measured]
Deep teal#056273Mobile app banner [Measured]
Ink#0b0e0e, headings #2e3333Text [Measured]
Muted text#535f5fDescriptions [Measured]
Page#f6f9f9, #f1f0f0Sections [Measured]
Canvas#ffffffCards and forms [Measured]
Borders#d5dddd, #a3afaf on social buttonsFields and outlines [Measured]
Footer#0b0e0e with white textFooter [Measured]

Typography

RoleDesktopMobileFace and weight
Promotion headline60 on 8028 on 36Stratos, drawn bold [Measured]
Hero headline40 on 4828 on 36Stratos 600, drawn bold [Measured]
Section title28 on 36not measuredStratos 600, drawn bold [Measured]
Form title22 on 28not measuredIBM Plex Sans 700 [Measured]
Footer heading18 on 24sameIBM Plex Sans 700 [Measured]
Body16 on 22sameIBM Plex Sans 400 [Measured]
Button16 on 24sameIBM Plex Sans 600 [Measured]
Small14 on 19sameIBM Plex Sans 600 [Measured]

Stratos is loaded only at 700 and 800, so headlines that ask for 400 or 600 are drawn in the 700 cut. The tokens here record 700, what is drawn. [Measured]

Shape and spacing

Buttons and fields use 4, cards 8 and 16, small tags 3, and the address search 100 (a pill). [Measured] Buttons carry 12 by 24 or 8 by 16 padding, the Search pill 16 by 40. [Measured]

Iconography and motion

Not measured. [Inferred]

Themes

Light only. The dark color scheme pass changed nothing. [Measured]

Platform: iOS

How the Deliveroo iOS app looks and behaves was not captured. Deliveroo does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Not measured. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar for home, search, orders and the account is expected. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A teal checkout or add to basket button. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share the teal buttons with deep teal text and the cool grays with the web. [Inferred]

Platform: Android

How the Deliveroo Android app looks and behaves was not captured. Deliveroo does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Not measured. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar for home, search, orders and the account is expected. [Inferred]

Main action

Expected on Android: Floating action button.

A teal checkout or add to basket button. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share the teal buttons with deep teal text and the cool grays with the web. [Inferred]

Platform: Web

The home page, the log in page and a not-found page, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A white header with the logo, a teal Log in button and an outlined Sign up button, both 40 high with a 4px corner. On mobile the header shows an "Open app" teal button. [Measured]

Main action

Expected on Web: Page-level button.

The address search: a 64 high pill field with a 1px #d5dddd border and a 56 high teal Search pill inside it (48 and 40 on mobile). [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Log in fields are 48 high with a 4px corner and a 1px #d5dddd border. Social sign-in buttons are 48 to 50 high with 4px corners: Facebook blue, Google white with a #a3afaf border, Apple black. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values that step down at the mobile width. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons are 40 to 56 high, fields 48 to 64. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

The log in page offers Facebook, Google and Apple as equal buttons next to email. [Measured]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

A conventional responsive site whose one round control is the address search, so it reads as the starting point. [Measured]

Cross-platform consistency

Consistent across platforms: the teal buttons with deep teal text, cool grays and the round address search. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Put deep teal text on light teal buttons.
  • Use teal outlines and text for second actions.
  • Keep buttons and fields at 4px and reserve the pill for the address search.
  • Set headlines in the bold display face and everything else in IBM Plex Sans.

Don't

  • Don't put white text on the light teal.
  • Don't round ordinary buttons into pills.
  • Don't use warm grays.

Known Gaps

  • Restaurant lists, menus, the basket and checkout need an address or account and were not measured. The cities address now returns a not-found page.
  • The iOS and Android apps were not captured, and Deliveroo publishes no design system, so every mobile topic is inferred.
  • Icons, motion and modals were not measured.
  • Stratos is private. Figtree was chosen by comparing the same headline side by side at the drawn 700 weight: within 1 percent of the width with similar round forms. Urbanist and Inter Tight were close seconds. IBM Plex Sans is open and is used as is.
  • Account deletion and store policy rules were not verified.