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.
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.
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.
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.
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.
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
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
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
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.
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.
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 |
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.
The constants that anchor the iOS implementation across iPhone 12 mini through iPhone 16 Pro Max.
Photos in 12px frames. Reserve gradient. Hearts. The handful of components Airbnb actually owns.