# Design Style Guide: Airbnb | Holiday rentals, cabins, beach houses & more



> Source: https://www.airbnb.com

> Extracted: 2026-05-15 21:47

> Viewport: 1280x720 | Full page: 720px



## Design Philosophy



- **Mixed theme** — uses both light and dark surfaces

- **Single typeface** (Airbnb Cereal VF) — unified, cohesive feel

- **Pill-shaped elements** — fully rounded buttons/badges

- **Glassmorphism** — backdrop blur effects for depth

- **Generous whitespace** — large section gaps for breathing room

- **Accent color** — `#e00b41` used for interactive elements



---



## CSS Custom Properties



### Color Tokens



| Variable | Value |

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

| `--material-backgrounds-extra-thick-background-color` | `rgba(255,255,255,0.925)` |

| `--material-backgrounds-extra-thin-background-color` | `rgba(218,218,218,0.40)` |

| `--material-backgrounds-regular-background-color` | `rgba(250,250,250,0.72)` |

| `--material-backgrounds-thick-background-color` | `rgba(240,240,240,0.86)` |

| `--material-backgrounds-thin-background-color` | `rgba(240,240,240,0.50)` |

| `--palette-bg-primary` | `#FFFFFF` |

| `--palette-bg-primary-core` | `#FF385C` |

| `--palette-bg-primary-disabled` | `#F7F7F7` |

| `--palette-bg-primary-error` | `#FFF8F6` |

| `--palette-bg-primary-hover` | `#F7F7F7` |

| `--palette-bg-primary-inverse` | `#222222` |

| `--palette-bg-primary-inverse-disabled` | `#DDDDDD` |

| `--palette-bg-primary-inverse-error` | `#C13515` |

| `--palette-bg-primary-inverse-error-hover` | `#B32505` |

| `--palette-bg-primary-inverse-hover` | `#000000` |

| `--palette-bg-primary-luxe` | `#460479` |

| `--palette-bg-primary-plus` | `#92174D` |

| `--palette-bg-primary-selected` | `#F7F7F7` |

| `--palette-bg-quaternary` | `#F2F2F2` |

| `--palette-bg-quaternary-hover` | `#EBEBEB` |

| `--palette-bg-secondary` | `#F7F7F7` |

| `--palette-bg-secondary-core` | `linear-gradient(to right,#E61E4D 0%,#E31C5F 50%,#D70466 100%)` |

| `--palette-bg-secondary-core-hover` | `radial-gradient(circle at center,#FF385C 0%,#E61E4D 27.5%,#E31C5F 40%,#D70466...` |

| `--palette-bg-secondary-core-rtl` | `linear-gradient(to left,#E61E4D 0%,#E31C5F 50%,#D70466 100%)` |

| `--palette-bg-secondary-luxe` | `linear-gradient(to right,#59086E 0%,#460479 50%,#440589 100%)` |

| `--palette-bg-secondary-luxe-hover` | `radial-gradient(circle at center,#6C0D63 0%,#59086E 30%,#460479 55%,#440589 7...` |

| `--palette-bg-secondary-luxe-rtl` | `linear-gradient(to left,#59086E 0%,#460479 50%,#440589 100%)` |

| `--palette-bg-secondary-plus` | `linear-gradient(to right,#BD1E59 0%,#92174D 50%,#861453 100%)` |

| `--palette-bg-secondary-plus-hover` | `radial-gradient(circle at center,#D70466 0%,#BD1E59 30%,#92174D 55%,#861453 7...` |

| `--palette-bg-secondary-plus-rtl` | `linear-gradient(to left,#BD1E59 0%,#92174D 50%,#861453 100%)` |

| `--palette-bg-tertiary` | `#B0B0B0` |

| `--palette-bg-tertiary-core` | `#E00B41` |

| `--palette-bg-tertiary-disabled` | `#EBEBEB` |

| `--palette-bg-tertiary-hover` | `#6A6A6A` |



### Spacing & Size Tokens



| Variable | Value |

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

| `--context-contentscroller_margin-left` | `0` |

| `--spacing-macro16px` | `16px` |

| `--spacing-macro24px` | `24px` |

| `--spacing-macro32px` | `32px` |

| `--spacing-macro40px` | `40px` |

| `--spacing-macro48px` | `48px` |

| `--spacing-macro64px` | `64px` |

| `--spacing-macro80px` | `80px` |

| `--spacing-micro12px` | `12px` |

| `--spacing-micro16px` | `16px` |

| `--spacing-micro24px` | `24px` |

| `--spacing-micro2px` | `2px` |

| `--spacing-micro32px` | `32px` |

| `--spacing-micro4px` | `4px` |

| `--spacing-micro8px` | `8px` |

| `--typography-base-extra-small10px-letter-spacing` | `normal` |

| `--typography-body-paragraphs-text_14_20-letter-spacing` | `normal` |

| `--typography-body-paragraphs-text_16_22-letter-spacing` | `normal` |

| `--typography-body-paragraphs-text_16_24-letter-spacing` | `normal` |

| `--typography-body-paragraphs-text_18_28-letter-spacing` | `normal` |

| `--typography-body-text_11_15-letter-spacing` | `normal` |

| `--typography-body-text_12_16-letter-spacing` | `normal` |

| `--typography-body-text_14_18-letter-spacing` | `normal` |

| `--typography-body-text_16_20-letter-spacing` | `normal` |

| `--typography-body-text_18_24-letter-spacing` | `normal` |

| `--typography-caption-text_12_16-letter-spacing` | `normal` |

| `--typography-special-display-medium_40_44-letter-spacing` | `normal` |

| `--typography-special-display-medium_48_54-letter-spacing` | `normal` |

| `--typography-special-display-medium_60_68-letter-spacing` | `normal` |

| `--typography-special-display-medium_72_74-letter-spacing` | `normal` |

| `--typography-subtitles-book_14_18-letter-spacing` | `normal` |

| `--typography-subtitles-book_16_22-letter-spacing` | `normal` |

| `--typography-subtitles-book_18_24-letter-spacing` | `normal` |

| `--typography-titles-medium_14_18-letter-spacing` | `normal` |

| `--typography-titles-medium_16_20-letter-spacing` | `normal` |

| `--typography-titles-medium_18_24-letter-spacing` | `normal` |

| `--typography-titles-semibold_14_18-letter-spacing` | `normal` |

| `--typography-titles-semibold_16_20-letter-spacing` | `normal` |

| `--typography-titles-semibold_18_24-letter-spacing` | `normal` |

| `--typography-titles-semibold_22_26-letter-spacing` | `normal` |

| `--typography-titles-semibold_26_30-letter-spacing` | `normal` |

| `--typography-titles-semibold_32_36-letter-spacing` | `normal` |

| `--typography-tracking-normal-letter-spacing` | `normal` |

| `--typography-tracking-wide-letter-spacing` | `0.04em` |



### Typography Tokens



| Variable | Value |

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

| `--context-contentscroller_peek` | `100px` |

| `--palette-text-focused` | `#3F3F3F` |

| `--palette-text-legal` | `#428BFF` |

| `--palette-text-link-disabled` | `#929292` |

| `--palette-text-material-disabled` | `rgba(0,0,0,0.24)` |

| `--palette-text-primary` | `#222222` |

| `--palette-text-primary-core` | `linear-gradient(to right,#E61E4D 0%,#E31C5F 50%,#D70466 100%)` |

| `--palette-text-primary-disabled` | `#DDDDDD` |

| `--palette-text-primary-error` | `#C13515` |

| `--palette-text-primary-error-hover` | `#B32505` |

| `--palette-text-primary-hover` | `#000000` |

| `--palette-text-primary-inverse` | `#FFFFFF` |

| `--palette-text-secondary` | `#6A6A6A` |

| `--palette-text-secondary-disabled` | `#DDDDDD` |

| `--palette-text-secondary-error` | `#C13515` |

| `--palette-text-secondary-error-hover` | `#B32505` |

| `--typography-base-extra-small10px-font-size` | `0.625rem` |

| `--typography-base-extra-small10px-line-height` | `0.75rem` |

| `--typography-body-paragraphs-text_14_20-font-size` | `0.875rem` |

| `--typography-body-paragraphs-text_14_20-line-height` | `1.25rem` |

| `--typography-body-paragraphs-text_16_22-font-size` | `1rem` |

| `--typography-body-paragraphs-text_16_22-line-height` | `1.375rem` |

| `--typography-body-paragraphs-text_16_24-font-size` | `1rem` |

| `--typography-body-paragraphs-text_16_24-line-height` | `1.5rem` |

| `--typography-body-paragraphs-text_18_28-font-size` | `1.125rem` |

| `--typography-body-paragraphs-text_18_28-line-height` | `1.75rem` |

| `--typography-body-text_11_15-font-size` | `0.6875rem` |

| `--typography-body-text_11_15-line-height` | `0.9375rem` |

| `--typography-body-text_12_16-font-size` | `0.75rem` |

| `--typography-body-text_12_16-line-height` | `1rem` |

| `--typography-body-text_14_18-font-size` | `0.875rem` |

| `--typography-body-text_14_18-line-height` | `1.125rem` |

| `--typography-body-text_16_20-font-size` | `1rem` |

| `--typography-body-text_16_20-line-height` | `1.25rem` |

| `--typography-body-text_18_24-font-size` | `1.125rem` |

| `--typography-body-text_18_24-line-height` | `1.5rem` |

| `--typography-caption-text_12_16-font-size` | `0.75rem` |

| `--typography-caption-text_12_16-line-height` | `1rem` |

| `--typography-font-family-cereal-font-family` | `'Airbnb Cereal VF','Circular',-apple-system,'BlinkMacSystemFont','Roboto','He...` |

| `--typography-special-display-medium_40_44-font-size` | `2.5rem` |

| `--typography-special-display-medium_40_44-font-weight` | `600` |

| `--typography-special-display-medium_40_44-line-height` | `2.75rem` |

| `--typography-special-display-medium_48_54-font-size` | `3rem` |

| `--typography-special-display-medium_48_54-font-weight` | `600` |

| `--typography-special-display-medium_48_54-line-height` | `3.375rem` |

| `--typography-special-display-medium_60_68-font-size` | `3.75rem` |

| `--typography-special-display-medium_60_68-font-weight` | `600` |

| `--typography-special-display-medium_60_68-line-height` | `4.25rem` |

| `--typography-special-display-medium_72_74-font-size` | `4.5rem` |

| `--typography-special-display-medium_72_74-font-weight` | `600` |

| `--typography-special-display-medium_72_74-line-height` | `4.625rem` |

| `--typography-subtitles-book_14_18-font-size` | `0.875rem` |

| `--typography-subtitles-book_14_18-font-weight` | `400` |

| `--typography-subtitles-book_14_18-line-height` | `1.125rem` |

| `--typography-subtitles-book_16_22-font-size` | `1rem` |

| `--typography-subtitles-book_16_22-font-weight` | `400` |

| `--typography-subtitles-book_16_22-line-height` | `1.375rem` |

| `--typography-subtitles-book_18_24-font-size` | `1.125rem` |

| `--typography-subtitles-book_18_24-font-weight` | `400` |

| `--typography-subtitles-book_18_24-line-height` | `1.5rem` |

| `--typography-titles-medium_14_18-font-size` | `0.875rem` |

| `--typography-titles-medium_14_18-font-weight` | `500` |

| `--typography-titles-medium_14_18-line-height` | `1.125rem` |

| `--typography-titles-medium_16_20-font-size` | `1rem` |

| `--typography-titles-medium_16_20-font-weight` | `500` |

| `--typography-titles-medium_16_20-line-height` | `1.25rem` |

| `--typography-titles-medium_18_24-font-size` | `1.125rem` |

| `--typography-titles-medium_18_24-font-weight` | `500` |

| `--typography-titles-medium_18_24-line-height` | `1.5rem` |

| `--typography-titles-semibold_14_18-font-size` | `0.875rem` |

| `--typography-titles-semibold_14_18-font-weight` | `600` |

| `--typography-titles-semibold_14_18-line-height` | `1.125rem` |

| `--typography-titles-semibold_16_20-font-size` | `1rem` |

| `--typography-titles-semibold_16_20-font-weight` | `600` |

| `--typography-titles-semibold_16_20-line-height` | `1.25rem` |

| `--typography-titles-semibold_18_24-font-size` | `1.125rem` |

| `--typography-titles-semibold_18_24-font-weight` | `600` |

| `--typography-titles-semibold_18_24-line-height` | `1.5rem` |

| `--typography-titles-semibold_22_26-font-size` | `1.375rem` |

| `--typography-titles-semibold_22_26-font-weight` | `600` |

| `--typography-titles-semibold_22_26-line-height` | `1.625rem` |

| `--typography-titles-semibold_26_30-font-size` | `1.625rem` |

| `--typography-titles-semibold_26_30-font-weight` | `600` |

| `--typography-titles-semibold_26_30-line-height` | `1.875rem` |

| `--typography-titles-semibold_32_36-font-size` | `2rem` |

| `--typography-titles-semibold_32_36-font-weight` | `600` |

| `--typography-titles-semibold_32_36-line-height` | `2.25rem` |

| `--typography-weight-bold700` | `700` |

| `--typography-weight-book400` | `400` |

| `--typography-weight-medium500` | `500` |

| `--typography-weight-semibold600` | `600` |





## Color Palette



### Backgrounds



**Dark / Base**

- `#222222`

- `#e00b41`



**Light / Surface**

- `#dddddd`

- `#f2f2f2`

- `#ffffff`

- `#f7f7f7`



### Text



**Dark / Base**

- `#222222` (used 286x)



**Light / Surface**

- `#6a6a6a` (used 45x)

- `#ffffff` (used 14x)



**Vibrant / Accent**

- `#ff385c`



### Borders



**Dark / Base**

- `#222222`



**Light / Surface**

- `#dddddd`

- `#ebebeb`



**Primary accent**: `#e00b41`





## Typography



**Font stack**: Airbnb Cereal VF



| Role | Font | Size | Weight | Line Height | Tracking |

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

| Display / H1 | Airbnb Cereal VF | 28px | 700 | 40.04px | normal |

| H2 | Airbnb Cereal VF | 26px | 600 | 30px | -0.52px |

| H2 | Airbnb Cereal VF | 22px | 500 | 26px | -0.44px |

| H2 | Airbnb Cereal VF | 21px | 700 | 30.03px | normal |

| Body | Airbnb Cereal VF | 16px | 400 | 22px | normal |

| Body | Airbnb Cereal VF | 16px | 500 | 22px | normal |

| Body Small | Airbnb Cereal VF | 14px | 400 | 20.02px | normal |

| Body Small | Airbnb Cereal VF | 14px | 500 | 18px | normal |

| Caption | Airbnb Cereal VF | 12px | 500 | 16px | normal |

| Caption | Airbnb Cereal VF | 8px | 400 | 11.44px | normal |

| Caption | Airbnb Cereal VF | 8px | 700 | 10px | 0.32px |





## Spacing Scale



`2px` · `3px` · `4px` · `5px` · `6px` · `8px` · `10px` · `11px` · `12px` · `14px` · `15px` · `16px` · `20px` · `22px` · `24px` · `32px` · `35px` · `40px` · `48px` · `49px` · `80px` · `131px`





## Borders, Radii & Effects



**Border radius**: `50%`, `1.5px`, `4px`, `8px`, `10px 10px 10px 2px`, `12px`, `20px`, `32px`



**Shadows**:

- `rgba(60, 77, 107, 0.25) 0px 0.953955px 1.90791px 0px, rgba(60, 77, 107, 0.25) 0px 3.81582px 5.723...`

- `rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 8px 24px 0px`

- `rgba(0, 0, 0, 0.28) 0px 8px 28px 0px`



**Effects**:

- `filter: blur(0.131901px)`

- `filter: blur(0.659506px)`





## Component Patterns



### Buttons



- **"Become a host"** (ghost)

  - `background: transparent` · `color: #222222`

  - `font: 14px / 500`

  - `padding: 11px 12px` · `radius: 20px`



- **"Popular"** (ghost)

  - `background: transparent` · `color: #222222`

  - `font: 14px / 500`

  - `padding: 10px` · `radius: 8px`



### Inputs



- **search**: bg `transparent`, radius `0px`, padding `0px`





## Layout Patterns



### Grid

- `<div>` — 3 columns, gap `35px`

- `<div>` — 11 columns, gap `2px`

- `<ul>` — 6 columns, gap `24px 8px`

- `<div>` — 12 columns, gap `normal 16px`

- `<ul>` — 1 columns, gap `16px`



### Flexbox

- `<header>`, row, justify: space-between, align: center, (4 children)

- `<div>`, row, justify: space-between, align: center, gap: 12px, (3 children)

- `<nav>`, row, justify: flex-end, align: center, (2 children)

- `<div>`, row, (6 children)





## Assets



1 images, 11 SVG icons detected.



- `480px × 240px` (no alt) — `https://a0.muscache.com/im/pictures/AirbnbPlatformAssets/AirbnbPlat...`

