Travel / iOS / Android / Web

Careem

Careem lays its services out like an app home screen, each in its own bold tile, with one bright green for every button.

Download
  • #00EB79
  • #004B3E
  • #3837E4
  • #7F5FFA
  • #001942
  • #D2FFD5

Color

Every color token in the file, grouped by role.

Brand

  • primary#00EB79
  • on primary#1F2937

Surfaces

  • canvas#FFFFFF

Text

  • mint text#D6FFEA
  • on tile#FFFFFF
  • ink#1F2937

Lines

  • border#E5E7EB

More

  • forest#004B3E
  • forest alt#00493E
  • mint#D2FFD5
  • indigo#3837E4
  • violet#7F5FFA
  • navy#001942
  • page#F4F8FB
  • gray#F3F4F6

Typography

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

  • CareemSansCareemSans is private and not available in open fonts. Shown in DM Sans, the closest open match.
  • InterOpen font, shown as published.
  • display54px / 700 / 54px

    Careem

  • headline48px / 700 / 48px

    Careem

  • title36px / 700 / 44px

    Careem

  • lead28px / 400 / 36px

    Pack my box with five dozen liquor jugs

  • button16px / 700 / 32px

    Continue to checkout

  • nav14px / 600 / 21px

    The quick brown fox jumps over the lazy dog

  • small12px / 500 / 15px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • xs6px
  • sm8px
  • md16px
  • lg24px
  • xl28px
  • pill9999px

Spacing

The spacing scale, drawn to size.

  • sm8px
  • md12px
  • base16px
  • lg24px
  • xl48px

Components

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

  • button primary
    button-primary
  • button small
    button-small
  • button white
    button-white
  • tile indigo
    tile-indigo
  • tile mint
    tile-mint
  • tile navy
    tile-navy
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 116 lines
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

RoleValueWhere
Careem green#00eb79 with #1f2937 textEvery button [Measured]
Forest green#004b3e, #00493eService headings [Measured]
Mint#d2ffd5, text mint #d6ffeaTiles, text on dark tiles [Measured]
Indigo#3837e4Service tile [Measured]
Violet#7f5ffaService tile [Measured]
Navy#001942Service tile [Measured]
Ink#1f2937Navigation and button text [Measured]
Canvas and page#ffffff, #f4f8fb, #f3f4f6Page and bands [Measured]
Border#e5e7ebDividers [Measured]

Typography

Careem Sans at 600 and 700 for service words, and Inter at 400 to 700 for everything else. [Measured]

RoleDesktopMobileFace and weight
Service word54 on 54 (48 on 48 on service pages)32 on 40Careem Sans 700 [Measured]
Tile word36 on 4422 on 30Careem Sans 700 [Measured]
Offer lead28 on 3612 on 15Inter 400 [Measured]
Main button16 on 32not shownInter 700 [Measured]
Navigation14 on 21not shownInter 600 [Measured]
Small button12 on 15sameInter 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.