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.
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.
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.
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.
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.
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
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
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
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.
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.
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 |
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.
The constants that anchor the iOS implementation across iPhone 12 mini through iPhone 16 Pro Max.
Pills carry every CTA. Circles carry every avatar. Map pins are the only "iconography" the brand really commits to.