# Airbnb: brand book and build spec

White page, one red dot: the Rausch Bélo and a search circle are the only color, and everything else is real photos in 16px-radius frames with plain #222222 facts underneath, set in Airbnb’s own Cereal.

From unfairly.ai/brand-guidelines/airbnb, checked 2026-10-29. Unofficial study; not affiliated with Airbnb.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Airbnb gets out of the way of the places. The homepage has no headline and no hero image: a search bar, then rows of real listings. The brand shows up as restraint: a small Bélo, a rare Rausch, one owned typeface, and hosts’ photos doing the selling. Based on: From the Goods Toolkit (“humble and understated”, Bélo kept small), the trademark guidance protecting Rausch, and the homepage, which spends its color only on the logo and search.

## Purpose

Mission: For anyone to belong anywhere (as stated in the Cereal launch story). (published; https://web.archive.org/web/20200107200319/https://airbnb.design/introducing-airbnb-cereal/)

Story: Founded 2007 when two hosts welcomed three guests in San Francisco (newsroom). The Bélo symbol stands for belonging (Goods Toolkit). In 2018 Airbnb introduced its own typeface, Airbnb Cereal, drawn with Dalton Maag to work "from button to billboard". (published)

## Fixed and flexible

Never changes:
- The Bélo, in Rausch, Hof or white
- Airbnb Cereal
- Rounded real photos with facts underneath
- Rausch reserved for the mark and search

The one thing that varies: Rows, places and listings change for every visitor; campaigns bring film, animation and bigger type.

## Positioning

- **Statement**: A community marketplace where hosts offer homes, experiences and services to guests in almost every country (paraphrase of the newsroom boilerplate). (published)
- **Category**: Travel marketplace: Homes, Experiences (labelled Activities in the desktop tabs) and Services. (observed)
- **Audience**: Guests planning a trip and, secondarily, prospective hosts ("Become a host"). (observed)
- **Promise**: Belonging: Cereal’s launch story ties the brand to the mission that anyone can belong anywhere. (published)
- **Differentiators**: Hosts, not hotels: unique stays, experiences and services offered by people; All-in prices shown up front ("Prices include all fees")

## Messaging

Boilerplate (published): Airbnb was born in 2007 when two hosts welcomed three guests to their San Francisco home, and has since grown to millions of hosts in almost every country (paraphrase).

Taglines:
- Belong anywhere (mission line, phrased in the Cereal story as anyone can belong anywhere (2018))

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Homes | Stays in hosts’ homes, browsed by place. |  | observed |
| Experiences | Activities hosted by locals, browsed by type (Cultural tours, Food tours ...). |  | observed |
| Services | Services booked like stays (launched in the 2025 Summer Release). |  | published |
| Hosting | Become a host, with AirCover and Earnings Protection. |  | observed |

They never claim:
- Don’t use “Airbnb” as a stand-in for “short-term rental” (trademark guidelines)
- Prices shown are all-in for the stated nights; never show nightly-only prices

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "Explore experiences nearby" | homepage | https://www.airbnb.com/ |
| "Stay in Wisconsin Dells" | homepage | https://www.airbnb.com/ |
| "Places to stay in St. Louis" | homepage | https://www.airbnb.com/ |
| "Available next month in Gatlinburg" | homepage | https://www.airbnb.com/ |
| "Inspiration for future getaways" | homepage | https://www.airbnb.com/ |
| "Prices include all fees" | homepage | https://www.airbnb.com/ |
| "Introducing Airbnb Cereal" | Airbnb Design | https://web.archive.org/web/20200107200319/https://airbnb.design/introducing-airbnb-cereal/ |
| "Made Possible by Hosts" | newsroom | https://news.airbnb.com/made-possible-by-hosts/ |
| "Airbnb 2026 Summer Release" | newsroom | https://news.airbnb.com/product-releases/ |

## Voice

Tone words: Warm, Plain, Humble.

Traits:
- Welcoming, but not Exclusive (published)
- Humble, but not Loud (published)
- Factual, but not Salesy (observed)
- Human, but not Corporate (published)

- Two voices. The homepage is almost wordless: place-led row titles ("Stay in Wisconsin Dells", "Available next month in Gatlinburg") and listing facts. Campaigns and the newsroom are warmer and story-led, about hosts and belonging.
- A landing page follows the homepage voice: a search bar or a short place-led title, then photos with plain facts under them.

Rules a copy check enforces:
- Sentence case headlines
- Row titles name a place and a reason: Stay in / Places to stay in / Available next month in + city
- Listing copy is a type + place ("Cabin in Gatlinburg"), the all-in price for the nights, and the rating
- The brand is humble and understated; branding stays small
- No internal language that could confuse the public
- Never use “Airbnb” as a generic word for short-term rental

Their words: Become a host, Guest favorite, Prices include all fees, Start your search, Inspiration for future getaways.
Never: Airbnb as a generic noun for any rental, “bnb”, “Air” or “b&b” in partner names.

Tone by reader state, 0 (no personality) to 5 (full) (our recipe): Homepage and product UI 1, Newsroom and campaigns 3. Two voices. The homepage is plain and factual; newsroom and campaigns are warmer and story-led. Levels are our reading.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Rausch | #FF385C | core | Published core color (Pantone 1787 C, CMYK 0,83,57,0); the Bélo and logo. Hex from the site token. |
| Hof | #222222 | core | Published core color (Pantone 2336 C); all primary text on airbnb.com. |
| White | #FFFFFF | core | Published as the third Bélo color; the page ground. |
| Search red | #DA1249 | accent | The search circle and active phone tab (observed token text-brand). |
| Rausch gradient | #E31C5F | accent | Gradient #E61E4D to #E31C5F to #D70466 behind the white Bélo on brand assets (observed). |
| Plus | #92174D | sub-brand | Airbnb Plus / Luxe accent (observed token, not on the homepage). |
| Foggy grey | #6C6C6C | text | Secondary text: prices, placeholders, inactive tabs. |
| Deco | #DDDDDD | line | Search pill border and dividers. |
| Bebe | #EBEBEB | line | Header and tab bar hairlines. |
| Circle grey | #F2F2F2 | surface | Round icon buttons. |
| Faint | #F7F7F7 | surface | Inspiration and footer ground. |

Proportion (observed; Not published as a ratio. Measured share of the airbnb.com homepage at 1440 (2476px capture): about 31% white ground, 44% #F7F7F7 footer band, 24% photography, under 1% Rausch.): White 31%, Faint grey band 44%, Photography 24%, Rausch 1%.

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | Airbnb Cereal | Proprietary to Airbnb (custom typeface made with Dalton Maag, 2018); not an open font | Public Sans | -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif |
| body | Airbnb Cereal | Proprietary to Airbnb | Public Sans | -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Section title (row heading) | --text-section-title-row-heading-* | display | 20px | 18px | 1.2 | -0.18px | 700 |
| Band title (Inspiration for future getaways) | --text-band-title-inspiration-for-future-getaways-* | display | 22px | 22px | 1.18 | -0.44px | 600 |
| Nav tab label | --text-nav-tab-label-* | body | 14px | 14px | 1.29 | 0px | 550 |
| Become a host / footer column head / inspiration city | --text-become-a-host-footer-column-head-inspiration-city-* | body | 14px | 14px | 1.29 | 0px | 600 |
| Search field label (Where / When / Who) | --text-search-field-label-where-when-who-* | body | 12px | 12px | 1.33 | 0px | 600 |
| Search placeholder | --text-search-placeholder-* | body | 14px | 14px | 1.29 | 0px | 400 |
| Card title | --text-card-title-* | body | 13px | 13px | 1.23 | 0px | 600 |
| Card price line | --text-card-price-line-* | body | 12px | 12px | 1.33 | 0px | 400 |
| Experience tile label | --text-experience-tile-label-* | body | 13px | 13px | 1.43 | 0px | 600 |
| Badge (Guest favorite) | --text-badge-guest-favorite-* | body | 11px | 11px | 1.18 | 0px | 700 |
| Footer link / legal | --text-footer-link-legal-* | body | 14px | 14px | 1.29 | 0px | 400 |
| Inspiration subtitle | --text-inspiration-subtitle-* | body | 14px | 14px | 1.29 | 0px | 400 |
| Phone tab bar label | --text-phone-tab-bar-label-* | body | 10px | 10px | 1.2 | 0.2px | 400 |
| Display (campaign, not on the homepage) | --text-display-campaign-not-on-the-homepage-* | display | 48px | 32px | 1.125 | 0px | 700 |

## Layout

Measured on https://www.airbnb.com/: computed styles, CSS custom properties, bounding boxes and pixel samples at 1440 and 390 in headless Chromium, 2026-10-29; images downloaded from their a0.muscache.com originals; fonts calibrated by canvas rendering.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 48px | 24px |
| Section padding | 42px | 42px |
| Container max width | 1344px | full |
| Grid columns | 6 | 2 |
| Gutter | 12px | 12px |
| Navigation height | 201px | 201px |

At every width (observed, 2026-10-29):
| What | 390px | 1440px |
|---|---|---|
| header | search pill 342x56 + chip row; no logo, no tabs bar | 201px header: logo, 4 tabs, host link, circles, 850x66 search pill |
| section title | 18/24 | 20/24 |
| side margin | 24px | 48px |
| listing card | 165 wide, image 157 tall, radius 20, 2 + peek | 182 wide, image 173 tall, radius 16, 7 per row |
| experience tile | 107x102 | 125x119 |
| listing rows | 8 rows in the reference | 3 rows in the reference |
| carousel arrows | hidden; 32px arrow circle right-aligned | Previous/Next 28px circles right; arrow circle beside the title |
| navigation | fixed bottom tab bar: Explore, Wishlists, Log in | Become a host, profile and menu circles in the header |
| footer | one column with hairlines | three columns |

Breakpoints from Airbnb's CSS: 744, 950, 1128, 1440px.

Homepage bands, top to bottom (observed):
1. Header (logo, category tabs, search)
   - Desktop: y 0-201; ground linear-gradient(#FFFFFF 39.9%, #F8F8F8 100%); 1px #EBEBEB line at y 200. Row 1 (y 0-96): logo x 48 y 32, tabs centered, host link + 2 circles right. Row 2: search pill x 295-1145, y 102-168
   - Phone: y 0-136: no logo. Search pill 342x56 at x 24, y 12; chip row y 84-124 scrolling sideways
   - Logo: airbnb-lockup-rausch.svg 102x32
   - Tabs: All (active, underline), Homes, Activities, Services, each with its 3D icon
   - Search pill: Where / When / Who and a #DA1249 circle
2. Explore experiences nearby
   - Desktop: title y 235-259 at x 50; tiles 125x119 at y 279, pitch 135.5 from x 48; labels y 406-427
   - Phone: title y 155-179 at x 26 (18px); 32px arrow circle x 336; tiles 107x102 at y 200, pitch 117.5 from x 24; labels y 310
   - 11 tiles: Cultural tours, Food tours, Landmarks, Museums, Art workshops, Outdoors, Wellness, Galleries, Cooking, Architecture, Performances
   - Only 10 fit at 1440; the 11th sits past the right edge (row scrolls)
3. Stay in Wisconsin Dells
   - Desktop: title y 473-497; cards y 515-688 (image), title y 695, price y 713
   - Phone: title y 361; cards y 403 (image 157), text below
   - card 1: "Condo in Wisconsin Dells" / "$920 for 2 nights · ★ 4.98" / Guest favorite badge
   - card 2: "Home in Wisconsin Dells" / "$1,484 for 2 nights · ★ 5.0" / Guest favorite badge
   - card 3: "Home in Wisconsin Dells" / "$640 for 2 nights · ★ 4.86" / Guest favorite badge
   - card 4: "Cabin in Wisconsin Dells" / "$621 for 2 nights · ★ 5.0" / Guest favorite badge
   - card 5: "Farm stay in Wisconsin Dells" / "$1,950 for 2 nights · ★ 4.98" / Guest favorite badge
   - card 6: "Room in Wisconsin Dells" / "$354 for 2 nights · ★ 4.96" / Guest favorite badge
   - card 7: "Home in Wisconsin Dells" / "$1,485 for 2 nights · ★ 4.97" / Guest favorite badge
4. Places to stay in St. Louis
   - Desktop: title y 771-795; cards y 813-986 (image), title y 993, price y 1011
   - Phone: title y 643; cards y 685 (image 157), text below
   - card 1: "Apartment in St. Louis" / "$300 for 2 nights · ★ 4.92" / Guest favorite badge
   - card 2: "Home in St. Louis" / "$550 for 2 nights · ★ 5.0" / Guest favorite badge
   - card 3: "Apartment in St. Louis" / "$431 for 2 nights · ★ 4.95" / Guest favorite badge
   - card 4: "Home in St. Louis" / "$373 for 2 nights · ★ 4.82" / Guest favorite badge
   - card 5: "Home in University City" / "$383 for 2 nights · ★ 4.8" / no badge
   - card 6: "Home in St. Louis" / "$641 for 2 nights · ★ 4.92" / no badge
   - card 7: "Home in St. Louis" / "$362 for 2 nights · ★ 4.94" / Guest favorite badge
5. Available next month in Gatlinburg
   - Desktop: title y 1069-1093; cards y 1111-1284 (image), title y 1291, price y 1309
   - Phone: title y 910; cards y 952 (image 157), text below
   - card 1: "Home in Gatlinburg" / "$1,275 for 2 nights · ★ 4.95" / Guest favorite badge
   - card 2: "Condo in Gatlinburg" / "$558 for 2 nights · ★ 5.0" / no badge
   - card 3: "Cabin in Gatlinburg" / "$1,534 for 2 nights · ★ 4.95" / Guest favorite badge
   - card 4: "Chalet in Gatlinburg" / "$862 for 2 nights · ★ 4.91" / Guest favorite badge
   - card 5: "Cabin in Gatlinburg" / "$520 for 2 nights · ★ 5.0" / no badge
   - card 6: "Cabin in Sevierville" / "$705 for 2 nights · ★ 5.0" / Guest favorite badge
   - card 7: "Cabin in Gatlinburg" / "$1,004 for 2 nights · ★ 4.97" / Guest favorite badge
6. Stay in Indianapolis (phone only)
   - Desktop: not rendered in the 1440 reference capture (display:none at >= 744px)
   - Phone: title y 1177; same card anatomy
   - card 1: "Home in Indianapolis" / "$769 for 2 nights · ★ 5.0" / Guest favorite badge
   - card 2: "Home in Indianapolis" / "$435 for 2 nights · ★ 5.0" / Guest favorite badge
   - card 3: "Apartment in Downtown Indianapolis" / "$314 for 2 nights · ★ 4.88" / Guest favorite badge
7. Homes in Orlando (phone only)
   - Desktop: not rendered in the 1440 reference capture (display:none at >= 744px)
   - Phone: title y 1460; same card anatomy
   - card 1: "Home in Kissimmee" / "$485 for 2 nights · ★ 5.0" / no badge
   - card 2: "Home in Kissimmee" / "$609 for 2 nights · ★ 4.9" / Guest favorite badge
   - card 3: "Home in Kissimmee" / "$2,895 for 2 nights · ★ 5.0" / Guest favorite badge
8. Popular homes in New Orleans (phone only)
   - Desktop: not rendered in the 1440 reference capture (display:none at >= 744px)
   - Phone: title y 1726; same card anatomy
   - card 1: "Hotel St. Marie" / "$418 for 2 nights · ★ 4.9" / no badge
   - card 2: "Place D'Armes" / "$498 for 2 nights · ★ 4.81" / no badge
   - card 3: "French Market Inn" / "$378 for 2 nights · ★ 4.84" / no badge
9. Popular homes in Chicago (phone only)
   - Desktop: not rendered in the 1440 reference capture (display:none at >= 744px)
   - Phone: title y 2009; same card anatomy
   - card 1: "Home in Forest Park" / "$264 for 2 nights · ★ 4.83" / Guest favorite badge
   - card 2: "Apartment in Chicago" / "$290 for 2 nights · ★ 4.99" / Guest favorite badge
   - card 3: "Home in Chicago" / "$1,274 for 2 nights · ★ 4.88" / Guest favorite badge
10. Check out homes in Houston (phone only)
   - Desktop: not rendered in the 1440 reference capture (display:none at >= 744px)
   - Phone: title y 2276; same card anatomy
   - card 1: "Guesthouse in Houston" / "$229 for 2 nights · ★ 4.94" / Guest favorite badge
   - card 2: "Home in Houston" / "$184 for 2 nights · ★ 5.0" / no badge
   - card 3: "Home in Spring" / "$1,002 for 2 nights · ★ 5.0" / Guest favorite badge
11. Inspiration for future getaways
   - Desktop: band top 39px below the last price line (y 1364); title at band + 48 (y 1412); tab labels title + 45; hairline title + 73; grid rows title + 107, + 167, + 227
   - Phone: band top 47px below the last price line (y 2566); title at band + 46; tabs title + 47; hairline title + 76; grid from title + 107
   - Tabs: Popular, Arts & culture, Beach, Mountains, Outdoors, Things to do, Travel tips & inspiration, Airbnb-friendly apartments
   - Grid 6 columns x 3 rows at 1440 (225px pitch, x 48 / 273 / 499 / 724 / 949 / 1175), 60px row pitch: city 14/18 600 #222222 over type 14/18 #6C6C6C; last cell "Show more" with chevron-down.svg
12. Footer
   - Desktop: same #F7F7F7 ground continues; column heads at Inspiration title + 359; divider title + 892; legal row title + 924; band ends title + 1051, then an 89px white strip ends the page
   - Phone: single column; see page.footer
   - Support / Hosting / Airbnb columns
   - Legal row with language, currency and three social icons

## Page anatomy

How Airbnb's own landing pages are built, part by part (observed; https://www.airbnb.com/, 2026-10-29). A homepage pattern, not a brand law: follow it for landing pages.

**Navigation**
- summary: A white two-row header: logo left, four illustrated category tabs centered, Become a host + two grey circles right; the search pill below. It is the hero.
- ground: linear-gradient(to bottom, #FFFFFF 39.9%, #F8F8F8 100%), 1px #EBEBEB bottom border at y 200, sticky at the top
- height: 201px at 1440 (row 1 is 96px, then the search row); on phones the search pill and chips take y 0-136 on white and scroll away
- border: 1px solid #EBEBEB at the bottom
- sticky: yes (position sticky, top 0) on desktop
- logo: airbnb-lockup-rausch.svg (Bélo + wordmark, #FF385C) 102x32 at x 48, y 32. Not shown on phones
- links: 4 tabs centered as a group (x 478-962): "All" (active), "Homes", "Activities", "Services". Icons are tab-all-globe-trim / tab-homes-house-trim / tab-activities-balloon-trim / tab-services-bell-trim (transparent PNGs) fitted into these exact boxes: globe 31x39 at (478, 28), house 42x36 at (584, 28), balloon 26x37 at (722, 30), bell 40x29 at (859, 34). Labels 14/18 Public Sans 550 at y 39: x 522 / 636 / 761 / 907. Active label #222222 with a 2px #222222 underline from x 478 to 544 at y 74; inactive #6C6C6C
- actions: "Become a host" text button 121x40 at x 1167, y 28 (14/18 600 #222222, radius 20); profile circle 40x40 #F2F2F2 at x 1300 with profile.svg 20px; menu circle 40x40 #F2F2F2 at x 1352 with menu.svg 16px (ends x 1392)
- phone: No logo and no top bar; the top of the page is plain white with no border and nothing sticky except the bottom tab bar. Search pill 342x56 at x 24, y 12 ("Start your search", centered with a 14px magnifier). Chip row y 84-124: chips "All" (selected, x 24, 70 wide), "Homes" (x 102, 100), "Experiences" (x 211, 131), "Services" (x 350, clipped by the screen edge). A fixed bottom tab bar replaces the menu: Explore / Wishlists / Log in
- menu labels:
  - All
  - Homes
  - Activities
  - Services
- phone chips:
  - All
  - Homes
  - Experiences
  - Services
- utility labels:
  - Become a host

**Hero**
- summary: There is no headline hero: the header search pill is the hero, and the first content row (experience tiles) starts 34px under the header line.
- desktop: Search pill x 295-1145 (850 wide, centered), y 102-168 (66 tall), radius 100px, white, 1px #DDDDDD border, shadow 0 0 0 1px rgba(0,0,0,0.02), 0 8px 24px rgba(0,0,0,0.1). Segments: "Where" label x 327 y 117 over "Search destinations" y 135; divider x 575; "When" x 602 over "Add dates"; divider x 864; "Who" x 891 over "Add guests"; search circle 48px #DA1249 at x 1087, y 111 with a 16px white magnifier
- phone: Search pill 342x56 at x 24, y 12, radius 40, 1px #DDDDDD, shadow 0 6px 20px rgba(0,0,0,0.1); then the chip row
- at rest: Tab icons are short videos that play once when a tab is selected; at rest each shows its still 3D object (supplied PNGs). The desktop fold also shows the "Prices include all fees" toast (see components.toast).
- media: tab icons only
- type: no H1 (the h1 "Airbnb homepage" is visually hidden)
- cta: the #DA1249 search circle
- proof: none in the header

**Explore experiences nearby**
- summary: Carousel of 11 rounded photo tiles with labels
- ground: #FFFFFF
- desktop: Title row: "Explore experiences nearby" 20/24 at x 50, y 235; 28px #F2F2F2 arrow circle at x 314 (4px after the title text); Previous (disabled) / Next circles at x 1332 / 1364, y 233. Tiles 125x119, radius 16, at y 279, x 48 + 135.5n: exactly 10 visible, the last ending at x 1392. The row is clipped at the content column (overflow hidden at x 1392): the 11th tile, Performances, exists but is NOT visible at rest, and nothing shows in the right 48px margin. Labels 13/18.6 600 #222222 at y 406, left-aligned to the tile
- phone: Title 18/24 at x 26, y 155; 32px arrow circle right edge x 368, y 151. Tiles 107x102, radius 16, at y 200, x 24 + 117.5n (3 visible, the 4th peeks from x 376 to the screen edge; phone rows clip at the screen edge). Labels at y 310. No carousel arrows
- anatomy:
  - Tile order and images (files are exp-*.png): Cultural tours (exp-cultural-tours.png), Food tours (exp-food-tours.png), Landmarks (exp-landmarks.png), Museums (exp-museums.png), Art workshops (exp-art-workshops.png), Outdoors (exp-outdoors.png), Wellness (exp-wellness.png), Galleries (exp-galleries.png), Cooking (exp-cooking.png), Architecture (exp-architecture.png), Performances (exp-performances.png)
  - Photos are square crops of a single activity, full-bleed in the tile, no overlay text
- components: experience_tile, section_arrow, carousel_arrows

**Stay in Wisconsin Dells**
- summary: 7 listing cards in one row (desktop); 2 + peek on phones
- ground: #FFFFFF
- desktop: Title 20/24 at x 50, y 473; arrow circle 6px after it; carousel arrows right. Cards at y 515: image 182x173 radius 16, x 48 / 242 / 435 / 629 / 823 / 1017 / 1210 (fluid: 7 cards fill 1344 with 12px gaps, about 181.7 wide; last card ends at 1392; rows clip at x 1392, nothing in the right margin). Title 13/16 600 at x+4, y 695; price line 12/16 at y 713
- phone: Title 18/24 at x 26, y 361 (absolute, from the reference); 32px arrow circle right edge x 368. Cards 165 wide, image 165x157 radius 20, at y 403, x 24 / 201 / 378 (third peeks 12px to the screen edge). Title 13/16 at image bottom + 7, price 16px below it
- anatomy:
  - card 1: "Condo in Wisconsin Dells" / "$920 for 2 nights · ★ 4.98" / Guest favorite badge
  - card 2: "Home in Wisconsin Dells" / "$1,484 for 2 nights · ★ 5.0" / Guest favorite badge
  - card 3: "Home in Wisconsin Dells" / "$640 for 2 nights · ★ 4.86" / Guest favorite badge
  - card 4: "Cabin in Wisconsin Dells" / "$621 for 2 nights · ★ 5.0" / Guest favorite badge
  - card 5: "Farm stay in Wisconsin Dells" / "$1,950 for 2 nights · ★ 4.98" / Guest favorite badge
  - card 6: "Room in Wisconsin Dells" / "$354 for 2 nights · ★ 4.96" / Guest favorite badge
  - card 7: "Home in Wisconsin Dells" / "$1,485 for 2 nights · ★ 4.97" / Guest favorite badge
  - Images: wisconsin-dells-1.jpg ... wisconsin-dells-7.jpg in card order
  - Every card: heart (heart.svg) top-right; "Guest favorite" badge top-left only where listed
- components: listing_card, badge, section_arrow, carousel_arrows

**Places to stay in St. Louis**
- summary: 7 listing cards in one row (desktop); 2 + peek on phones
- ground: #FFFFFF
- desktop: Title 20/24 at x 50, y 771; arrow circle 6px after it; carousel arrows right. Cards at y 813: image 182x173 radius 16, x 48 / 242 / 435 / 629 / 823 / 1017 / 1210 (fluid: 7 cards fill 1344 with 12px gaps, about 181.7 wide; last card ends at 1392; rows clip at x 1392, nothing in the right margin). Title 13/16 600 at x+4, y 993; price line 12/16 at y 1011
- phone: Title 18/24 at x 26, y 643 (absolute, from the reference); 32px arrow circle right edge x 368. Cards 165 wide, image 165x157 radius 20, at y 685, x 24 / 201 / 378 (third peeks 12px to the screen edge). Title 13/16 at image bottom + 7, price 16px below it
- anatomy:
  - card 1: "Apartment in St. Louis" / "$300 for 2 nights · ★ 4.92" / Guest favorite badge
  - card 2: "Home in St. Louis" / "$550 for 2 nights · ★ 5.0" / Guest favorite badge
  - card 3: "Apartment in St. Louis" / "$431 for 2 nights · ★ 4.95" / Guest favorite badge
  - card 4: "Home in St. Louis" / "$373 for 2 nights · ★ 4.82" / Guest favorite badge
  - card 5: "Home in University City" / "$383 for 2 nights · ★ 4.8" / no badge
  - card 6: "Home in St. Louis" / "$641 for 2 nights · ★ 4.92" / no badge
  - card 7: "Home in St. Louis" / "$362 for 2 nights · ★ 4.94" / Guest favorite badge
  - Images: st-louis-1.jpg ... st-louis-7.jpg in card order
  - Every card: heart (heart.svg) top-right; "Guest favorite" badge top-left only where listed
- components: listing_card, badge, section_arrow, carousel_arrows

**Available next month in Gatlinburg**
- summary: 7 listing cards in one row (desktop); 2 + peek on phones
- ground: #FFFFFF
- desktop: Title 20/24 at x 50, y 1069; arrow circle 6px after it; carousel arrows right. Cards at y 1111: image 182x173 radius 16, x 48 / 242 / 435 / 629 / 823 / 1017 / 1210 (fluid: 7 cards fill 1344 with 12px gaps, about 181.7 wide; last card ends at 1392; rows clip at x 1392, nothing in the right margin). Title 13/16 600 at x+4, y 1291; price line 12/16 at y 1309
- phone: Title 18/24 at x 26, y 910 (absolute, from the reference); 32px arrow circle right edge x 368. Cards 165 wide, image 165x157 radius 20, at y 952, x 24 / 201 / 378 (third peeks 12px to the screen edge). Title 13/16 at image bottom + 7, price 16px below it
- anatomy:
  - card 1: "Home in Gatlinburg" / "$1,275 for 2 nights · ★ 4.95" / Guest favorite badge
  - card 2: "Condo in Gatlinburg" / "$558 for 2 nights · ★ 5.0" / no badge
  - card 3: "Cabin in Gatlinburg" / "$1,534 for 2 nights · ★ 4.95" / Guest favorite badge
  - card 4: "Chalet in Gatlinburg" / "$862 for 2 nights · ★ 4.91" / Guest favorite badge
  - card 5: "Cabin in Gatlinburg" / "$520 for 2 nights · ★ 5.0" / no badge
  - card 6: "Cabin in Sevierville" / "$705 for 2 nights · ★ 5.0" / Guest favorite badge
  - card 7: "Cabin in Gatlinburg" / "$1,004 for 2 nights · ★ 4.97" / Guest favorite badge
  - Images: gatlinburg-1.jpg ... gatlinburg-7.jpg in card order
  - Every card: heart (heart.svg) top-right; "Guest favorite" badge top-left only where listed
- components: listing_card, badge, section_arrow, carousel_arrows

**Stay in Indianapolis (phone only)**
- summary: Extra listing rows the phone reference shows below the first three
- ground: #FFFFFF
- desktop: hidden at 1440 (the desktop reference capture stops after three listing rows): display none at >= 744px
- phone: Title 18/24 at x 26, y 1177 (absolute, from the reference); cards at y 1219; same card anatomy as the rows above; cards 1 and 2 visible, card 3 peeks
- anatomy:
  - card 1: "Home in Indianapolis" / "$769 for 2 nights · ★ 5.0" / Guest favorite badge
  - card 2: "Home in Indianapolis" / "$435 for 2 nights · ★ 5.0" / Guest favorite badge
  - card 3: "Apartment in Downtown Indianapolis" / "$314 for 2 nights · ★ 4.88" / Guest favorite badge
  - Images in order: indianapolis-2.jpg, indianapolis-3.jpg, indianapolis-1.jpg
- components: listing_card, badge

**Homes in Orlando (phone only)**
- summary: Extra listing rows the phone reference shows below the first three
- ground: #FFFFFF
- desktop: hidden at 1440 (the desktop reference capture stops after three listing rows): display none at >= 744px
- phone: Title 18/24 at x 26, y 1460 (absolute, from the reference); cards at y 1502; same card anatomy as the rows above; cards 1 and 2 visible, card 3 peeks
- anatomy:
  - card 1: "Home in Kissimmee" / "$485 for 2 nights · ★ 5.0" / no badge
  - card 2: "Home in Kissimmee" / "$609 for 2 nights · ★ 4.9" / Guest favorite badge
  - card 3: "Home in Kissimmee" / "$2,895 for 2 nights · ★ 5.0" / Guest favorite badge
  - Images in order: orlando-1.jpg, orlando-2.jpg, orlando-3.jpg
- components: listing_card, badge

**Popular homes in New Orleans (phone only)**
- summary: Extra listing rows the phone reference shows below the first three
- ground: #FFFFFF
- desktop: hidden at 1440 (the desktop reference capture stops after three listing rows): display none at >= 744px
- phone: Title 18/24 at x 26, y 1726 (absolute, from the reference); cards at y 1768; same card anatomy as the rows above; cards 1 and 2 visible, card 3 peeks
- anatomy:
  - card 1: "Hotel St. Marie" / "$418 for 2 nights · ★ 4.9" / no badge
  - card 2: "Place D'Armes" / "$498 for 2 nights · ★ 4.81" / no badge
  - card 3: "French Market Inn" / "$378 for 2 nights · ★ 4.84" / no badge
  - Images in order: new-orleans-1.jpg, new-orleans-2.jpg, new-orleans-3.jpg
- components: listing_card, badge

**Popular homes in Chicago (phone only)**
- summary: Extra listing rows the phone reference shows below the first three
- ground: #FFFFFF
- desktop: hidden at 1440 (the desktop reference capture stops after three listing rows): display none at >= 744px
- phone: Title 18/24 at x 26, y 2009 (absolute, from the reference); cards at y 2051; same card anatomy as the rows above; cards 1 and 2 visible, card 3 peeks
- anatomy:
  - card 1: "Home in Forest Park" / "$264 for 2 nights · ★ 4.83" / Guest favorite badge
  - card 2: "Apartment in Chicago" / "$290 for 2 nights · ★ 4.99" / Guest favorite badge
  - card 3: "Home in Chicago" / "$1,274 for 2 nights · ★ 4.88" / Guest favorite badge
  - Images in order: chicago-1.jpg, chicago-2.jpg, chicago-3.jpg
- components: listing_card, badge

**Check out homes in Houston (phone only)**
- summary: Extra listing rows the phone reference shows below the first three
- ground: #FFFFFF
- desktop: hidden at 1440 (the desktop reference capture stops after three listing rows): display none at >= 744px
- phone: Title 18/24 at x 26, y 2276 (absolute, from the reference); cards at y 2318; same card anatomy as the rows above; cards 1 and 2 visible, card 3 peeks
- anatomy:
  - card 1: "Guesthouse in Houston" / "$229 for 2 nights · ★ 4.94" / Guest favorite badge
  - card 2: "Home in Houston" / "$184 for 2 nights · ★ 5.0" / no badge
  - card 3: "Home in Spring" / "$1,002 for 2 nights · ★ 5.0" / Guest favorite badge
  - Images in order: houston-1.jpg, houston-2.jpg, houston-3.jpg
- components: listing_card, badge

**Inspiration for future getaways**
- summary: Grey band of SEO destination links under tabs
- ground: #F7F7F7
- desktop: Band (full-bleed #F7F7F7) starts 39px below the last price line (y 1364). Title "Inspiration for future getaways" 22/26 600 (-0.44px) at x 48, band top + 48 (y 1412). Tab labels at title + 45: Popular / Arts & culture / Beach / Mountains / Outdoors / Things to do / Travel tips & inspiration / Airbnb-friendly apartments (14/18 600, labels 32px apart from x 48; "Popular" #222222 with a 2px #222222 underline at title + 71, others #6C6C6C); 1px #EBEBEB hairline across x 48-1392 at title + 73. Grid starts title + 107: 6 columns at x 48 / 273 / 499 / 724 / 949 / 1175, 3 rows 60px apart; each cell city 14/18 600 #222222 over type 14/18 400 #6C6C6C. Cell 18 is "Show more" + chevron-down.svg 12px
- phone: Band top 47px below the last price line (y 2566). Title 22/26 at x 24, band top + 46. Tab labels at title + 47, scrolling sideways (labels 32px apart from x 24), with a white 32px circle chevron button at the right edge; 1px #DDDDDD hairline at title + 76. 2-column grid (x 24 / 199, 167 wide) from title + 107, 60px row pitch: Tokyo, Gulf Shores, London, St. Petersburg, Wilmington, Key West, San Jose, then "Show more"
- anatomy:
  - Cells in order: Tokyo / Apartment rentals; Gulf Shores / Villa rentals; London / Condo rentals; St. Petersburg / Vacation rentals; Wilmington / Villa rentals; Key West / Cottage rentals; San Jose / Villa rentals; Tampa / Cottage rentals; Charlotte / Vacation rentals; Dublin / Cabin rentals; Richmond / Condo rentals; West Palm Beach / House rentals; Florida Keys / Vacation rentals; Nashville / House rentals; Osaka / Apartment rentals; Sarasota / Villa rentals; Branson / Cabin rentals
- components: tab_underline_inspiration

**Footer**
- summary: Same #F7F7F7 ground as Inspiration: three link columns, then a legal row
- ground: #F7F7F7 (continues from Inspiration with no line between). At 1440 the grey band ends title + 1051 (127px below the legal row top) and the page ends with an 89px plain white strip below it
- anatomy:
  - Column heads at Inspiration title + 359: x 48 / 501 / 955 (three 437px columns, 16px gutters), 14/18 600 #222222
  - Links 14/18 400 #222222 from head + 35, 36px pitch
  - Support: Help Center, Get help with a safety issue, AirCover, Travel insurance, Anti-discrimination, Disability support, Cancellation options, Report neighborhood concern
  - Hosting: Airbnb your home, Airbnb your hotel, Airbnb your experience, Airbnb your service, AirCover for Hosts, Earnings Protection, Hosting resources, Community forum, Hosting responsibly, Airbnb-friendly apartments, Join a free hosting class, Find a co‑host, Refer a host
  - Airbnb: 2026 Summer Release, Newsroom, Careers, Investors, Gift cards, Airbnb.org emergency stays
  - 1px #EBEBEB divider across x 48-1392 at Inspiration title + 892 (32px above the legal row)
  - Legal row at Inspiration title + 924: left "© 2026 Airbnb, Inc." · "Privacy" · "Terms" · "Your Privacy Choices" (with privacy-choices.svg toggle icon 26x12 after it), 14/18 #222222, dots are 19px-wide " · " spans. Right, ending x 1392: globe.svg 16px + "English (US)" 14/18 600, "$ USD" 14/18 600, then facebook.svg, x.svg, instagram.svg 18px, 24px apart
- phone: Single column at x 24 on #F7F7F7. Support head at Inspiration title + 395; each head 14/18 600, links 14/18 from head + 35 at 36px pitch; between sections a 1px #DDDDDD line 24px below the last link, next head 25px below the line. Then, 74px below the top of the last Airbnb link: globe.svg + "English (US)" and "$ USD" on one line (14/18 600); social icons (facebook, x, instagram, 18px, 24px apart) 36px below; "© 2026 Airbnb, Inc." 77px below the language line; "Privacy · Terms · Your Privacy Choices" 23px below that; then 90px of grey before the page ends. The fixed tab bar overlays the bottom 65px of the viewport

**On dark grounds**
- secondary button: not used on airbnb.com homepage
- link: #FFFFFF
- muted text: #C1C1C1 (--palette-text-secondary-inverse)
- hairline: #3F3F3F
- logo variant: white Bélo (newsroom: white Bélo on the Rausch gradient)

## Components

- **button primary** (observed): fill #DA1249, text #FFFFFF, radius pill, height 48, padding x 10, font size 14, weight 600, use The one filled action on the homepage: the search button. At rest it is a 48px circle (10px inner padding around a 16px white magnifier); no labelled filled button appears on the resting homepage, date 2026-10-29
- **button secondary** (observed): fill none, text #222222, radius 20, height 40, padding x 12, font size 14, weight 600, use Text button with no fill at rest, #F7F7F7 fill on hover: Become a host, date 2026-10-29
  - hover (observed): background-color #F7F7F7
- **search pill desktop** (observed): fill #FFFFFF, border 1px solid #DDDDDD, radius 999, width 850, height 66, shadow 0 0 0 1px rgba(0,0,0,0.02), 0 8px 24px rgba(0,0,0,0.1), use The hero: x 295-1145, y 102-168 at 1440. Three segments: Where (label x 327) | When (x 602) | Who (x 891), each a 12/16 600 label over a 14/18 #6C6C6C placeholder (label y 117, placeholder y 135). 1px #DDDDDD dividers 32px tall at x 575 and x 864, vertically centered. Search button inside on the right, date 2026-10-29
- **search button** (observed): fill #DA1249, text #FFFFFF, radius 999, height 48, width 48, padding x 0, font size 14, weight 600, use 48px circle at x 1087, y 111 (8px inside the pill right end); white 16px magnifier (search.svg, stroke 4), date 2026-10-29
- **search pill phone** (observed): fill #FFFFFF, border 1px solid #DDDDDD, radius 40, width 342, height 56, shadow 0 6px 20px rgba(0,0,0,0.1), use x 24, y 12. Centered: search.svg 14px #222222 + 8px + "Start your search" 14/18 600 #222222 (search-ink.svg is the #222222 magnifier), date 2026-10-29
- **nav tab desktop** (observed): text #6C6C6C, active text #222222, font size 14, weight 550, use Each tab: a trimmed 3D icon (tab-*-trim.png, transparent) drawn into an exact box, then the label. Icon boxes (object-fit contain): All globe 31x39 at x 478, y 28; Homes house 42x36 at x 584, y 28; Activities balloon 26x37 at x 722, y 30; Services bell 40x29 at x 859, y 34. Labels 14/18 at y 39: All x 522, Homes x 636, Activities x 761, Services x 907. The active tab gets a 2px #222222 underline from the icon left to the label right (x 478-544, y 74-76), date 2026-10-29
- **chip phone** (observed): fill #FFFFFF, text #222222, radius 999, height 40, font size 14, weight 400, use Category chips under the phone search: icon 28px + 6px + label. Unselected: white, 1px rgba(0,0,0,0.08) border, 0 2px 4px rgba(0,0,0,0.12) drop shadow. Selected (All): #F2F2F2 fill with an inset 0 1px 3px rgba(0,0,0,0.12) shadow. Fixed widths (flex: none): All 70, Homes 100, Experiences 131, Services 120 (clipped); x 24 / 102 / 211 / 350; y 84-124. Icons: the trimmed tab PNGs fitted in 28x28, date 2026-10-29
- **host link** (observed): fill transparent, text #222222, radius 20, height 40, padding x 12, font size 14, weight 600, use "Become a host" 121x40 at x 1167, y 28 (text x 1179). Hover fill #F7F7F7
  - hover (observed): background-color #F7F7F7
- **icon circle** (observed): fill #F2F2F2, text #222222, radius 999, height 40, width 40, use Profile (profile.svg 20px) at x 1300 and menu (menu.svg 16px, three 3px-stroke lines) at x 1352, y 28; 12px apart, date 2026-10-29
- **section arrow** (observed): fill #F2F2F2, text #222222, radius 999, height 28, width 28, use Desktop: a 28px circle with arrow-right.svg 12px, 4px after the end of the section title text, vertically centered on it (x 314 for Explore experiences nearby). Phone: a 32px circle whose right edge is x 368 (22px from the screen edge), centered on the title line, date 2026-10-29
- **carousel arrows** (observed): fill #F2F2F2, text #222222, radius 999, height 28, width 28, use Desktop only, right end of each row heading: Previous at x 1332 (disabled at rest: chevron #C1C1C1 on a paler #F8F8F8 fill), Next at x 1364 (chevron #222222). 12px chevrons. Hidden on phones, date 2026-10-29
- **listing card** (observed): radius 16, use Image 182x173 desktop / 165x157 phone, radius 16 desktop and 20 phone, object-fit cover. Guest favorite badge 12px from the top-left; heart.svg 24px (rgba(0,0,0,0.5) fill, 2px white stroke) centered in a 32x32 button whose top-right corner is 8px in from the image corner (icon center 24px from the top and right edges). object-fit cover, object-position center. Below the image, text starts 4px in from the card left and runs to the card right edge (178px wide desktop, 161 phone): title 13/16 at image bottom + 7px (wraps to 2 lines if needed, never ellipsized at these widths), price line 16px below the title. A row reserves the height of its tallest card text, date 2026-10-29
- **badge** (observed): fill rgba(255,255,255,0.8), text #222222, radius 14, height 26, width 97, border 1px solid rgba(255,255,255,0.5), shadow 0 0 0 1px rgba(0,0,0,0.02), 0 2px 6px rgba(0,0,0,0.04), 0 4px 8px rgba(0,0,0,0.1), font size 11, weight 700, use "Guest favorite" pill at x+12, y+12 on listing images, date 2026-10-29
- **experience tile** (observed): radius 16, use Square-ish photo tile 125x119 desktop / 107x102 phone, radius 16, no border; label 13px under it at +8px, date 2026-10-29
- **toast** (observed): fill #FFFFFF, text #222222, radius 12, height 58, width 218, shadow 0 2px 10px rgba(0,0,0,0.08), border 1px solid #DDDDDD, font size 14, weight 600, use "Prices include all fees": a crisp 1px #DDDDDD outline with only a faint soft shadow. price-tag.svg (pink tag) 28px, its left edge at x+14, vertically centered; label 14/18 at x+53. Desktop only at rest: position fixed, centered horizontally (x 611-828), bottom 81px of the 900px viewport (y 762-819), date 2026-10-29
- **tab underline inspiration** (observed): use Inspiration tabs: 14/18 600, active #222222, inactive #6C6C6C. Each tab has 16px horizontal padding, so labels sit 32px apart, the first label at x 48 (the first tab box starts at x 32). Label top at title + 45. The active tab has a 2px #222222 underline at title + 71-72 spanning its label; a 1px #EBEBEB hairline runs x 48-1392 at title + 73 (10px under the labels), date 2026-10-29
- **phone tab bar** (observed): fill #FFFFFF, use Fixed bottom bar, 65px visible (y 779-844 at 390x844), 1px #EBEBEB top border. Three 72px-wide items centered (x 80, 159, 237): icon 24px at y 795, label 10/12 at y 822. Explore (search-brand.svg, label 500 #DA1249), Wishlists (heart-outline-grey.svg), Log in (profile-grey.svg), date 2026-10-29

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| tab-icon |  |  | Selected category tab plays a one-shot 3D icon video (webm, 72px box). Resting state: the still object, supplied as tab-*-trim.png | observed |
| carousel |  |  | Next/Previous slide a row by one page; at rest each row starts at its first card | observed |
| toast |  |  | "Prices include all fees" toast slides up after load and later hides; resting state in the reference: visible (desktop) | observed |

## Icon tokens

Grid 32x32 viewBox, stroke outline line icons, 2-4px stroke on a 32 grid rendered at 12-24px, #222222 (search 4, menu 3, profile 2.67); category tabs use 3D object PNGs instead (observed).
| Name | Size | Use |
|---|---|---|
| s | 12px |  |
| m | 16px |  |
| l | 24px |  |

## Signature moves

### The search bar is the hero

Where: top of every airbnb.com page.
Do: No headline, no hero photo. The page opens on a white header (white to #F8F8F8 gradient, 1px #EBEBEB bottom line at y 200) holding the logo, four illustrated category tabs and an 850x66 white search pill with a 48px #DA1249 search circle. On phones it collapses to a 342x56 "Start your search" pill..
Don't: No hero image, no H1, no marketing headline above the listings.

### Rausch only where it means Airbnb or search

Where: logo and search button.
Do: On the resting homepage the only brand-color pixels are the Rausch logo (#FF385C) at top-left, the #DA1249 search circle, and (phones) the active Explore tab. Everything else is #222222 type on white and greys..
Don't: No Rausch headings, no Rausch section grounds, no colored buttons beyond search.

### Rows of rounded photos

Where: every section between header and footer.
Do: Each section is a heading row (20px title + 28px arrow circle, carousel arrows right) over one horizontal row of 16px-radius photos, 12px apart, clipped at the content column on desktop and at the screen edge on phones. Text sits under the photo, never on it, except the frosted Guest favorite badge and the heart..
Don't: No cards with borders or shadows; no text over photos; no grids that wrap to a second line.

### 3D object icons for categories

Where: header tabs (globe, house, hot-air balloon, service bell).
Do: Since the 2025 Summer Release the category tabs use small photoreal 3D objects instead of line icons; supplied as transparent PNGs (tab-*-trim.png). The selected tab icon animates once on load (video); its resting state is the still object..
Don't: Never redraw them as line icons or emoji.

### The Bélo usually stands alone

Where: merchandise, app icon, newsroom.
Do: Airbnb most often uses the Bélo symbol on its own, without the wordmark; in Rausch, Hof or white. The site header is the exception: the full Rausch lockup, 102x32..
Don't: Do not anthropomorphize, supersize, or place the Bélo in another brand’s colors.

## Messaging: rules

Airbnb’s public material says little about messaging rules. The newsroom boilerplate tells the origin story (two hosts, three guests, 2007) and the scale; the Cereal story names the mission, that anyone can belong anywhere. The homepage carries almost no marketing copy: place-led row titles and facts.

Why it works: The product is the message: real places and real prices do the persuading.

|  |  |
|---|---|
| Mission | anyone can belong anywhere (Cereal story, 2018) |
| Boilerplate | newsroom About us, last updated May 2026 |

- Lead with a place, not a promise
- Show the all-in price for the stated nights
- Credit hosts as the people behind every stay
- Don't No superlatives or hype in UI copy
- Don't Do not use Airbnb as a generic term for short-term rental

Real examples, to look at on Airbnb's own pages (not for reuse):
- Made Possible by Hosts (2021): campaign film built from guests’ own photos: https://news.airbnb.com/made-possible-by-hosts/

Sources: https://news.airbnb.com/about-us/, https://web.archive.org/web/20200107200319/https://airbnb.design/introducing-airbnb-cereal/, https://news.airbnb.com/made-possible-by-hosts/, https://www.airbnb.com/

## Voice: rules

Two voices. Product copy is short, sentence case and factual ("Cabin in Gatlinburg", "$1,534 for 2 nights"). Campaign and newsroom copy is story-led and warm, about hosts, guests and belonging. The Goods Toolkit asks for humble, understated branding and no internal jargon.

Why it works: Trust comes from plain facts; warmth comes from people’s stories.

|  |  |
|---|---|
| Case | sentence |
| Row title pattern | verb or noun phrase + city |

- Sentence case everywhere
- Type + place for listings
- Row titles: Stay in / Places to stay in / Available next month in + city
- Short, human labels: Become a host, Guest favorite
- Don't No all caps
- Don't No internal language in public pieces (Goods Toolkit p.14)

Do and don't:
- Do: "Cabin in Gatlinburg". Type + place.
- Don't: "Amazing Cozy Cabin Getaway!!". No hype in listing titles.
- Do: "Short-term rental in Austin". Generic term for the category.
- Don't: "An Airbnb in Austin". Airbnb is not a generic noun (trademark guidelines).

Sources: https://www.airbnb.com/, https://images.brilliantmade.com/uploads/attachment/file/154157/Merch%202025.pdf

## Logo: rules

Two marks: the Bélo symbol and the Airbnb lockup (Bélo + lowercase wordmark). The Goods Toolkit says the Bélo is most often used on its own, in Rausch, Hof or white, and pairs it with a lowercase bold Cereal wordmark for team names. The trademark guidelines forbid third parties from using the Bélo in any form. airbnb.com shows the Rausch lockup at 102x32 top-left.

Why it works: The Bélo stands for belonging; keeping it small and alone keeps it humble.

|  |  |
|---|---|
| Header lockup | 102x32 at x 48, y 32 (airbnb.com) |
| Apparel Bélo | never wider than 1 inch (Goods Toolkit p.9) |
| Clear space | not published as a measure |

- Bélo alone is the default on objects
- Colors: Rausch, Hof or white only
- Give the Bélo room to breathe
- Team wordmarks: Bélo + lowercase bold Cereal word
- Co-branded labels: “[brand] for Airbnb”, x-heights matched, “for” in Cereal Medium
- Don't Do not anthropomorphize or characterize the Bélo
- Don't Do not supersize the Bélo
- Don't Do not stack the Bélo beside another brand’s logo
- Don't Do not set the Bélo in another brand’s colors
- Don't Third parties: do not use the Bélo at all (trademark guidelines)

Do and don't:
- Do: "airbnb". Rausch lockup, small, top-left.
- Don't: "airbnb". Not in another brand’s or a darker product color.

Real examples, to look at on Airbnb's own pages (not for reuse):
- Goods Toolkit p.7: the Bélo and team wordmarks: https://images.brilliantmade.com/uploads/attachment/file/154157/Merch%202025.pdf
- Newsroom brand asset: the white Bélo on the Rausch gradient: https://news.airbnb.com/media-assets?category=brand
- Newsroom brand asset: the white lockup on the gradient: https://news.airbnb.com/media-assets?category=brand
- Goods Toolkit p.14: Please don’t: https://images.brilliantmade.com/uploads/attachment/file/154157/Merch%202025.pdf

Sources: https://images.brilliantmade.com/uploads/attachment/file/154157/Merch%202025.pdf, https://www.airbnb.com/help/article/3233, https://news.airbnb.com/media-assets?category=brand, https://www.airbnb.com/

## Color: rules

The Goods Toolkit publishes two core colors, Rausch and Hof, with Pantone, CMYK and thread values but no hex; white is the third Bélo color. airbnb.com names the same colors in its CSS (--palette-rausch #FF385C, --palette-hof #222222) plus a grey ramp (Foggy, Bobo, Deco, Bebe, Faint) and a Rausch gradient. The homepage is white and grey; Rausch appears only in the logo and the search circle (#DA1249).

Why it works: Rausch is rare, so it reads as Airbnb wherever it shows. The trademark guidelines even ask others not to use it prominently.

|  |  |
|---|---|
| Rausch | Pantone 1787 C / 1785 U, CMYK 0 83 57 0, site #FF385C |
| Hof | Pantone 2336 C / Black U, CMYK 62 52 51 59, site #222222 |
| Search | #DA1249 |
| Gradient | #E61E4D, #E31C5F, #D70466 |

- Rausch for the Bélo and one action (search)
- Hof for text
- White grounds; #F7F7F7 for the footer zone
- The gradient sits behind the white Bélo on brand assets only
- Don't No Rausch section grounds or headings in product
- Don't Third parties: do not feature Rausch prominently (trademark guidelines)

Not published: Hex values (the guide gives Pantone and CMYK; hexes are the site tokens); A color ratio; The grey ramp (observed only).

Do and don't:
- Do: "Search". Rausch-family color only on the one search action.
- Don't: "Stay in Wisconsin Dells". No Rausch section grounds behind content.

Real examples, to look at on Airbnb's own pages (not for reuse):
- Goods Toolkit p.6: Rausch and Hof: https://images.brilliantmade.com/uploads/attachment/file/154157/Merch%202025.pdf

Sources: https://images.brilliantmade.com/uploads/attachment/file/154157/Merch%202025.pdf, https://www.airbnb.com/help/article/3233, https://www.airbnb.com/

## Typography: rules

One family: Airbnb Cereal, drawn with Dalton Maag and launched in 2018 to work “from button to billboard”. The story says it opened apertures and raised the x-height for legibility and balanced the Book weight for small UI sizes. airbnb.com serves a variable version ("Airbnb Cereal VF") and sets everything from 10px tab labels to 22px titles, mostly at 500 and 600.

Why it works: A single owned face carries the same voice across product, print and outdoor.

|  |  |
|---|---|
| Real face | Airbnb Cereal (proprietary) |
| Stand-in | Public Sans, Cereal weight + 100 (see calibration) |
| UI scale | 10, 11, 12, 13, 14, 18, 20, 22 px |

- One family for everything
- Sentence case, normal or slightly tight tracking (-0.18px at 20px, -0.44px at 22px)
- Weights 400 / 500 / 600 in UI
- Lowercase bold Cereal for wordmarks
- Don't No second typeface
- Don't No all-caps headlines

Do and don't:
- Do: "Places to stay in St. Louis". Sentence case, semibold.
- Don't: "PLACES TO STAY". No all caps.

Real examples, to look at on Airbnb's own pages (not for reuse):
- Airbnb Cereal weights (Airbnb Design, 2018): https://web.archive.org/web/20200107200319/https://airbnb.design/introducing-airbnb-cereal/
- Cereal’s open apertures: https://web.archive.org/web/20200107200319/https://airbnb.design/introducing-airbnb-cereal/
- Cereal on posters: https://web.archive.org/web/20200107200319/https://airbnb.design/introducing-airbnb-cereal/
- Cereal on a billboard mockup: https://web.archive.org/web/20200107200319/https://airbnb.design/introducing-airbnb-cereal/

Sources: https://web.archive.org/web/20200107200319/https://airbnb.design/introducing-airbnb-cereal/, https://www.airbnb.com/

## Iconography: rules

Two icon families on airbnb.com: outline line icons on a 32-unit grid (search, profile, menu, arrows, heart) in #222222, and photoreal 3D object icons for the category tabs (a globe, a house, a hot-air balloon, a service bell) introduced with the 2025 redesign.

Why it works: Line icons stay out of the way; the 3D objects add warmth and play to the one place that names what you can book.

|  |  |
|---|---|
| Line icons | 12, 16, 24 px |
| Tab objects | ~44px art |

- Line icons: 32 viewBox, 2-4 stroke, #222222
- 3D objects only for top-level categories
- Heart on photos: dark translucent fill with a white stroke
- Don't No emoji as icons
- Don't Do not mix the 3D objects into body content

Not published: Icon grid and stroke rules (observed only).

Real examples, to look at on Airbnb's own pages (not for reuse):
- Category icon: All (globe): https://www.airbnb.com/
- Category icon: Homes: https://www.airbnb.com/
- Category icon: Activities: https://www.airbnb.com/
- Category icon: Services: https://www.airbnb.com/

Sources: https://www.airbnb.com/

## Illustration: rules

The homepage has no illustration. The 2021 Winter Release used puzzle-piece home illustrations, and the 2023 Get an Airbnb ads were animated by Buck, but no illustration rules are public.

Why it works: Photography of real places carries the brand on the web.

|  |  |
|---|---|

- Prefer photography of real listings and people
- Don't No decorative illustration on product pages

Not published: Illustration style rules.

Real examples, to look at on Airbnb's own pages (not for reuse):
- 2025 Summer Release header: https://news.airbnb.com/product-releases/

Sources: https://news.airbnb.com/product-releases/, https://www.airbnb.com/

## Photography: rules

Real listings and real experiences, shot in natural light, cropped tight and shown in rounded rectangles with no overlays. Newsroom photography credits photographers and hosts by name and favours people in real spaces.

Why it works: Photos are the product: the place you will actually stay.

|  |  |
|---|---|
| Listing image | 182x173 desktop, 165x157 phone |
| Tile | 125x119 desktop |

- Real places, natural light
- Rounded 16-20px corners, no borders
- Text under photos, not on them
- Credit the photographer and host
- Don't No stock-looking staged scenes
- Don't No text over listing photos

Not published: Photography rules (only examples are public).

Real examples, to look at on Airbnb's own pages (not for reuse):
- Newsroom media asset: Homes: https://news.airbnb.com/media-assets/
- Newsroom media asset: Experiences (2025 Summer Release, credit Karla Ximena Ceron): https://news.airbnb.com/media-assets/
- Newsroom media asset: Services (credit Damien Maloney): https://news.airbnb.com/media-assets/
- Newsroom media asset: Hosts: https://news.airbnb.com/media-assets/
- Newsroom media asset: Guests: https://news.airbnb.com/media-assets/
- Newsroom media asset: Work from anywhere: https://news.airbnb.com/media-assets/

Sources: https://news.airbnb.com/media-assets/, https://www.airbnb.com/

## Motion: rules

UI motion is quiet: carousels slide, the fees toast rises and hides, and the selected category icon plays a short 3D animation once.

Why it works: Motion rewards an action and then gets out of the way.

|  |  |
|---|---|
| Tab icon | one-shot webm, 72px box |

- One short animation per selection
- Static resting states
- Don't No looping decorative motion

Not published: Motion durations and easing.

Sources: https://www.airbnb.com/

## Interface and layout: rules

A wide, airy grid: 48px side margins at 1440, a 1344px content column, and every section a single horizontal row of rounded photos that bleeds off the right edge. The header is white and the bottom of the page turns #F7F7F7 for SEO links and the footer.

Why it works: Rows invite browsing sideways; the white page lets photos do the work.

|  |  |
|---|---|
| Container | 1344 at 1440 |
| Row pitch | 298px desktop / 281 phone |
| Card | 182x173 / gap 12 |

- 48px margins desktop, 24px phone
- 12px gaps between cards
- One row per section, no wrapping
- Grey band only for the inspiration links and footer
- Don't No multi-row grids on the homepage
- Don't No full-bleed hero image

Real examples, to look at on Airbnb's own pages (not for reuse):
- Listing photo as shown in a homepage row: https://www.airbnb.com/

Sources: https://www.airbnb.com/

## Rules: rules

The public rules are the Goods Toolkit’s (for objects) and the trademark guidelines (for others). Both protect the Bélo and Rausch.

Why it works: The brand is protected by restraint: small marks, rare color.

|  |  |
|---|---|

- Ask whether the Bélo belongs on the object at all
- Keep branding proportional to the object
- Co-branding requires formal approval
- Don't No Bélo in any form for third parties
- Don't No “Airbnb”, “Air”, “bnb” or “b&b” in other businesses’ names
- Don't No Rausch featured prominently by others

Real examples, to look at on Airbnb's own pages (not for reuse):
- Airbnb Goods Toolkit 2025, cover: https://images.brilliantmade.com/uploads/attachment/file/154157/Merch%202025.pdf

Sources: https://images.brilliantmade.com/uploads/attachment/file/154157/Merch%202025.pdf, https://www.airbnb.com/help/article/3233

## Campaigns

### Made Possible by Hosts (2021)

Global campaign of short films built from real photographs guests took while staying in hosts’ homes, each named after a song.

How the system shows: Real guest photos, hosts named and credited, the Bélo at the end.
Why it works: It puts the hosts, not the platform, at the center.
Channels: TV, online video, social. Source: https://news.airbnb.com/made-possible-by-hosts/

### Airbnb Cereal launch (2018)

Airbnb introduced its own typeface, made with Dalton Maag, to work across UI, magazine and billboards.

How the system shows: One family from 10px UI labels to billboard headlines.
Why it works: Owning the type gives one voice across every medium.
Channels: product, print, outdoor, Airbnb Design. Source: https://web.archive.org/web/20200107200319/https://airbnb.design/introducing-airbnb-cereal/

### We Accept (Super Bowl) (2017)

Super Bowl spot setting large type over portraits with no voiceover.

How the system shows: Typography as the whole message, on faces of real people.
Why it works: A values message carried by type and faces alone.
Channels: TV. Source: https://web.archive.org/web/20200107200319/https://airbnb.design/introducing-airbnb-cereal/

### Get an Airbnb (2023)

Animated 15-second spots comparing Airbnbs with hotel rooms for groups and families; launched in the US and Canada on August 24, 2023, animated by Buck.

How the system shows: Miniature animated worlds, white end card with the Bélo.
Why it works: One concrete reason per spot.
Channels: online video, OTT, social. Source: https://www.campaignlive.com/article/airbnbs-latest-global-campaign-touts-its-strengths-regular-hotels/1835111

### Summer Release 2025: Services and Experiences (2025)

App redesign adding Services and reimagined Experiences, with 3D object icons for each category.

How the system shows: The globe, house, balloon and bell tabs that now head airbnb.com.
Why it works: Makes three products feel like one app.
Channels: product, newsroom. Source: https://news.airbnb.com/product-releases/

## Applications

| Format | What | Source |
|---|---|---|
| website | airbnb.com homepage: white header with search pill, rows of rounded photos, grey SEO + footer band. | https://www.airbnb.com/ |
| merchandise | Tees, hats, socks, totes, drinkware and paper goods with a small Bélo in Rausch, Hof or white. | https://images.brilliantmade.com/uploads/attachment/file/154157/Merch%202025.pdf |
| stationery | Letterhead (16pt), envelopes (18pt min), notecards (32lb min) on bright white paper. | https://images.brilliantmade.com/uploads/attachment/file/154157/Merch%202025.pdf p.24-26 |
| newsroom assets | White Bélo and lockup on the Rausch gradient for press. | https://news.airbnb.com/media-assets?category=brand |
| product release | Twice-yearly release headers and app screenshots. | https://news.airbnb.com/product-releases/ |

## By format

How our engine applies Airbnb’s system to each format. This is our recipe built from their rules and the homepage, not something Airbnb publishes. Level = how far toward the campaign end (warm story, big type) from the functional end. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 1 | White page, 48px margins; small Rausch lockup top-left; a pill search or one plain place-led title instead of a hero headline; rows of 16px-radius photos 12px apart with 13px title + 12px grey price under each; one #DA1249 action; #F7F7F7 footer band with three link columns | which rows follow, and whether the top is a search pill or a short title |
| Deck | 2 | White slides, #222222 sentence-case semibold titles, one real photo per slide in rounded corners, the Bélo small on the last slide | a Rausch-gradient title slide with the white Bélo |
| Social post | 3 | Full-bleed real photo of a place or host, one short line, small white Bélo | square or story crop |
| Email | 1 | White body, Rausch lockup, rows of rounded listing photos with facts, one action | a hero photo |

## Checks before anything ships

- **Logo hidden**: Cover the logo. It should still read as Airbnb: a pill search with a red circle, rows of rounded real photos, small grey prices, Cereal-like type.
- **Swap test**: Put another name on it. If nothing else changed, the search-first header, 3D category icons and Guest favorite badges are missing.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Airbnb's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- Airbnb publishes no public brand guide; the rules here come from the Goods Toolkit 2025 (an Airbnb PDF hosted publicly by its merch partner), the trademark guidelines and the archived Airbnb Design site
- airbnb.design now redirects to airbnb.com; the Cereal and DLS articles were read on the Wayback Machine
- Hex values are not published (the toolkit gives Pantone, CMYK and thread only); hexes are the airbnb.com CSS tokens
- A color ratio is not published (the proportion shown is measured)
- Logo clear space and minimum size are not published (only the 1-inch apparel cap)
- Typography scale, icon, illustration, photography and motion rules are not published (observed only)
- Airbnb Cereal is proprietary; Public Sans is a calibrated stand-in, not identical (rounder bowls and open apertures are lost)
- The homepage is personalized and A/B tested; rows, cities, listings and tab labels vary per visitor (book matches the 2026-10-29 reference)
- Layouts between breakpoints were not measured (only 390 and 1440; the 744/950/1128/1440 breakpoints come from the stylesheet)
- No published campaign guidelines; campaigns listed are from the newsroom, Airbnb Design and trade press

Logos and reference images belong to Airbnb. Look at them on Airbnb's own pages; don't reuse them.