Travel / iOS / Android / Web

Uber

Uber drops color altogether: black, white and a few grays, big bold headlines and round pills, so the maps and photographs are the only color on screen.

Download
  • #000000
  • #FFFFFF
  • #F6F6F6
  • #292929
  • #333333
  • #AFAFAF

Color

Every color token in the file, grouped by role.

Brand

  • primary#000000
  • on primary#FFFFFF

Surfaces

  • canvas#FFFFFF

Text

  • ink body#333333
  • ink muted#4A4A4A
  • ink faint#AFAFAF

Lines

  • hairline#F0F0F0

More

  • panel#F6F6F6
  • panel soft#F3F3F3
  • inverse#292929

Typography

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

  • UberMoveUberMove is private and not available in open fonts. Shown in Albert Sans, the closest open match.
  • UberMoveTextUberMoveText is private and not available in open fonts. Shown in Inter, the closest open match.
  • display52px / 700 / 64px

    Uber

  • headline36px / 700 / 44px

    Uber

  • body16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • button14px / 500 / 16px

    Continue to checkout

Shape

Corner radius tokens.

  • xs6px
  • sm8px
  • md16px
  • pill999px

Spacing

The spacing scale, drawn to size.

  • sm10px
  • md12px
  • base16px

Components

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

  • button dark
    button-dark
  • button light
    button-light
  • text link
    text-link
  • panel
    panel
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 83 lines
version: alpha
name: Uber-design-analysis
description: "A mobility brand in strict black and white: UberMove headlines at weight 700, UberMoveText for the interface, round black and white pill buttons, a few cool grays and no accent color."
status: Draft
appVersion: "measured in a browser, 2026-10-06"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#000000"
  on-primary: "#ffffff"
  canvas: "#ffffff"
  panel: "#f6f6f6"
  panel-soft: "#f3f3f3"
  inverse: "#292929"
  ink-body: "#333333"
  ink-muted: "#4a4a4a"
  ink-faint: "#afafaf"
  hairline: "#f0f0f0"

typography:
  # Font note: "UberMove" is a private font and is not available in open fonts. Closest open alternative: "Albert Sans".
  # Font note: "UberMoveText" is a private font and is not available in open fonts. Closest open alternative: "Inter".
  display:
    fontFamily: "UberMove, 'Albert Sans', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 52px
    fontWeight: 700
    lineHeight: 64px
  headline:
    fontFamily: "UberMove, 'Albert Sans', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 44px
  body:
    fontFamily: "UberMoveText, Inter, system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  button:
    fontFamily: "UberMoveText, Inter, system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 16px

rounded:
  xs: 6px
  sm: 8px
  md: 16px
  pill: 999px

spacing:
  sm: 10px
  md: 12px
  base: 16px

components:
  button-dark:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: 36px
    padding: 10px 12px
  button-light:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: 36px
    padding: 10px 12px
  text-link:
    backgroundColor: transparent
    textColor: "{colors.on-primary}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    height: 24px
  panel:
    backgroundColor: "{colors.panel}"
    textColor: "{colors.ink-body}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 16px

Overview

Uber is a ride and delivery platform. Its public site is strictly black and white: big bold headlines, round pill buttons and photographs, with no accent color at all. [Observed]

What defines the look:

  1. Black and white only. Black #000000, white and a few grays (#f6f6f6, #f3f3f3, #292929, #333333). No brand color appears in the measured page. [Measured]
  2. Bold geometric headlines. UberMove at 700, 52 on 64 for the hero and 36 on 44 for sections. [Measured]
  3. Round pill buttons. Black with white text or white with black text, 36 to 38 high, 14 at 500. [Measured]
  4. Small interface type. UberMoveText at 14 and 16, with 8px corners on small controls. [Measured]
  5. Photography does the color. The site relies on images, not a palette. [Observed]

Source for this file: the Uber US home page measured in a browser at 1440 and 390 wide, read on 2026-10-06. Uber's Base design system site was not read. The ride flow is behind login and was not measured. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Black#000000Buttons, hero and header
White#ffffffPages and light buttons
Cool grays#f6f6f6, #f3f3f3, #f0f0f0Panels and rules
Dark panel#292929Dark sections
Text#333333, #4a4a4aBody
Faint text#afafafMeta

Typography

UberMove carries headlines at 700: 52 on 64 for the hero, 36 on 44 for sections. UberMoveText carries text and buttons: 16 on 24 at 400 for body and 14 on 16 at 500 for buttons and navigation. [Measured]

Shape and spacing

Buttons are 999px pills 36 to 38 high with 10 by 12 padding. Smaller controls use 8, panels 16 and thin elements 6. [Measured]

Iconography and motion

Not measured in this pass. [Inferred]

Themes

Light and dark sections on the page measured. [Observed]

Platform: iOS

The Uber iOS app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Chevron plus previous title and the edge swipe, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar for the main areas of the app. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A large black button for requesting a ride. [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-06 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 apps are expected to share the black and white, the type and the pills with the web. [Inferred]

Platform: Android

The Uber Android app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

System back and gesture, with an up arrow in the top bar, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar for the main areas of the app. [Inferred]

Main action

Expected on Android: Floating action button.

A large black button for requesting a ride. [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-06 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 apps are expected to share the black and white, the type and the pills with the web. [Inferred]

Platform: Web

The Uber US home page, measured at 1440 and 390 wide. The ride flow was not measured.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A black header with Business, About and language buttons and Log in and Sign up pills. [Observed]

Main action

Expected on Web: Page-level button.

A black pill with white text, 36 high, or a white pill with black text on dark. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Pills 36 to 38 high and text links with an 8px focus corner. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values at each breakpoint. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons measure 36 to 38 high. [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.

The responsive page keeps type and color and changes layout. [Measured]

Cross-platform consistency

Consistent across platforms: black and white, the bold type and pill buttons. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Stay in black, white and a few cool grays.
  • Set headlines bold and large.
  • Use pill buttons in black or white.
  • Let photography supply color.

Don't

  • Don't add an accent color.
  • Don't use sharp corners on buttons.
  • Don't use light headline weights.

Known Gaps

  • The ride flow, the map and the signed-in app were not measured, since they sit behind login.
  • The iOS and Android apps were not captured. Their sections are inferred from the web design and platform conventions.
  • Icons, motion and exact breakpoints were not measured.
  • Account deletion and store policy rules were not verified.
  • Uber's Base design system was not read, so role names are not given.