Food Delivery / iOS / Android / Web

talabat

talabat warms the page with sand and lets one orange do everything else: headlines, links, service cards and pills.

Download
  • #F55905
  • #FEE9DD
  • #F4EDE3
  • #262626
  • #411517
  • #FFFFFF

Color

Every color token in the file, grouped by role.

Brand

  • primary#F55905
  • on primary#FFFFFF
  • primary wash#FEE9DD

Surfaces

  • canvas#FFFFFF

Text

  • ink#262626
  • ink muted#969696
  • ink faint#A6A6A6
  • on charcoal#FFFFFF

Lines

  • border#E5E5E5
  • field border#CED4DA

More

  • maroon#411517
  • sand#F4EDE3
  • charcoal#262626

Typography

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

  • TTCommonsTTCommons is private and not available in open fonts. Shown in Outfit, the closest open match.
  • display48px / 800 / 1.35

    talabat

  • headline28px / 600 / 33.6px

    Pack my box with five dozen liquor jugs

  • title20px / 500 / 24px

    Pack my box with five dozen liquor jugs

  • lead18px / 500 / 22.14px

    The quick brown fox jumps over the lazy dog

  • button16px / 400 / 1.35

    Continue to checkout

  • body16px / 400 / 22.86px

    The quick brown fox jumps over the lazy dog

  • small13px / 500 / 18.57px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • xs5px
  • sm10px
  • md16px
  • lg32px
  • pill100px

Spacing

The spacing scale, drawn to size.

  • sm10px
  • md12px
  • base20px
  • lg24px

Components

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

  • button primary
    button-primary
  • button small
    button-small
  • sand band
    sand-band
  • service card
    service-card
  • footer
    footer
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 101 lines
version: alpha
name: Talabat-design-analysis
description: "A Middle Eastern food and grocery delivery app in talabat orange (#f55905) on white and warm sand (#f4ede3), with charcoal bands (#262626), a deep maroon accent (#411517), TT Commons throughout, 48 high orange pill buttons and 16px cards."
status: Draft
appVersion: "measured in a browser, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#f55905"
  on-primary: "#ffffff"
  primary-wash: "#fee9dd"
  maroon: "#411517"
  ink: "#262626"
  ink-muted: "#969696"
  ink-faint: "#a6a6a6"
  canvas: "#ffffff"
  sand: "#f4ede3"
  charcoal: "#262626"
  on-charcoal: "#ffffff"
  border: "#e5e5e5"
  field-border: "#ced4da"

typography:
  # Font note: "TTCommons" is a private font and is not available in open fonts. Closest open alternative: "Outfit".
  display:
    fontFamily: "TTCommons, 'Noto Sans', sans-serif"
    fontSize: 48px
    fontWeight: 800
  headline:
    fontFamily: "TTCommons, 'Noto Sans', sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 33.6px
  title:
    fontFamily: "TTCommons, 'Noto Sans', sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 24px
  lead:
    fontFamily: "TTCommons, 'Noto Sans', sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 22.14px
  button:
    fontFamily: "TTCommons, 'Noto Sans', sans-serif"
    fontSize: 16px
    fontWeight: 400
  body:
    fontFamily: "TTCommons, 'Noto Sans', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 22.86px
  small:
    fontFamily: "TTCommons, 'Noto Sans', sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 18.57px

rounded:
  xs: 5px
  sm: 10px
  md: 16px
  lg: 32px
  pill: 100px

spacing:
  sm: 10px
  md: 12px
  base: 20px
  lg: 24px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.lg}"
    height: 48px
    padding: 0 24px
  button-small:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.lg}"
    height: 32px
    padding: 0 12px
  sand-band:
    backgroundColor: "{colors.sand}"
    textColor: "{colors.ink}"
    typography: "{typography.headline}"
  service-card:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.headline}"
    rounded: "{rounded.md}"
  footer:
    backgroundColor: "{colors.charcoal}"
    textColor: "{colors.on-charcoal}"
    typography: "{typography.body}"

Overview

talabat delivers restaurant food, groceries, flowers and pharmacy items across the Gulf and the wider Middle East. Its site is white and warm sand with talabat orange for headlines, links, service cards and pill buttons, charcoal for the footer and TT Commons for all text. [Observed]

What defines the look:

  1. talabat orange. #f55905 sets the hero headline, links, the service cards and every button. [Measured]
  2. Warm sand. #f4ede3 fills large bands behind the content, with a pale orange #fee9dd on mobile. [Measured]
  3. Orange pill buttons. Buttons are 48 high with a 32px corner and white text ("Let's go", "Find out more"). [Measured]
  4. One face. TT Commons from 400 to 800, with a heavy 48px headline and 28px semibold section titles. [Measured]
  5. Charcoal and maroon. Text and the footer are #262626, and the app promotion uses a deep maroon #411517. [Measured]

Source for this file: the United Arab Emirates home page, the restaurants page and the groceries page, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass. talabat does not publish its design system. Menus and checkout need an address and an account. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Orange#f55905Headlines, links, service cards, buttons [Measured]
Orange wash#fee9ddMobile bands [Measured]
Maroon#411517App promotion headline [Measured]
Ink#262626Text and city names [Measured]
Muted#969696, #a6a6a6Helper text [Measured]
Canvas and sand#ffffff, #f4ede3Page and bands [Measured]
Charcoal#262626Footer [Measured]
Borders#e5e5e5, #ced4daDividers and fields [Measured]

Typography

TT Commons at 400, 500, 600 and 800, with Noto Sans for some scripts. [Measured]

RoleDesktopMobileWeight
Display48not measured800 [Measured]
Hero headline28 on 33.620 on 24600 [Measured]
App promotionnot shown24700 [Measured]
City name20 on 24not measured500 [Measured]
Lead18 on 22.14not measured500 [Measured]
Nav link20 on 4316 on 20500 to 400 [Measured]
Button16same400 [Measured]
Small13 on 18.5712 on 17.14400 to 500 [Measured]

Shape and spacing

Cards use 16, tiles 10, buttons 32 (pills at 48 high), a few small parts 5, and avatars full round. [Measured] Buttons carry 24 side padding (12 for the 32 high mobile Open button). [Measured]

Iconography and motion

Not measured. [Inferred]

Themes

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

Platform: iOS

How the talabat iOS app looks and behaves was not captured. talabat 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 home of verticals (food, groceries, pharmacy) with a bottom tab bar is expected. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

An orange checkout or add 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 orange, the sand and TT Commons with the web. [Inferred]

Platform: Android

How the talabat Android app looks and behaves was not captured. talabat 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 home of verticals (food, groceries, pharmacy) with a bottom navigation bar is expected. [Inferred]

Main action

Expected on Android: Floating action button.

An orange checkout or add 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 orange, the sand and TT Commons with the web. [Inferred]

Platform: Web

The home page, the restaurants page and the groceries 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 orange text links (Corporate, Become a partner) at 20, 44 high, and a location field. On mobile an app banner with an orange Open pill (32 high) sits at the top. [Measured]

Main action

Expected on Web: Page-level button.

An orange #f55905 pill with white 16px text, 48 high with a 32px corner and 24 side padding. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Service cards ("Order food", "Order groceries") are large orange tiles with white 28px titles and 16px corners. [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 48 high, nav links 44, and the mobile Open pill 32. [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.

Not checked on the pages measured. [Observed]

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 delivery site that pushes the app on mobile with a banner. [Observed]

Cross-platform consistency

Consistent across platforms: the orange, the sand and TT Commons. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use orange for headlines, links and every button.
  • Lay sections on warm sand, not gray.
  • Make buttons 48 high pills.
  • Keep text in charcoal and TT Commons.

Don't

  • Don't use cool grays.
  • Don't use square buttons.
  • Don't add a second accent color for actions.

Known Gaps

  • Menus, the basket, checkout and the account need an address and an account and were not measured.
  • Only the United Arab Emirates site was measured.
  • The iOS and Android apps were not captured, and talabat publishes no design system, so every mobile topic is inferred.
  • Icons, motion and modals were not measured.
  • White text on orange #f55905 measures 3.33 to 1, below the 4.5 to 1 minimum for normal text. That is the shipped pairing and was kept.
  • TT Commons is private. Outfit was chosen by comparing the same 48px word side by side: within 1 percent of the width with similar geometric forms. Urbanist was a close second.
  • Account deletion and store policy rules were not verified.