--- version: alpha name: Careem-design-analysis description: "A Middle Eastern everything app for rides, food and payments in bright Careem green (#00eb79) with dark slate text on its buttons, deep forest green headings (#004b3e), bold service tiles in indigo, violet, navy and mint, Careem Sans display type and Inter for everything else." status: Draft appVersion: "measured in a browser, 2026-10-15" platformsCovered: [Web] reviewer: "" verifiedAt: "" colors: primary: "#00eb79" on-primary: "#1f2937" forest: "#004b3e" forest-alt: "#00493e" mint: "#d2ffd5" mint-text: "#d6ffea" indigo: "#3837e4" violet: "#7f5ffa" navy: "#001942" on-tile: "#ffffff" ink: "#1f2937" canvas: "#ffffff" page: "#f4f8fb" gray: "#f3f4f6" border: "#e5e7eb" typography: # Font note: "CareemSans" is a private font and is not available in open fonts. Closest open alternative: "DM Sans". display: fontFamily: "CareemSans, sans-serif" fontSize: 54px fontWeight: 700 lineHeight: 54px headline: fontFamily: "CareemSans, sans-serif" fontSize: 48px fontWeight: 700 lineHeight: 48px title: fontFamily: "CareemSans, sans-serif" fontSize: 36px fontWeight: 700 lineHeight: 44px lead: fontFamily: "Inter, sans-serif" fontSize: 28px fontWeight: 400 lineHeight: 36px button: fontFamily: "Inter, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 32px nav: fontFamily: "Inter, sans-serif" fontSize: 14px fontWeight: 600 lineHeight: 21px small: fontFamily: "Inter, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 15px rounded: xs: 6px sm: 8px md: 16px lg: 24px xl: 28px pill: 9999px spacing: sm: 8px md: 12px base: 16px lg: 24px xl: 48px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.sm}" height: 56px padding: 12px 48px button-small: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.small}" rounded: "{rounded.sm}" height: 31px padding: 8px 16px button-white: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.small}" rounded: "{rounded.sm}" height: 31px padding: 8px 16px tile-indigo: backgroundColor: "{colors.indigo}" textColor: "{colors.on-tile}" typography: "{typography.title}" rounded: "{rounded.lg}" tile-mint: backgroundColor: "{colors.mint}" textColor: "{colors.forest}" typography: "{typography.display}" rounded: "{rounded.lg}" tile-navy: backgroundColor: "{colors.navy}" textColor: "{colors.on-tile}" typography: "{typography.title}" rounded: "{rounded.lg}" --- ## Overview Careem is an everything app across the Middle East for rides, food and grocery delivery, bikes, car rental and payments. Its site arranges services as large rounded tiles in indigo, violet, navy and mint, uses a bright green for every button with dark slate text on it, deep forest green for headings, Careem Sans for big service words and Inter for the rest. [Observed] What defines the look: 1. **Bright green buttons, dark text.** `#00eb79` fills Download the app, Rent now and Read more, always with `#1f2937` text. [Measured] 2. **Forest green headings.** Service headings ("Go", "Rides", "CarRental") are `#004b3e`. [Measured] 3. **Colored service tiles.** Indigo `#3837e4`, violet `#7f5ffa`, navy `#001942` and mint `#d2ffd5` tiles with 24px corners carry the services. [Measured] 4. **Careem Sans words, Inter sentences.** Short service words are Careem Sans 700, 48 to 54 on a line height equal to the size. Offers and navigation are Inter. [Measured] 5. **8px buttons, round tiles.** Buttons use 8, tiles 24 and 28, cards 16. [Measured] Source for this file: the United Arab Emirates home page, the rides page and the car rental page, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass. Careem does not publish its design system. Booking happens in the app. No app captures were used. See Known Gaps. ## Core ### Colors | Role | Value | Where | |------|-------|-------| | Careem green | `#00eb79` with `#1f2937` text | Every button [Measured] | | Forest green | `#004b3e`, `#00493e` | Service headings [Measured] | | Mint | `#d2ffd5`, text mint `#d6ffea` | Tiles, text on dark tiles [Measured] | | Indigo | `#3837e4` | Service tile [Measured] | | Violet | `#7f5ffa` | Service tile [Measured] | | Navy | `#001942` | Service tile [Measured] | | Ink | `#1f2937` | Navigation and button text [Measured] | | Canvas and page | `#ffffff`, `#f4f8fb`, `#f3f4f6` | Page and bands [Measured] | | Border | `#e5e7eb` | Dividers [Measured] | ### Typography Careem Sans at 600 and 700 for service words, and Inter at 400 to 700 for everything else. [Measured] | Role | Desktop | Mobile | Face and weight | |------|---------|--------|-----------------| | Service word | 54 on 54 (48 on 48 on service pages) | 32 on 40 | Careem Sans 700 [Measured] | | Tile word | 36 on 44 | 22 on 30 | Careem Sans 700 [Measured] | | Offer lead | 28 on 36 | 12 on 15 | Inter 400 [Measured] | | Main button | 16 on 32 | not shown | Inter 700 [Measured] | | Navigation | 14 on 21 | not shown | Inter 600 [Measured] | | Small button | 12 on 15 | same | Inter 500 [Measured] | ### Shape and spacing Buttons use 8, tiles 24 and 28, cards 16 and 12, and chips full round. [Measured] Main buttons carry 12 by 48 padding, small ones 8 by 16. [Measured] ### Iconography and motion Not measured. [Inferred] ### Themes Light page with fixed colored tiles. The dark color scheme pass changed nothing. [Measured] ## Platform: iOS How the Careem iOS app looks and behaves was not captured. Careem 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 service tiles (rides, food, groceries, pay) with a bottom tab bar is expected. [Inferred] ### Main action Expected on iOS: Nav bar or bottom bar button. A green book or order button with dark text. [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 green, the service tile colors and Careem Sans with the web. [Inferred] ## Platform: Android How the Careem Android app looks and behaves was not captured. Careem 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 service tiles (rides, food, groceries, pay) with a bottom navigation bar is expected. [Inferred] ### Main action Expected on Android: Floating action button. A green book or order button with dark text. [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 green, the service tile colors and Careem Sans with the web. [Inferred] ## Platform: Web The home page, the rides page and the car rental 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 Services, Partners and other links at 14 semibold, 69 high. On mobile, a green "Download the app" button sits in the header, 31 high. [Measured] ### Main action Expected on Web: Page-level button. A Careem green button with dark slate 16px bold text, 56 high with an 8px corner and 48px side padding ("Rent now"). [Measured] ### Sheets, dialogs and messages Expected on Web: Modals, toasts. Not measured. [Inferred] ### Controls Expected on Web: Native or custom. Offer cards pair a short headline with a 31 high green or white "Redeem now" button. [Measured] ### Text sizing Expected on Web: Browser zoom. Sizes are fixed pixel values that step down sharply at the mobile width (offer leads 28 to 12). [Measured] ### Touch and pointer targets Expected on Web: Pointer and keyboard. The main button is 56 high, small buttons 31. [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 applicable to the public 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 tile-led marketing site that mirrors an app home screen of services. [Observed] ## Cross-platform consistency Consistent across platforms: the green with dark text, the service tile colors and Careem Sans. [Measured for web, Inferred for the apps] Intentionally different: not measured. [Inferred] ## Do's and Don'ts ### Do - Put dark slate text on the bright green, never white. - Give each service a full tile in its own color with a 24px corner. - Set service words in Careem Sans, solid and bold. - Keep buttons at 8px. ### Don't - Don't use the green for headings. Headings are forest green. - Don't set sentences in Careem Sans. - Don't round buttons into pills. ## Known Gaps - Booking, the wallet and orders live in the app and were not measured. - Only the United Arab Emirates site was measured. - The iOS and Android apps were not captured, and Careem publishes no design system, so every mobile topic is inferred. - Icons, motion and modals were not measured. - Small buttons (31) are below the 44 and 48 touch minimums. That is the shipped size. - Careem Sans is private. DM Sans was chosen by comparing the same 36px word side by side: within 2 percent of the width with similar round forms. Rubik and Work Sans were close seconds. - Account deletion and store policy rules were not verified.