The DoorDash iOS app, dissected. White canvas. One brand red that means "go." Live Activity that follows your driver from kitchen to door.
Every DoorDash screen earns its position on an iPhone through the same rules — white feed, full-bleed restaurant hero photos, red CTAs and badges, and a map that follows you out the door.
Location chip top-left ("Lisbon · ASAP ▾"), filter chips below, then 16:9 restaurant cards with rating dot-separator metadata. Heart toggle top-right; DashPass badge top-left. Red banner anchors the top.
Hero photo fills the top quarter with a back-button bubble. Restaurant header carries rating + delivery time + price. "Start Group Order" sits as a pink-tinted CTA pill. Menu sections stack with thumbnails right.
Top half is a map with the driver pin moving along a dashed red route. Bottom half is a 5-step timeline + Dasher contact card with Message/Call ghost-circles.
The moment a Dasher accepts, the Dynamic Island compacts the avatar on the left + ETA on the right. Long-press expands to a full route map. The status text updates from "Preparing" → "Picked up" → "Almost there" in real time without you opening the app.
ETA always uses tabular figures so the count down doesn't jiggle.
ActivityKit: required
island: 240×38pt
eta: tnum
poll: 30s
The DashPass card is the only place DoorDash deploys a gradient — the brand red #FF3008 bleeds into the deeper #D81F00, with a single decorative circle of white overlay. Sits inline in the home feed, in cart, and after every successful order.
CTA inverts to white-on-red to close the loop.
gradient: 135deg
radius: 18pt
cta: white pill
Tap "Start Group Order" inside any restaurant. DoorDash provisions a share URL and opens a participant tray — each person's avatar and their running cart total live in a single sheet. Host can lock the order; submission collapses into a single delivery.
Avatar colors auto-assign from a brand-safe palette (red, amber, slate, sage) — never two reds in a row.
maxParticipants: 50
shareSheet: UIActivityViewController
haptic: success
Every token DoorDash's iOS app reaches for — surface ladder, type ramp, radius scale, components. One brand red carries the whole identity; everything else is white, gray, or food.
White everywhere. Black for type. One brand red, one deeper red for gradient depth, one pink tint for soft surfaces. Confirm green only appears in success states; warning amber only on alerts.
TT Norms in production — Inter as the faithful sans substitute. Weights stay heavy (700 for restaurant names, 800 for hero titles). Price tags lock into tabular figures so dollar signs and decimals align across rows.
| Token | Sample | Size | Weight | Tracking |
|---|---|---|---|---|
| --display | Free delivery on €15+ | 28 / 1.75rem | 900 | -0.6px |
| --restaurant-name | Burger Bar Lisboa | 16 / 1.00rem | 700 | normal |
| --meta-row | ★ 4.8 · (2.1k) · 20–30 min · $$ | 11 / 0.69rem | 500 | normal |
| --price | €12.50 | 14 / 0.88rem | 700 (tnum) | normal |
| --eta | ETA · 12 min | 22 / 1.38rem | 800 (tnum) | -0.3px |
| --button-pill | Add to cart | 14 / 0.88rem | 700 | normal |
| --chip | DashPass | 11 / 0.69rem | 700 | normal |
| --tab-active | Orders | 9 / 0.56rem | 600 | normal |
| --badge | DashPass | 9.5 / 0.59rem | 800 | 0.4px |
Restaurant cards are 14–16px. Photos clip to 8–12px. Buttons are full pills. The driver pin is a circle. The map is full bleed — no radius at all.
The constants that anchor the iOS implementation across iPhone 12 mini through iPhone 16 Pro Max.
Pills, badges, and white restaurant cards — DoorDash's vocabulary is one menu, repeated.