Airbnb Design System
Light · Generated 13/04/2026 · 23 colors · 29 type tokens · 27 spacing steps · 8 motion tokens
v1.0.0
Color Palette
Background Colors
Near Black
#222222
Pure Black
#000000
White
#FFFFFF
Light Border
#DDDDDD
Surface Light
#F2F2F2
Mid Tone
#B0B0B0
Off White
#F7F7F7
Faint Gray
#EBEBEB
Brand Dark
#E00B41
Text Colors
Text Secondary
#6A6A6A
Text Muted
#C1C1C1
Brand / Rausch
#FF385C
Shadow Colors
Shadow Overlay
rgba(60,77,107,0.25)
Deep Navy
#001C40
Light Blue
#D7EBFF
Fill & Gradient Colors
Warm Tint
#FFF8DF
Warm Tint Light
rgba(255,254,224,0.2)
Blue Slate
#3E567C
Blue Slate 2
#3A5475
Blue Dark
#2D3C5B
Blue Mid
#809DC0
Blue Mist
rgba(191,205,213,0.9)
Typography
Primary · Airbnb Cereal VF
Airbnb Cereal
Where will you go next?
Regular · 400 Medium · 500 Semibold · 600 Bold · 700
Fallback · Times (detected)
Times Serif
Book your perfect stay today.
Regular · 400 Bold · 700
Belong anywhere
5xl · 28px · Bold · letter-spacing: −0.44px
Find unique places to stay
4xl · 22px · Bold · letter-spacing: −0.44px
Experiences, not just accommodation
2xl · 20px · Semibold
Explore thousands of unique stays, from cosy cottages to beachfront villas.
xl · 16px · Regular · text secondary
5 guests · 3 bedrooms · 3 beds · 2 baths
lg · 14px · Regular
Last updated · 4.85 (128 reviews)
base · 13px · Regular
ENTIRE HOME · SUPERHOST · PLUS
sm · 12px · Semibold · uppercase · letter-spacing: 0.32px
Line Heights
Tight
10px
Snug
11.44px
Normal
13px
Relaxed
16px
Loose
18px
lh-6
20px
lh-7
24px
lh-8
26px
lh-9
30px
lh-10
40px
Letter Spacing
Tighter tracking
Tight
−0.44px · display, hero text
Default tracking
Normal
−0.18px · body, paragraphs
WIDE TRACKING
Wide
0.32px · labels, tags, uppercase
Spacing
Spacing Scale
27 tokens — 2px → 130.9px
2
2.5
3
4
5
5.5
6
8
9.5
10
11
12.5
15
16
20
22
24
26.5
28
32
35
40
48
49
53
80
131
Borders
Border Widths
--border-width-hairline
1px · ×117
--border-width-thin
2px · ×8
--border-width-base
3px · ×60
Border Radii
radius-lg
4px
radius-xl
8px
radius-2xl
9px
radius-r7
14px
radius-r8
20px
radius-r9
32px
radius-r10
50px
radius-full
50%
radius-r12
100px
Shadow / Elevation
--shadow-sm
×32 uses · Card elevation
--shadow-md
×15 uses · Hover state
--shadow-lg
×2 uses · Premium button
--shadow-xl
×1 use · Modal / Popover
Z-Index
TokenValueTypical use
--z-1-3Behind-page overlays, background layers
--z-2-2Deep background elements
--z-3-1Below-content decorative elements
--z-41Raised content, cards
--z-52Sticky headers, filters
--z-63Dropdowns, popovers
--z-7100Modals, dialogs
--z-82001Toasts, critical overlays
Breakpoints

61 breakpoints extracted — Airbnb uses a dense, fluid responsive grid covering 200px mobile to 2560px wide screens.

TokenValue
--breakpoint-xs200px
--breakpoint-sm220px
--breakpoint-md299px
--breakpoint-lg300px
--breakpoint-xl320px
--breakpoint-2xl330px
--breakpoint-3xl344px
--breakpoint-bp-8375px
--breakpoint-bp-9376px
--breakpoint-bp-10395px
--breakpoint-bp-11400px
--breakpoint-bp-12403px
--breakpoint-bp-13412px
--breakpoint-bp-14420px
--breakpoint-bp-15429px
--breakpoint-bp-16431px
--breakpoint-bp-17440px
--breakpoint-bp-18450px
--breakpoint-bp-19474px
--breakpoint-bp-20475px
TokenValue
--breakpoint-bp-21479.99px
--breakpoint-bp-22480px
--breakpoint-bp-23481px
--breakpoint-bp-24499px
--breakpoint-bp-25500px
--breakpoint-bp-26550px
--breakpoint-bp-27551px
--breakpoint-bp-28568px
--breakpoint-bp-29600px
--breakpoint-bp-30650px
--breakpoint-bp-31660px
--breakpoint-bp-32667px
--breakpoint-bp-33680px
--breakpoint-bp-34700px
--breakpoint-bp-35743px
--breakpoint-bp-36744px
--breakpoint-bp-37768px
--breakpoint-bp-38800px
--breakpoint-bp-39880px
--breakpoint-bp-40895px
TokenValue
--breakpoint-bp-41916px
--breakpoint-bp-42949px
--breakpoint-bp-43950px
--breakpoint-bp-441024px
--breakpoint-bp-451028px
--breakpoint-bp-461127px
--breakpoint-bp-471127.99px
--breakpoint-bp-481128px
--breakpoint-bp-491194px
--breakpoint-bp-501238px
--breakpoint-bp-511240px
--breakpoint-bp-521280px
--breakpoint-bp-531348px
--breakpoint-bp-541440px
--breakpoint-bp-551600px
--breakpoint-bp-561735px
--breakpoint-bp-571760px
--breakpoint-bp-581880px
--breakpoint-bp-591920px
--breakpoint-bp-602120px
--breakpoint-bp-612560px
Opacity
--opacity-30
0.3 · 30% · ×2
--opacity-40
0.4 · 40% · ×4
--opacity-50
0.5 · 50% · ×5
Accessibility

WCAG 2.1 contrast ratios between most-used text and background color pairs. AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1.

Text ColorBackgroundRatioWCAG Rating
--color-mid-gray (#6A6A6A)--color-dark-gray (#222222)2.94:1Fail
--color-mid-gray (#6A6A6A)--color-black (#000000)3.88:1AA Large
--color-mid-gray (#6A6A6A)--color-white (#FFFFFF)5.41:1AA
--color-mid-gray (#6A6A6A)--color-light-gray-2 (#DDDDDD)3.98:1AA Large
--color-mid-gray (#6A6A6A)--color-light-gray-3 (#F2F2F2)4.83:1AA
--color-light-gray (#C1C1C1)--color-dark-gray (#222222)8.84:1AAA
--color-light-gray (#C1C1C1)--color-black (#000000)11.67:1AAA
--color-light-gray (#C1C1C1)--color-white (#FFFFFF)1.80:1Fail
--color-light-gray (#C1C1C1)--color-light-gray-2 (#DDDDDD)1.33:1Fail
--color-light-gray (#C1C1C1)--color-light-gray-3 (#F2F2F2)1.61:1Fail
--color-red (#FF385C)--color-dark-gray (#222222)4.52:1AA
--color-red (#FF385C)--color-black (#000000)5.97:1AA
--color-red (#FF385C)--color-white (#FFFFFF)3.52:1AA Large
--color-red (#FF385C)--color-light-gray-2 (#DDDDDD)2.59:1Fail
--color-red (#FF385C)--color-light-gray-3 (#F2F2F2)3.14:1AA Large
CSS Variables Reference
Colors12 tokens
Near Black--color-dark-gray#222222
Pure Black--color-black#000000
White--color-white#FFFFFF
Light Border--color-light-gray-2#DDDDDD
Surface Light--color-light-gray-3#F2F2F2
Off White--color-white-2#F7F7F7
Faint Gray--color-light-gray-4#EBEBEB
Mid Tone--color-mid-gray-2#B0B0B0
Text Secondary--color-mid-gray#6A6A6A
Text Muted--color-light-gray#C1C1C1
Rausch (Brand)--color-red#FF385C
Brand Dark--color-red-2#E00B41
Typography17 tokens
Font Size 2xs--font-size-2xs8px
Font Size xs--font-size-xs11px
Font Size sm--font-size-sm12px
Font Size base--font-size-base13px
Font Size lg--font-size-lg14px
Font Size xl--font-size-xl16px
Font Size 2xl--font-size-2xl20px
Font Size 5xl--font-size-5xl28px
Weight Regular--font-weight-regular400
Weight Medium--font-weight-medium500
Weight Semibold--font-weight-semibold600
Weight Bold--font-weight-bold700
Letter Spacing Tight--letter-spacing-tight-0.44px
Letter Spacing Normal--letter-spacing-normal-0.18px
Letter Spacing Wide--letter-spacing-wide0.32px
Font Family Base--font-family-basesystem-ui
Font Family 2--font-family-2Airbnb Cereal VF
Spacing27 tokens
Space 1--space-12px
Space 4--space-44px
Space 8--space-86px
Space 10--space-108px
Space 16--space-1610px
Space 48--space-4816px
Space 64--space-6420px
Space 96--space-9624px
Space 192--space-19232px
Space 23--space-2340px
Space 24--space-2448px
Space 27--space-2780px
Borders, Shadows & Motion15 tokens
Border Hairline--border-width-hairline1px
Border Thin--border-width-thin2px
Border Base--border-width-base3px
Radius lg--radius-lg4px
Radius xl--radius-xl8px
Radius r8--radius-r820px
Radius full--radius-full50%
Shadow sm--shadow-sm4-layer
Shadow md--shadow-md2-layer
Shadow xl--shadow-xl2-layer
Duration instant--duration-instant0.1s
Duration slow--duration-slow0.2s
Duration slower--duration-slower0.25s
Opacity 30--opacity-300.3
Opacity 50--opacity-500.5