iOS Design Spec

# Get there.
Nothing else.

The Uber iOS app, dissected. Black is the only brand color. Maps fill edge-to-edge. Pills carry every primary action — Uber's iconic full-pill button is the geometry the whole product agrees on.

View Design Tokens Explore Surfaces
9:41
Current location123 Liberty St
SFO AirportSan Francisco, CA
Choose a ride
🚗
UberX5 min away · 4 seats
$24.509:48 AM
🚙
UberXL8 min · 6 seats
$38.20
🚘
Uber Black6 min · Premium
$52.80
Choose UberX
Home
Services
Activity
Account
Ride Selection
9:41
J
Where to?
Later
Home
15 min
Work
22 min
Saved
3 places
Send package
Try Uber Connect
Suggestions
Ride to airport
Save with Reserve
Uber Eats
$10 off first order
Home
Services
Activity
Account
Where to?
9:41
Arriving in 3 min9:48 AM · SFO Airport, Terminal 3
Marcus
★ 4.93 · Toyota Camry · Silver
7XYZ123
Message
Call
Share
Trip Tracking
iOS Surface Anatomy

## Three surfaces. One black pill.

Every Uber screen earns its position with the same grammar — an edge-to-edge map, a sheet that lifts above it, and a single black pill that says "go." Nothing decorative survives.

### Where to?

The most-tapped surface in the app. Pill search bar at the top, a 2×2 of shortcut tiles (`Home`, `Work`, `Saved`, `Send package`), then a horizontal carousel of suggestions over a faded map preview.

### Ride Selection

Map fills the top half, a sheet lifts from the bottom with options listed vertically — UberX, XL, Black, Pool. Each row is icon + arrival + ETA + right-aligned price. The full-width pill CTA confirms.

### Trip Tracking

Full-screen map, route polyline, driver car icon, pickup and dropoff pins. Bottom card shows driver photo, rating, plate, model, and three action pills: Message (primary), Call, Share Trip.

Dynamic Island · Live Activity

### Your ride lives in the notch.

From the moment you confirm a ride to the moment you arrive, Uber occupies the Dynamic Island with a compact car icon, the ETA, and the plate number. Long-press expands to driver photo, "Call/Message" buttons, and a live mini-map.

Lock screen mirrors the same payload through ActivityKit; the car icon stays on the wallpaper.

`compact: 96 × 28` `expanded: 359 × 160` `poll: 5s` `icon: 24×24pt`
Marcus is on the wayToyota Camry · 7XYZ123
3 min
Compact state · ETA-synced
Set your pickupDrag to adjust
Confirm Pickup
Pin Selection

### Drag the map. The pin stays still.

Uber's pickup-precision moment is one of iOS's most physical UX gestures. The pin is anchored to the screen center; the map slides under it. A black callout above the pin shows the address and updates as the map settles for ~200ms after the last drag.

Each meaningful position change emits a tiny selection haptic — the same one iOS uses on its time-picker wheels.

`settle: 200ms` `haptic: selection` `pin: 32×42pt`
Tip & Rate

### Five black stars. Four pill options.

Post-trip is the only place Uber dedicates a full-screen modal. Big bold stars at the top — black, never gold — then a 4-up tip selector ($1 / $2 / $5 / Other) at full-pill radius. The Done button at the bottom is the same pill.

Rating below 5 stars triggers a follow-up sheet asking what went wrong; categories appear as additional pills.

`star size: 32pt` `tip grid: 4×` `haptic on select`
Rate your trip with Marcus
Help us improve. Your feedback is anonymous.
★★★★★
Add a tip
$1
$2
$5
Other
Submit
Design System Reference

## Black, and the map.

Every Uber token starts at #000. White is the second color. The teal accent shows up so rarely you forget it exists. Maps carry the entire visual hierarchy of the surface.

View Source ↗

### Color

Black is the brand. Every button, every pin, every active state lands at #000. White is the canvas. Teal (Uber's UberX brand color) appears mostly in marketing — almost never in functional iOS surfaces.

Brand
Uber Black
#000000
Hover Black
#1A1A1A
UberX Teal
#1FBAD6
Deep Slate
#142328
Canvas
#ffffff
Ink
Primary
#000000
Soft
#1A1A1A
Muted
#6B6B6B
Dim
#9E9E9E
Disabled
#CFCFCF
Surface & Border
Surface 1
#F6F6F6
Surface 2
#EEEEEE
Card Alt
#FAFAFA
Border
#E2E2E2
Border Strong
#CFCFCF
Map Palette
Map Land
#EDE8DF
Water
#CADDDA
Park
#D4E4D0
Road
#FFFFFF
Route Line
#000000

### Typography

Uber Move — substituted here with Inter. Heavy weights. Display headlines at -0.5px tracking. Action buttons remain sentence case at 700 weight inside the pill — never ALL CAPS in iOS.

Token | Sample | Size | Weight | Tracking
--- | --- | --- | --- | ---
--display | Get there. Get going. | 28 / 1.75rem | 800 | -0.5px
--eta-large | Arriving in 3 min | 22 / 1.38rem | 800 | -0.4px
--ride-row | UberX | 16 / 1.00rem | 700 | normal
--price | $24.50 | 16 / 1.00rem | 800 (tnum) | normal
--body | 5 min away · 4 seats | 14 / 0.88rem | 500 | normal
--button-pill | Choose UberX | 14 / 0.88rem | 700 | normal
--meta | 9:48 AM · 4.2 mi | 12 / 0.75rem | 500 | normal
--plate | 7XYZ123 | 11 / 0.69rem | 700 mono | 0.4px

### Radius

The full-pill (9999px) is Uber's signature — every primary CTA and every search input lives there. Cards land at 12. Sheets at 18. The square corner only appears on map tiles edge-to-edge.

Edge
0px
Hairline
4px
Inset
8px
Card
12px
Map Card
14px
Sheet Top
18px
Pill
9999px
Avatar
50%

### iOS Spec Strip

The constants that anchor the iOS implementation across iPhone 12 mini through iPhone 16 Pro Max.

Pill height
48pt
Primary CTA. Pill stays the same height across screen widths.
Search pill
44pt
Where to? input, with subtle shadow y4 b12 rgba 0/0/0/0.08.
Map tile
edge
Maps bleed to safe-area edges; no padding, no radius.
Pickup pin
14×14pt
Black dot, 3pt white ring. Drop shadow y2 b8.
Sheet handle
36×4pt
Centered, #CFCFCF. The only affordance the sheet exposes.
Tab bar
83pt
4 tabs. Icons 20pt, label 10pt 600.
Side padding
14pt
Tightens to 8pt for ride-row icons, 18pt for trip card.
Ride row
48pt
Hairline divider below. Active state inset 8pt with #F6F6F6.

### Components

Pills carry every CTA. Circles carry every avatar. Map pins are the only "iconography" the brand really commits to.

##### Buttons

Choose UberX Add a stop Schedule for later Cancel

##### Inputs

Cash UberX Reserve

##### Ride Row

🚗
UberX
5 min · 4 seats
$24.50
Choose UberX
View source ↗