Typography
scale ratio 1.254- Airbnb Cerealcss: Airbnb Cereal VFdisplay + body400 500100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Airbnb Cereal | 22px | 500 | 1.182 | -0.02em |
| title | Airbnb Cereal | 14px | 500 | 1.286 | 0em |
| body | Airbnb Cereal | 14px | 400 | 1.286 | 0em |
Type scale
Aa14Aa21Aa22
- Body size
- 14px / 1.286
- Display size
- 22px
- Display tracking
- -0.02em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 14.85:1
- Muted on bg
- 4.90:1
- Dark mode
- none
Declared accent tokens
- --palette-logo-brand#FF385Cpainted
- --palette-icon-brand#D80669not on page
- --palette-status-brand#DA1249painted
- --palette-bg-primary-core#FF385Cpainted
Space, shape & depth
Spacing scale
- 2
- 4
- 5
- 6
- 8
- 10
- 11
- 12
- 15
- 16
- 18
- 20
- 24
- 32
Corner radii
pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- n/a
Layout & motion
- Container
- 1344px
- Grid columns
- 12
- Hero
- unknown
- Navigation
- top-sticky+transparent
- Page height
- 2,154px
- Easing
- cubic-bezier(0.2, 0, 0, 1)
- Durations
- 100ms 200ms 250ms 300ms
- Transitions
- 56
- Keyframes
- 0
- Stack
- react, google-tag-manager
Page sections (3)
section labels are heuristic
01nav
02hero
03footerSite Footer
How Airbnb compares
- Body text
- 14px: smaller than 82% of indexed sites (median 16px).
- Largest heading
- 22px: smaller than 93% of indexed sites (median 60px).
- Type scale
- 1.25×: flatter than 62% of indexed sites (median 1.28×).
- Container
- 1344px: wider than 83% of indexed sites (median 1242px).
- Text contrast
- 14.8:1: lower than 77% of indexed sites (median 17.6:1).
- Page length
- 2,154px: shorter than 89% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Airbnb Cereal
- The only site in the index that loads Airbnb Cereal.
- Color scheme
- Light by default, like 75% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Airbnb use?
Airbnb uses Airbnb Cereal (loaded as "Airbnb Cereal VF") for headings and body text.
What are Airbnb's brand colors?
Airbnb's website uses a light scheme: background #F7F7F7, surface #FFFFFF, text #222222, muted text #6C6C6C.
How is Airbnb's website laid out?
The most common corner radius is fully rounded (pill), body text is 14px with 1.286 line height, and the page container is 1344px wide.
