Airbnb design system

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.

Captured 12 June 2026Light UI1,026 elements read

Download tokens Read it yourself

Airbnb colors

The brand roles and neutrals airbnb.com renders, with how many elements use each one.

Brand colors

Primary#ff385c14 uses
Secondary#e00b411 uses

Neutrals

#2222221,262 uses
#6a6a6a416 uses
#000000335 uses
#ffffff26 uses
#dddddd6 uses
#ebebeb4 uses

Backgrounds

#ffffff
#ebebeb
#000000
#f7f7f7

Text colors

#00000021:1 on #ffffff
#22222215.91:1 on #ffffff
#ff385c3.52:1 on #ffffff
#ffffff1:1 on #ffffff
#6a6a6a5.41:1 on #ffffff

Airbnb fonts and type scale

Every font family and size in use, read from computed styles rather than the CSS source.

Font families

Airbnb Cereal VF: sans, most text (859 elements)

Body text: 14px at weight 400, line height 20.02px.

Weights in use: 400, 500, 700.

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 and radii

Spacing scale

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

Corner radii

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

Medium radii lead, with a few larger ones. 2 distinct box shadows.

Motion

The motion reads as mixed.

Durations

xs: 100ms
sm: 175ms
md: 300ms
xxl: 451754000ms

Easing

custom (54 uses): cubic-bezier(0.2, 0, 0, 1)
ease-in-out (2 uses): cubic-bezier(0, 0, 1, 1)
linear (2 uses): linear

Design system audit

designlang scores how consistently a site uses its own values. How the audit works.

Overall

91/100, grade A

Components found: buttons (26), inputs (1), links (141), navigation (2), footer (1), tabs (10).

By category

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

271 !important rules — prefer specificity over overrides
98% of CSS is unused — consider purging
21818 duplicate CSS declarations

Download the tokens

The files designlang wrote for airbnb.com. Run it yourself for a fresh read: npx designlang airbnb.com.

The core values as CSS variables

: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;
}

Read airbnb.com yourself

Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.

Get started CLI reference

Brands with a similar design

All design systems

Tailwind CSS design system

Light UI, inter, #ec0853

Anthropic design system

Light UI, Anthropic Sans, #d97757

Postman design system

Light UI, inter, #e05320

Mintlify design system

Light UI, inter, #faf8f5

Quick answers

What font does Airbnb use?

airbnb.com sets most of its text in Airbnb Cereal VF (859 elements). designlang read this from the computed styles of the live page on 12 June 2026.

What are Airbnb's brand colors?

The brand roles on airbnb.com are primary #ff385c and secondary #e00b41, on a #ffffff background. The neutrals used most are #222222, #6a6a6a and #000000.

How do I use the Airbnb design system in my own app?

Download the DTCG tokens, Tailwind config or CSS variables on this page, or run npx designlang airbnb.com for a fresh read. To apply the look to an existing repo, Retheme maps the tokens onto your Tailwind or shadcn theme and opens a pull request.

Is this the official design system?

No. It is measured from airbnb.com's public pages on 12 June 2026, so it shows what the site renders, not Airbnb's internal source files. Airbnb is a trademark of its owner and is not affiliated with designlang.

Measured from the public pages of airbnb.com on 12 June 2026. Airbnb is a trademark of its owner; designlang is not affiliated with it. More: the full Airbnb brand kit, the token extraction guide and the markdown version of this page.