--- 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 | Role | Value | Where | |------|-------|-------| | Button teal | `#43ddc8` with `#003935` text | Search, Log in, Get started, Open app [Measured] | | Brand teal | `#00ccbc` | Promotion bands [Measured] | | Teal text and outline | `#01857c`, `#1ba69c` | Sign up, links, outlined buttons [Measured] | | Deep teal | `#056273` | Mobile app banner [Measured] | | Ink | `#0b0e0e`, headings `#2e3333` | Text [Measured] | | Muted text | `#535f5f` | Descriptions [Measured] | | Page | `#f6f9f9`, `#f1f0f0` | Sections [Measured] | | Canvas | `#ffffff` | Cards and forms [Measured] | | Borders | `#d5dddd`, `#a3afaf` on social buttons | Fields and outlines [Measured] | | Footer | `#0b0e0e` with white text | Footer [Measured] | ### Typography | Role | Desktop | Mobile | Face and weight | |------|---------|--------|-----------------| | Promotion headline | 60 on 80 | 28 on 36 | Stratos, drawn bold [Measured] | | Hero headline | 40 on 48 | 28 on 36 | Stratos 600, drawn bold [Measured] | | Section title | 28 on 36 | not measured | Stratos 600, drawn bold [Measured] | | Form title | 22 on 28 | not measured | IBM Plex Sans 700 [Measured] | | Footer heading | 18 on 24 | same | IBM Plex Sans 700 [Measured] | | Body | 16 on 22 | same | IBM Plex Sans 400 [Measured] | | Button | 16 on 24 | same | IBM Plex Sans 600 [Measured] | | Small | 14 on 19 | same | IBM 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.