# Airbnb design system: colors, fonts and tokens

> Airbnb's website (airbnb.com) uses a light interface with #ff385c as its primary color and Airbnb Cereal VF as the main typeface. designlang measured 7 font sizes from 8px to 28px, 8 spacing values, 6 corner radii.

Source: https://airbnb.com, captured 12 June 2026. Page: https://designlang.app/design-system/airbnb

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#ff385c` | 14 |
| Secondary | `#e00b41` | 1 |

Neutrals: `#222222`, `#6a6a6a`, `#000000`, `#ffffff`, `#dddddd`, `#ebebeb`

Backgrounds: `#ffffff`, `#ebebeb`, `#000000`, `#f7f7f7`

## Fonts

- Airbnb Cereal VF (sans), 859 elements

## Type scale

| Size | Weight | Line height | Tracking | Used on |
|---|---|---|---|---|
| 28px | 700 | 40.04px | normal | h1 |
| 22px | 500 | 26px | -0.44px | h2 |
| 21px | 700 | 30.03px | normal | h2 |
| 16px | 400 | normal | normal | html, head, meta, link |
| 14px | 400 | 20.02px | normal | body, div, a, svg |
| 12px | 500 | 16px | normal | div |
| 8px | 400 | 11.44px | normal | span |

## Spacing

2px, 15px, 20px, 32px, 35px, 48px, 80px, 131px

## Radii

2px, 8px, 20px, 32px, 50px, 100px

## Motion

Feel: mixed. Durations: 100ms, 175ms, 300ms, 451754000ms.

## Audit

Overall 91/100 (grade A).

- Color Discipline: 100/100
- Typography Consistency: 100/100
- Spacing System: 85/100
- Shadow Consistency: 100/100
- Border Radius Consistency: 90/100
- Accessibility: 100/100
- CSS Tokenization: 100/100

## CSS variables

```css
:root {
  --color-primary: #ff385c;
  --color-secondary: #e00b41;
  --color-background: #ffffff;
  --color-text: #000000;
  --color-neutral-1: #222222;
  --color-neutral-2: #6a6a6a;
  --color-neutral-3: #000000;
  --color-neutral-4: #ffffff;
  --font-primary: "Airbnb Cereal VF", sans-serif;
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-lg: 20px;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/airbnb-com/airbnb-com-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/airbnb-com/airbnb-com-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/airbnb-com/airbnb-com-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/airbnb-com/airbnb-com-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/airbnb-com/airbnb-com-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/airbnb-com/airbnb-com-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/airbnb-com/airbnb-com-DESIGN.md)
- [Brand book PDF](https://designlang.app/gallery/airbnb-com/airbnb-com.brand.pdf)

Regenerate: `npx designlang airbnb.com`