iOS Design Spec

# Food, fast — and a map that moves with it.

The DoorDash iOS app, dissected. White canvas. One brand red that means "go." Live Activity that follows your driver from kitchen to door.

View Design Tokens Explore Surfaces
9:41
Aloha Poke House
★ 4.7(1.2k+)·25–35 min·$$
Start Group Order
Most Popular
Spicy Tuna Bowl
Sushi-grade tuna, sriracha aioli, edamame, sesame.
€12.50
Salmon Yuzu Bowl
Cured salmon, yuzu ponzu, avocado, pickled ginger.
€13.80
Bowls
Build Your Own
Choose base, protein, mix-ins, and sauce.
From €11.00
Home
Search
Grocery
Orders
Account
Restaurant Menu
9:41
Lisbon
· ASAP
Fastest DashPass Top Rated Under €15 Pickup
Free delivery on €15+
DashPass members · today only
DashPass
Burger Bar Lisboa
★ 4.8·(2.1k)·20–30 min·$$
Burgers·American
5% off
Aloha Poke House
★ 4.7·(1.2k)·25–35 min·$$
Poke·Hawaiian
Home
Search
Grocery
Orders
Account
Restaurant Feed
9:41
ETA · 12 min
Aloha Poke House · 2 items
Placed
Confirmed
Preparing
On the way
Delivered
M
Miguel · Your Dasher
★ 4.9 · Toyota Yaris · 12-AB-34
Home
Search
Grocery
Orders
Account
Order Tracking
iOS Surface Anatomy

## Three surfaces. One unmistakable red.

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.

### Home Feed

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.

### Restaurant

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.

### Tracking

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.

Live Activity

### Your driver, pinned to the lock screen.

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`
Miguel · 8 min
Almost at your door
8m
On the way
Driver picked up your order at 9:33 PM
DashPass
$0 delivery
on $15+
★ 5% back on eligible orders ★ No service fees on pickup ★ Cancel anytime
Start free month
DashPass Upsell

### One red gradient sells the whole subscription.

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`
Group Order

### One link, four carts, zero "what do you want?"

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`
Group Order · Aloha Poke
3 friends · ends in 14 min
J
Jiang · host
€14.20
A
Ana
€11.50
M
Marco
€16.80
R
Rita
— browsing
doordash.app/g/xR4-9P Share
Design System Reference

## The whole vocabulary, in one place.

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.

View Source ↗

### Color

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.

Primary Brand
DoorDash Red
#FF3008
Red Deep
#D81F00
Red Soft
#FF7A60
Red Tint
#FFE4E1
Canvas
#FFFFFF
Text
Ink
#191919
Body
#3A3A3A
Muted
#767676
Dim
#A6A6A6
On-Red
#FFFFFF
Surface & Border
Surface 1
#FAFAFA
Surface 2
#F4F4F4
Border
#EAEAEA
Border Soft
#F2F2F2
Map Base
#E9F0EA
Semantic
Confirm
#00B37E
Warning
#FFB020
DashPass
red gradient
Deal Tint
#FFF6E0
Confirm Tint
#E8F8E8

### Typography

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

### Radius

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.

Hairline
2px
Badge
6px
Item
8px
Photo
12px
Card
14px
DashPass
18px
Pill
∞
Pin
50%

### iOS Spec Strip

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

Tab bar height
83pt
5 tabs: Home, Search, Grocery, Orders, Account.
Restaurant card
16:9
Photo aspect-ratio. Heart 30pt circle top-right.
Map height
200pt
Edge-to-edge in tracking. Driver pin 34pt.
Route stroke
3pt dashed
Red dashed line. 6-5 pattern animates.
Timeline steps
5
Placed → Confirmed → Preparing → On way → Delivered.
CTA height
44pt
Full pill. Always brand red except secondary outline.
Live Activity
required
Order tracking enables ActivityKit instantly.
Animation
easeOut
0.3s for sheet present. Spring 0.5s for cart bounce.

### Components

Pills, badges, and white restaurant cards — DoorDash's vocabulary is one menu, repeated.

##### Buttons

Add to cart · €12.50 Save for later Pickup Get DashPass

##### Inputs

DashPass 5% off New

##### Cards

DashPass
Burger Bar Lisboa
★ 4.8 · 20–30 min · $$
DashPass
€0 delivery on €15+
View source ↗