iOS Design Spec

# A place to belong,
anywhere.

The Airbnb iOS app, dissected. Photography is the design. The Rausch coral-red appears only on Reserve and on saved hearts. Everything else is white space and a 12px corner.

View Design Tokens Explore Surfaces
9:41
Cliffside villa in Sintra
★ 4.92 (124 reviews) · Superhost · Lisbon, Portugal
Hosted by Inês
Superhost · 5 years hosting
What this place offers
Ocean view
WiFi
Self check-in
Pool
$142 night
May 23 – 28
Reserve
Listing Detail
9:41
Start your searchAnywhere · Any week · Add guests
🏖️Beachfront
🛸OMG!
🌲Cabins
🔥Trending
🌴Tropical
Cliffside villa in Sintra
★ 4.92
2,341 miles away · May 23 – 28
$142 night
Treehouse in Tasmania
★ 4.86
8,420 miles away · Jun 14 – 21
$89 night
Explore
Wishlists
Trips
Inbox
Profile
Explore
9:41
Lisbon, PortugalMay 23 – 28 · 2 guests
$142
$89
$215
$168
$324
List
Treehouse in Tasmania
★ 4.86 · Superhost
$89 night
Explore
Wishlists
Trips
Inbox
Profile
Map View
iOS Surface Anatomy

## Three surfaces. Photography is the system.

Every Airbnb screen earns its position by giving the photograph room to breathe — 12px rounded corners, edge-to-edge, with the coral Reserve button as the only saturated thing in the room.

### Explore

Rounded-pill search bar above a horizontal category scroller (Beachfront, OMG!, Cabins…). Each listing is a 1:1 hero photo at `12px` radius with a heart top-right, then title + dates + price below in three quiet lines.

### Listing Detail

Full-width 4:3 hero carousel + corner-button trio (back, share, save). Title block carries the ★ rating, Superhost badge, and location. Bottom sticky CTA shows price + dates and a `linear-gradient(95deg, #FF5A5F, #FC642D)` Reserve.

### Map View

Full-screen Mapbox tiles with price pins as floating pills — `$142` in white, `$89` in black when selected. A horizontal carousel of listings below synchronizes with the selected pin.

Category Scroller

### The horizontal strip that defined a decade.

Airbnb's category scroller is the single most-copied iOS pattern in travel design. Horizontal scroll, emoji icons over micro-labels, the active one carries a single black underline. Sticks to the top under the search pill when content scrolls.

On iPad, expands to 12 visible categories; on iPhone, scrolls 5 at a time with momentum + light haptic at the boundary.

`icon: 28pt` `label: 10pt 600` `underline: 2pt #222` `haptic: selection`
🏖️Beachfront
🛸OMG!
🌲Cabins
🔥Trending
🌴Tropical
🏰Castles
Image Carousel · Save

### Swipe the photo. Tap the heart.

The two gestures Airbnb optimizes for: horizontal carousel swipe (with snap + momentum) and the heart tap. Tapping the heart triggers a tiny bounce-scale animation and a success haptic; the heart fills to Rausch coral and the listing is added to your most-recent Wishlist.

The dots indicator at the bottom is the only chrome on the photo — no progress bar, no counter text.

`radius: 12pt` `heart: 18pt` `haptic: success` `spring: 0.4 / 0.7`
Map ↔ Carousel Sync

### The pin and the card know each other.

Tap any price pin on the map and the carousel below scrolls to that listing. Swipe the carousel and the pin pulses + flips to the selected (black) state. The two are bound through a single shared index — a model that's become genre-defining for travel apps.

Selected pin uses pure `#000`, never the brand coral, to keep the listing photo as the only saturated thing on the screen.

`selected: #000` `default: #fff` `pin radius: 9999` `card width: 280pt`
$142
$89
$215
$168
Treehouse
$89/night
Cliffside
$142/night
Pin tap → carousel scroll · 280ms easeOut
Design System Reference

## One coral. Everything else, a warm gray.

Airbnb's iOS app owes more to its photography than its tokens. Rausch (#FF5A5F) holds the Reserve button and the heart. Babu (#00A699) shows up in confirmation states. Everything else is ink at #222 over white.

View Source ↗

### Color

Rausch is the most-recognized red in tech outside of YouTube. It lives almost exclusively on the Reserve gradient and the saved heart. Babu (teal) appears only as confirmation. Photography carries every other hue in the app.

Brand
Rausch
#FF5A5F
Gradient End
#FC642D
Reserve Grad
95° gradient
Babu (teal)
#00A699
Rausch Border
#E0484E
Ink
Ink Primary
#222222
Ink Soft
#363636
Muted
#717171
Dim
#B0B0B0
Canvas
#ffffff
Surface & Border
Surface 1
#F7F7F7
Surface 2
#F0F0F0
Card Alt
#FAFAFA
Border
#EBEBEB
Border Strong
#DDDDDD
Semantic
Star Rating
#FFB400
Success
#008A05
Negative
#C13515
Rausch Wash
rgba 10%
Babu Wash
rgba 15%

### Typography

Airbnb Cereal — substituted here with Inter. Display weights stay at 600 (semi-bold) rather than 700 — Airbnb's headlines are gentler than most travel apps. Price is the one place 700 shows up routinely.

Token | Sample | Size | Weight | Tracking
--- | --- | --- | --- | ---
--display | A place to belong, anywhere. | 28 / 1.75rem | 600 | -1.0px
--listing-title | Cliffside villa in Sintra | 24 / 1.50rem | 600 | -0.4px
--card-title | Treehouse in Tasmania | 16 / 1.00rem | 600 | normal
--price | $142 night | 16 / 1.00rem | 700 | normal
--body | 2,341 miles away · May 23 – 28 | 14 / 0.88rem | 400 | normal
--rating | ★ 4.92 (124) | 14 / 0.88rem | 500 | normal
--cta-button | Reserve | 14 / 0.88rem | 600 | normal
--meta | Superhost · 5 years hosting | 12 / 0.75rem | 500 | normal
--map-pin | $142 | 13 / 0.81rem | 700 | normal

### Radius

12px is the signature — every listing card, every photo, every modal. Buttons land at 8. The price pin and the search field carry the only true pills. The Reserve button is intentionally not a pill — it stays at 8px to feel like a button, not a tag.

Edge
0px
Hairline
4px
Inset
6px
Button
8px
Map Card
10px
Card
12px
Sheet
18px
Pin / Search
9999px

### iOS Spec Strip

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

Listing card
12pt
Hero photo radius. Identical on map cards, listing detail hero.
Reserve CTA
8pt
Linear gradient #FF5A5F → #FC642D at 95°. The only color CTA.
Search pill
48pt
Sticks to top edge with 2pt shadow y4 b12 rgba 0/0/0/0.06.
Map pin
9999pt
Default white, selected black. 13pt 700 inside.
Category strip
68pt
Icon 28pt + label 10pt + underline. Sticks under search on scroll.
Tab bar
83pt
5 tabs. Active = Rausch. Icons fill when active, stroke otherwise.
Card gap
24pt
Vertical gap between listing cards in Explore feed.
Heart animation
0.4 / 0.7
Spring damping / response. Followed by success haptic.

### Components

Photos in 12px frames. Reserve gradient. Hearts. The handful of components Airbnb actually owns.

##### Buttons

Reserve Continue Save Show all 14 photos

##### Inputs

Superhost Babu confirm New

##### Listing Card

Cliffside villa in Sintra★ 4.92
2,341 miles away · May 23 – 28
$142 night
View source ↗