Homes
Stays in hosts’ homes, browsed by place. Observed
The system
Fixed, everywhere
- 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.
Source: airbnb.comweb.archive.org/web/20200107200319/https://airbnb.design/introducing-airbnb-cereal
Color, in proportion
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..
Tone by the reader's state
- Homepage and product UI
- Newsroom and campaigns
Two voices. The homepage is plain and factual; newsroom and campaigns are warmer and story-led. Levels are our reading.
How loud each format gets
Silent
QuietLanding pageEmail
CalmDeck
WarmSocial post
Loud
Loudest
Our engine's setting, built from their rules.
Every piece passes two checks
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.
Strategy
A community marketplace where hosts offer homes, experiences and services to guests in almost every country (paraphrase of the newsroom boilerplate). Published
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
Explore experiences nearby
Stay in Wisconsin Dells
Places to stay in St. Louis
Available next month in Gatlinburg
Full spec
- For Observed
- Guests planning a trip and, secondarily, prospective hosts ("Become a host").
- Promise Published
- Belonging: Cereal’s launch story ties the brand to the mission that anyone can belong anywhere.
- Mission Published
- For anyone to belong anywhere (as stated in the Cereal launch story).
Proof behind each pillar
Story Published
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".
Category. Travel marketplace: Homes, Experiences (labelled Activities in the desktop tabs) and Services. Observed
Why them
- Hosts, not hotels: unique stays, experiences and services offered by people Published
- All-in prices shown up front ("Prices include all fees") Observed
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 Published
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
More real lines
Inspiration for future getaways
Prices include all fees
Introducing Airbnb Cereal
Made Possible by Hosts
Airbnb 2026 Summer Release
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.
Source: news.airbnb.com/about-usweb.archive.org/web/20200107200319/https://airbnb.design/introducing-airbnb-cerealnews.airbnb.com/made-possible-by-hostsairbnb.com
Personality and voice
Welcomingbut not ExclusivePublished
Humblebut not LoudPublished
Factualbut not SalesyObserved
Humanbut not CorporatePublished
Cabin in Gatlinburg
Amazing Cozy Cabin Getaway!!
Short-term rental in Austin
An Airbnb in Austin
Trust comes from plain facts; warmth comes from people’s stories.
Full spec
- 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
WarmPlainHumble
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.
- 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
- 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.
Their words
Become a hostGuest favoritePrices include all feesStart your searchInspiration for future getaways
Never
Airbnb as a generic noun for any rental“bnb”, “Air” or “b&b” in partner names
Source: images.brilliantmade.com/uploads/attachment/file/154157/Merch%202025.pdfairbnb.comnews.airbnb.com/made-possible-by-hosts
- Don’t No all caps
- Don’t No internal language in public pieces (Goods Toolkit p.14)
| Case | sentence |
|---|---|
| Row title pattern | verb or noun phrase + city |
Source: airbnb.comimages.brilliantmade.com/uploads/attachment/file/154157/Merch%202025.pdf
Logo
Logos shown from Brandfetch for reference. Airbnb and the Bélo are trademarks of Airbnb, Inc., whose guidelines bar their use without written permission. Not affiliated, and not for download.
airbnb
airbnb
The Bélo stands for belonging; keeping it small and alone keeps it humble.
Full spec
- 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)
| 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 |
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.
Source: images.brilliantmade.com/uploads/attachment/file/154157/Merch%202025.pdfairbnb.com/help/article/3233news.airbnb.com/media-assetsairbnb.com
Color
Search
Stay in Wisconsin Dells
Rausch is rare, so it reads as Airbnb wherever it shows.
Full spec
Rausch is rare, so it reads as Airbnb wherever it shows. The trademark guidelines even ask others not to use it prominently.
- 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)
| 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 |
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).
Not published: Hex values (the guide gives Pantone and CMYK; hexes are the site tokens); A color ratio; The grey ramp (observed only).
Source: images.brilliantmade.com/uploads/attachment/file/154157/Merch%202025.pdfairbnb.com/help/article/3233airbnb.com
Typography
Belong anywhere
Places to stay in St. Louis
PLACES TO STAY
A single owned face carries the same voice across product, print and outdoor.
Full spec
| Their face | Use | License | Open stand-in |
|---|---|---|---|
| Airbnb Cereal | Titles, wordmarks, campaign type | Proprietary to Airbnb (custom typeface made with Dalton Maag, 2018); not an open font | Public Sans 700 (for Cereal 600) Within 1% width and 2% ink of Cereal 600 on the 20px section title; x-height 2% short (see calibration) |
| Airbnb Cereal (Book / Medium) | All UI text, served as "Airbnb Cereal VF" | Proprietary to Airbnb | Public Sans 400 / 600 Body line within 0.1% width and 2.5% ink; Cereal 500 card titles within 0.4% width at Public Sans 600 |
- 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
| 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: 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.
Source: web.archive.org/web/20200107200319/https://airbnb.design/introducing-airbnb-cerealairbnb.com
Iconography
Line icons stay out of the way; the 3D objects add warmth and play to the one place that names what you can book.
Full spec
- 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
| Line icons | 12, 16, 24 px |
|---|---|
| Tab objects | ~44px art |
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.
Not published: Icon grid and stroke rules (observed only).
Source: airbnb.com
Illustration
Photography of real places carries the brand on the web.
Full spec
- Prefer photography of real listings and people
- Don’t No decorative illustration on product pages
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.
Not published: Illustration style rules.
Photography
Photos are the product: the place you will actually stay.
Full spec
- 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
| Listing image | 182x173 desktop, 165x157 phone |
|---|---|
| Tile | 125x119 desktop |
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.
Not published: Photography rules (only examples are public).
Motion
Motion rewards an action and then gets out of the way.
Full spec
- One short animation per selection
- Static resting states
- Don’t No looping decorative motion
| Tab icon | one-shot webm, 72px box |
|---|
UI motion is quiet: carousels slide, the fees toast rises and hides, and the selected category icon plays a short 3D animation once.
Not published: Motion durations and easing.
Source: airbnb.com
Interface & layout
The page, band by band
Header (logo, category tabs, search)
Explore experiences nearby
Stay in Wisconsin Dells
Places to stay in St. Louis
Available next month in Gatlinburg
Stay in Indianapolis (phone only)
Homes in Orlando (phone only)
Popular homes in New Orleans (phone only)
Popular homes in Chicago (phone only)
Check out homes in Houston (phone only)
Inspiration for future getaways
Buttons
Signature moves
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..
The search bar is the hero · top of every airbnb.com page
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..
Rausch only where it means Airbnb or search · logo and search button
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..
Rows of rounded photos · every section between header and footer
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..
3D object icons for categories · header tabs (globe, house, hot-air balloon, service bell)
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..
The Bélo usually stands alone · merchandise, app icon, newsroom
Specimens use sample copy, not Airbnb’s.
Full spec
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.
Measured from airbnb.com's 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.
Spacing
| Measure | Desktop | Phone |
|---|---|---|
| Page margin | 48px | 24px |
| Section padding | 42px | 42px |
| Navigation | 201px | 201px |
Type, at size
Section title (row heading)
Airbnb Cereal · 20px (phone 18) · line 1.2 · tracking -0.18px · weight 700
Band title (Inspiration for future getaways)
Airbnb Cereal · 22px · line 1.18 · tracking -0.44px · weight 600
Nav tab label
Airbnb Cereal (Book / Medium) · 14px · line 1.29 · weight 550
Become a host / footer column head / inspiration city
Airbnb Cereal (Book / Medium) · 14px · line 1.29 · weight 600
Search field label (Where / When / Who)
Airbnb Cereal (Book / Medium) · 12px · line 1.33 · weight 600
Search placeholder
Airbnb Cereal (Book / Medium) · 14px · line 1.29 · weight 400
Card title
Airbnb Cereal (Book / Medium) · 13px · line 1.23 · weight 600
Card price line
Airbnb Cereal (Book / Medium) · 12px · line 1.33 · weight 400
Experience tile label
Airbnb Cereal (Book / Medium) · 13px · line 1.43 · weight 600
Badge (Guest favorite)
Airbnb Cereal (Book / Medium) · 11px · line 1.18 · weight 700
Footer link / legal
Airbnb Cereal (Book / Medium) · 14px · line 1.29 · weight 400
Inspiration subtitle
Airbnb Cereal (Book / Medium) · 14px · line 1.29 · weight 400
Phone tab bar label
Airbnb Cereal (Book / Medium) · 10px · line 1.2 · tracking 0.2px · weight 400
Display (campaign, not on the homepage)
Airbnb Cereal · 48px (phone 32) · line 1.125 · weight 700
- Motion
- quiet UI motion; brand motion lives in the 3D tab icons and campaign film
- Buttons
- circles and pills (search circle, round icon buttons, pill search bar); 16-20px photo corners
Page anatomy
How Airbnb’s own landing pages are built, observed on airbnb.com, 2026-10-29. The full measurements are in spec.md.
- Navigation
- 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.
- Hero
- 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.
- Explore experiences nearby
- Carousel of 11 rounded photo tiles with labels
- Stay in Wisconsin Dells
- 7 listing cards in one row (desktop); 2 + peek on phones
- Places to stay in St. Louis
- 7 listing cards in one row (desktop); 2 + peek on phones
- Available next month in Gatlinburg
- 7 listing cards in one row (desktop); 2 + peek on phones
- Stay in Indianapolis (phone only)
- Extra listing rows the phone reference shows below the first three
- Homes in Orlando (phone only)
- Extra listing rows the phone reference shows below the first three
- Popular homes in New Orleans (phone only)
- Extra listing rows the phone reference shows below the first three
- Popular homes in Chicago (phone only)
- Extra listing rows the phone reference shows below the first three
- Check out homes in Houston (phone only)
- Extra listing rows the phone reference shows below the first three
- Inspiration for future getaways
- Grey band of SEO destination links under tabs
- Footer
- Same #F7F7F7 ground as Inspiration: three link columns, then a legal row
Source: airbnb.com
In use
Made Possible by Hosts · 2021
It puts the hosts, not the platform, at the center. Our reading
Airbnb Cereal launch · 2018
Owning the type gives one voice across every medium. Our reading
We Accept (Super Bowl) · 2017
A values message carried by type and faces alone. Our reading
Get an Airbnb · 2023
One concrete reason per spot. Our reading
Summer Release 2025: Services and Experiences · 2025
Makes three products feel like one app. Our reading
Full spec
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.
- Made Possible by Hosts. Global campaign of short films built from real photographs guests took while staying in hosts’ homes, each named after a song. news.airbnb.com/made-possible-by-hosts
- Airbnb Cereal launch. Airbnb introduced its own typeface, made with Dalton Maag, to work across UI, magazine and billboards. web.archive.org/web/20200107200319/https://airbnb.design/introducing-airbnb-cereal
- We Accept (Super Bowl). Super Bowl spot setting large type over portraits with no voiceover. web.archive.org/web/20200107200319/https://airbnb.design/introducing-airbnb-cereal
- Get an Airbnb. 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. campaignlive.com/article/airbnbs-latest-global-campaign-touts-its-strengths-regular-hotels/1835111
- Summer Release 2025: Services and Experiences. App redesign adding Services and reimagined Experiences, with 3D object icons for each category. news.airbnb.com/product-releases
| Format | What they did | Source |
|---|---|---|
| website | airbnb.com homepage: white header with search pill, rows of rounded photos, grey SEO + footer band. | airbnb.com |
| merchandise | Tees, hats, socks, totes, drinkware and paper goods with a small Bélo in Rausch, Hof or white. | images.brilliantmade.com/uploads/attachment/file/154157/Merch%202025.pdf |
| stationery | Letterhead (16pt), envelopes (18pt min), notecards (32lb min) on bright white paper. | images.brilliantmade.com/uploads/attachment/file/154157/Merch%202025.pdf%20p.24-26 |
| newsroom assets | White Bélo and lockup on the Rausch gradient for press. | news.airbnb.com/media-assets |
| product release | Twice-yearly release headers and app screenshots. | news.airbnb.com/product-releases |
Our setting for each format
| Format | Loudness | Must appear | What varies |
|---|---|---|---|
| Landing page | 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 | 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 | Full-bleed real photo of a place or host, one short line, small white Bélo | square or story crop | |
| White body, Rausch lockup, rows of rounded listing photos with facts, one action | a hero photo |
Ads
Rules
Do
- 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
- No “Airbnb”, “Air”, “bnb” or “b&b” in other businesses’ names
- No Rausch featured prominently by others
Source: images.brilliantmade.com/uploads/attachment/file/154157/Merch%202025.pdfairbnb.com/help/article/3233
Steal this kit
Your name and logo, Airbnb’s system.
Comes with you
- Color roles and how much of each
- Type pairing, with open fonts
- Voice rules the writing check enforces
- Icon, photo, illustration and motion recipes
- The strategy frame, to fill with yours
Stays yours
- Your name and logo
- Your proof: numbers, customers, quotes
- Your purpose and claims. Theirs aren’t yours to make
Use this kit for my brand Use this brand in Claude
Hand it to a developer
- spec.mdEvery value and rule
- tokens.cssCSS variables
- tokens.jsonDesign tokens (DTCG)
- kit.jsonWhat our engines read
Your brand next
Get your brand audit Put your brand in Claude What goes in a brand book
What Airbnb doesn’t publish
- 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
Each value is marked published, observed, our reading or our recipe, with its source. Checked 2026-10-29. Not affiliated with Airbnb.