--- 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 | Role | Value | Where | |------|-------|-------| | Orange | `#f55905` | Headlines, links, service cards, buttons [Measured] | | Orange wash | `#fee9dd` | Mobile bands [Measured] | | Maroon | `#411517` | App promotion headline [Measured] | | Ink | `#262626` | Text and city names [Measured] | | Muted | `#969696`, `#a6a6a6` | Helper text [Measured] | | Canvas and sand | `#ffffff`, `#f4ede3` | Page and bands [Measured] | | Charcoal | `#262626` | Footer [Measured] | | Borders | `#e5e5e5`, `#ced4da` | Dividers and fields [Measured] | ### Typography TT Commons at 400, 500, 600 and 800, with Noto Sans for some scripts. [Measured] | Role | Desktop | Mobile | Weight | |------|---------|--------|--------| | Display | 48 | not measured | 800 [Measured] | | Hero headline | 28 on 33.6 | 20 on 24 | 600 [Measured] | | App promotion | not shown | 24 | 700 [Measured] | | City name | 20 on 24 | not measured | 500 [Measured] | | Lead | 18 on 22.14 | not measured | 500 [Measured] | | Nav link | 20 on 43 | 16 on 20 | 500 to 400 [Measured] | | Button | 16 | same | 400 [Measured] | | Small | 13 on 18.57 | 12 on 17.14 | 400 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.