Mobility system preview

Go anywhere with a system built for direct action.

Black CTAs, flat white utility surfaces, precise grey inputs, and the pickup-to-dropoff rail define a calm product experience that is ready before it speaks.

View trip patterns

Request a ride now

Current location
Where to?
26Colors
11Type levels
16Components
58Core tokens
01 / Colors

Monochrome, grey utility, rare status color.

Uber's palette is not decorative. Black creates action and structure, white carries the page, and greys make forms and secondary controls usable.

primary#000000

Main action and nav anchor.

accent#333333

Dark hover and active neutral.

canvas#FFFFFF

Dominant marketing surface.

inputFill#F3F3F3

Trip form fields and utility fill.

muted#5E5E5E

Paragraphs and placeholders.

border#EEEEEE

Hairlines and dividers.

inputLine#A6A6A6

Pickup/dropoff connector.

focusRing#276EF1

Accessible focus only.

success#008A00

Confirmation state.

warning#FFC043

Operational warning.

error#D44333

Blocking form error.

link#0000EE

Legacy/docs utility link.

02 / Typography

Large, plain, neutral tracking.

Headings use UberMove-like display weight; interface copy uses UberMoveText-like system fallbacks with no added tracking.

Go anywhere

display — 52px / 700 / 1.23 / 0em / UberMove

Request a ride

hero — 52px / 700 / 1.23 / 0em / UberMove

Plan your next trip

headline-lg — 44px / 700 / 1.18 / 0em / UberMove

Upfront pricing explained

headline-md — 36px / 700 / 1.22 / 0em / UberMove

Ride options

title-lg — 28px / 700 / 1.29 / 0em / UberMove

Download the app

title-md — 24px / 700 / 1.33 / 0em / UberMove

Pickup details

title-sm — 20px / 700 / 1.30 / 0em / UberMove

See prices

button — 16px / 500 / 1.25 / 0em / UberMoveText

A calm body style for explanatory ride and account copy.

body — 16px / 400 / 1.50 / 0em / UberMoveText

Fine print and quiet metadata

caption — 14px / 400 / 1.43 / 0em / UberMoveText

03 / Buttons

Rectangular primary, pill secondary.

The important distinction is shape: black primary actions use 8px corners; selectors and nav controls become pills.

button-primary
button-primary-hover
button-primary-active
button-secondary
button-nav-pill
button-nav-inverse
Learn morelink-inline
Docs linklink-utility
04 / Cards & Surfaces

Flat utility blocks, not decorative cards.

Most Uber surfaces are permanent and flat. The only shadow here is the dropdown-style temporary layer.

Hero trip panel

A white task surface with form fields and action buttons, integrated into the page.

Request ride

Secondary module

Light grey panels support scheduling controls, quiet utility states, and compact selectors.

Image feature card

Photography sits in flat rectangular crops with minimal framing.

QR download card

Large enough for scanning, practical, and white against a light section.

Footer surface

Black information fields bookend the site and carry dense link groups.

Dropdown layer

The single permitted elevation pattern: white, 8px radius, soft black shadow.

Menu item
05 / Brand-Specific Product Patterns

Mobility UI as the brand signature.

These mini mockups carry the recognizable Uber category cues: origin-to-destination structure, vehicle rows, maps, upfront price, app download, and docs density.

Trip planner module

1 Market St
SFO Terminal 2

Ride option list

UberX
4 min away
$34.82
Comfort
Extra legroom
$42.10
Black
Premium ride
$78.40

Pickup timeline

Meet at the main entrance
Driver arriving in 3 min
Dropoff confirmed
Terminal 2 departures

Map route surface

App download cards

Rider app
Scan to download
Driver app
Scan to download

Developer docs shell

Overview
Ride Requests
Button
API
Design Guidelines
06 / Forms

Grey fields, black markers, blue focus.

Forms should feel like trip tools: direct, quiet, and immediately actionable.

Dropoff is required.
07 / Spacing

Compact controls, broader sections.

The rhythm moves from 4px details to 64px sections without ornamental padding.

xs / 4px
sm / 8px
md / 16px
lg / 24px
xl / 40px
section / 64px
input / 52px
button / 48px
08 / Radius

Small radii, selective pills.

Primary buttons and panels stay modest. Pills are reserved for nav, selectors, and secondary controls.

sm / 4pxTrip input
md / 8pxMenus
lg / 8pxPrimary CTA
xl / 16pxRare large surface
pill / 999pxNav and selectors
09 / Elevation

Flat by default.

Depth comes from contrast, scale, and grouping. Shadows only appear on temporary dropdown layers.

Flat surface

Permanent UI uses no shadow.

shadow: none

Feature block

Image and content modules stay flat.

shadow: none

Dropdown

Only transient menus lift above the page.

0 4px 16px #00000029
10 / Extracted Component Tokens

CSS custom properties.

The preview is driven by the same values used above.

:root {
  --brand-primary: #000000;
  --brand-accent: #333333;
  --brand-accent-hover: #282828;
  --brand-accent-pressed: #1f1f1f;
  --brand-ink: #000000;
  --brand-body: #333333;
  --brand-muted: #5e5e5e;
  --brand-canvas: #ffffff;
  --brand-surface: #ffffff;
  --brand-surface-alt: #f3f3f3;
  --brand-border: #eeeeee;
  --brand-border-strong: #afafaf;
  --brand-link: #0000ee;
  --brand-input-fill: #f3f3f3;
  --brand-input-line: #a6a6a6;
  --brand-focus-ring: #276ef1;
  --radius-sm: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;
  --space-section: 64px;
  --nav-height: 64px;
  --input-height: 52px;
  --button-height: 48px;
}