W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Airbnb
Airbnb is a global marketplace for short-term lodging and travel experiences, founded in 2008. The brand voice is warm, welcoming, and human — "belong anywhere." Visually, Airbnb is anchored on Rausch (#FF5A5F), the warm pink-red introduced with the 2014 Bélo rebrand by DesignStudio. Rausch carries the brand against generous use of photography, warm whites, and the proprietary Airbnb Cereal typeface. The Bélo mark itself is monochrome; Rausch reads as the voice surrounding it.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/airbnb/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/airbnb/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Airbnb
Airbnb is a global marketplace for short-term lodging and travel experiences, founded in 2008. The brand voice is warm, welcoming, and human — "belong anywhere." Visually, Airbnb is anchored on Rausch (#FF5A5F), the warm pink-red introduced with the 2014 Bélo rebrand by DesignStudio. Rausch carries the brand against generous use of photography, warm whites, and the proprietary Airbnb Cereal typeface. The Bélo mark itself is monochrome; Rausch reads as the voice surrounding it.
Tags: hospitality, travel, airbnb, rausch, warm, marketplace
Atoms
Palette
Airbnb · [email protected] · Proprietary — All Rights Reserved
Airbnb's brand palette, anchored on the signature Rausch (#FF5A5F) — the warm pink-red introduced with the 2014 Bélo rebrand and retained as the primary brand color across airbnb.com, the mobile apps, and Airbnb's marketing. Rausch reads as the brand voice; the rest of the system is built on warm neutrals so photography and Rausch can carry the visual weight.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Airbnb Cereal ([email protected]) |
Proprietary — All Rights Reserved | sans-serif |
body |
Airbnb Cereal ([email protected]) |
Proprietary — All Rights Reserved | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
airbnb-rausch |
Airbnb Rausch | #FF5A5F |
airbnb-rausch-hover |
Airbnb Rausch Hover | #E94A4F |
airbnb-white |
Airbnb White | #FFFFFF |
airbnb-near-white |
Airbnb Near-White | #F7F7F7 |
airbnb-text-primary |
Airbnb Text Primary | #222222 |
airbnb-text-secondary |
Airbnb Text Secondary | #717171 |
airbnb-text-tertiary |
Airbnb Text Tertiary | #B0B0B0 |
airbnb-divider |
Airbnb Divider | #EBEBEB |
airbnb-canvas-dark |
Airbnb Canvas Dark | #1A1A1A |
airbnb-surface-dark |
Airbnb Surface Dark | #2B2B2B |
airbnb-success |
Airbnb Success | #008A05 |
airbnb-warning |
Airbnb Warning | #C13515 |
airbnb-error |
Airbnb Error | #C13515 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
airbnb-white |
#FFFFFF |
surface |
airbnb-near-white |
#F7F7F7 |
surface-elevated |
airbnb-white |
#FFFFFF |
text-primary |
airbnb-text-primary |
#222222 |
text-secondary |
airbnb-text-secondary |
#717171 |
text-tertiary |
airbnb-text-tertiary |
#B0B0B0 |
primary |
airbnb-rausch |
#FF5A5F |
primary-hover |
airbnb-rausch-hover |
#E94A4F |
accent |
airbnb-rausch |
#FF5A5F |
accent-hover |
airbnb-rausch-hover |
#E94A4F |
warning |
airbnb-warning |
#C13515 |
warning-hover |
airbnb-warning |
#C13515 |
error |
airbnb-error |
#C13515 |
success |
airbnb-success |
#008A05 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
airbnb-canvas-dark |
#1A1A1A |
surface |
airbnb-surface-dark |
#2B2B2B |
surface-elevated |
airbnb-surface-dark |
#2B2B2B |
text-primary |
airbnb-white |
#FFFFFF |
text-secondary |
airbnb-text-tertiary |
#B0B0B0 |
text-tertiary |
airbnb-text-secondary |
#717171 |
primary |
airbnb-rausch |
#FF5A5F |
primary-hover |
airbnb-rausch-hover |
#E94A4F |
accent |
airbnb-rausch |
#FF5A5F |
accent-hover |
airbnb-rausch-hover |
#E94A4F |
warning |
airbnb-warning |
#C13515 |
warning-hover |
airbnb-warning |
#C13515 |
error |
airbnb-error |
#C13515 |
success |
airbnb-success |
#008A05 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
airbnb-rausch |
#FF5A5F |
on-identity |
airbnb-white |
#FFFFFF |
primary |
airbnb-rausch |
#FF5A5F |
primary-hover |
airbnb-rausch-hover |
#E94A4F |
accent |
airbnb-rausch |
#FF5A5F |
accent-hover |
airbnb-rausch-hover |
#E94A4F |
success |
airbnb-success |
#008A05 |
warning |
airbnb-warning |
#C13515 |
error |
airbnb-error |
#C13515 |
background-light |
airbnb-white |
#FFFFFF |
background-dark |
airbnb-canvas-dark |
#1A1A1A |
surface-light |
airbnb-near-white |
#F7F7F7 |
surface-dark |
airbnb-surface-dark |
#2B2B2B |
text-primary-light |
airbnb-text-primary |
#222222 |
text-primary-dark |
airbnb-white |
#FFFFFF |
text-secondary-light |
airbnb-text-secondary |
#717171 |
divider |
airbnb-divider |
#EBEBEB |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (8)
colorChoice → logo.mark
- allowed: airbnb-rausch, airbnb-white, airbnb-text-primary
- forbidden: any-non-brand-color
The Bélo mark is rendered in Rausch on light surfaces, in Rausch on dark surfaces where contrast permits, or in monochrome white/near-black variants. Recoloring Rausch into off-brand hues violates Airbnb's brand-use guidance.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant, placed-without-clearspace
The Bélo's reading depends on respect for its custom proportions and clearspace. Airbnb's press kit forbids stretching, rotating, or recoloring the mark.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
WCAG 2.1 Level AA contrast minimum for body text. Airbnb Text Primary (#222222) on Airbnb White (#FFFFFF) clears AA comfortably.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
3 - standard:
WCAG-AA-large
Rausch (#FF5A5F) on white meets WCAG AA at large-text size; CTA buttons and primary affordances must clear 3:1.
variantSelection → logo
- use:
belo-light - when:
backgroundColorScheme="dark"
On dark surfaces, use the Bélo in white. Do not invert the Rausch fill on the fly.
variantSelection → logo
- use:
belo-rausch - when:
backgroundColorScheme="light"
On light surfaces, the Bélo renders in Rausch. The mark on the canonical airbnb.com surface is Rausch, not monochrome.
contextRestriction → roles.colors.identity
- forbiddenContexts: product-of-competitor, merchandise, endorsement-implication
Airbnb's brand-use guidance restricts use of the Bélo and Rausch in ways that imply affiliation, on competing-product surfaces, or on third-party merchandise without explicit license.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Airbnb-skinned surfaces must clear AA on body text.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 500, 600, 700, 800
Airbnb Cereal ships with discrete weights Light (300), Book (400), Medium (500), Semi-Bold (600), Bold (700), and Extra-Bold (800). Headlines on airbnb.com sit in the 500–800 band; lighter weights compromise the confident, warm-but-precise voice.
Provenance
- Source: https://news.airbnb.com/press-kit/
- License:
Proprietary — All Rights Reserved - Attribution: Airbnb and the Bélo (the Airbnb mark) are trademarks of Airbnb, Inc. Rausch (#FF5A5F) is verified via the simple-icons brand database, which cites airbnb.com as the source. Airbnb Cereal is a proprietary typeface commissioned from Dalton Maag for Airbnb.
- Imported:
2026-05-17 - Notes: Airbnb's broader original Design Language System catalogues additional named colors (Babu, Arches, Hof, Foggy) in widely-cited secondary literature; those hex values are not currently surfaced in Airbnb's primary public press kit, so brand-atoms catalogues only verified Rausch plus authored neutral surfaces. The Cereal typeface is referenced here with a public-web fallback to Inter when the licensed file is unavailable (see fonts/airbnb-cereal/1.0.0/atom.yaml).
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Airbnb
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Airbnb
A clear hierarchy in Airbnb's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
Airbnb
[email protected]font · heading
Airbnb Cereal
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Airbnb Cereal
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ airbnb-rausch #FF5A5F accent-hover
→ airbnb-rausch-hover #E94A4F background-dark
→ airbnb-canvas-dark #1A1A1A background-light
→ airbnb-white #FFFFFF divider
→ airbnb-divider #EBEBEB error
→ airbnb-error #C13515 identity
→ airbnb-rausch #FF5A5F on-identity
→ airbnb-white #FFFFFF primary
→ airbnb-rausch #FF5A5F primary-hover
→ airbnb-rausch-hover #E94A4F success
→ airbnb-success #008A05 surface-dark
→ airbnb-surface-dark #2B2B2B surface-light
→ airbnb-near-white #F7F7F7 text-primary-dark
→ airbnb-white #FFFFFF text-primary-light
→ airbnb-text-primary #222222 text-secondary-light
→ airbnb-text-secondary #717171 warning
→ airbnb-warning #C13515 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Airbnb Cereal prose
→ body Airbnb Cereal Palette mode mappings (from airbnb)
Light mode (14 roles)
accent
→ airbnb-rausch accent-hover
→ airbnb-rausch-hover background
→ airbnb-white error
→ airbnb-error primary
→ airbnb-rausch primary-hover
→ airbnb-rausch-hover success
→ airbnb-success surface
→ airbnb-near-white surface-elevated
→ airbnb-white text-primary
→ airbnb-text-primary text-secondary
→ airbnb-text-secondary text-tertiary
→ airbnb-text-tertiary warning
→ airbnb-warning warning-hover
→ airbnb-warning Dark mode (14 roles)
accent
→ airbnb-rausch accent-hover
→ airbnb-rausch-hover background
→ airbnb-canvas-dark error
→ airbnb-error primary
→ airbnb-rausch primary-hover
→ airbnb-rausch-hover success
→ airbnb-success surface
→ airbnb-surface-dark surface-elevated
→ airbnb-surface-dark text-primary
→ airbnb-white text-secondary
→ airbnb-text-tertiary text-tertiary
→ airbnb-text-secondary warning
→ airbnb-warning warning-hover
→ airbnb-warning Rules (9 typed constraints)
error · 8 rules
colorChoice logo.mark allowed airbnb-rausch, airbnb-white, airbnb-text-primary forbidden any-non-brand-color The Bélo mark is rendered in Rausch on light surfaces, in Rausch on dark surfaces where contrast permits, or in monochrome white/near-black variants. Recoloring Rausch into off-brand hues violates Airbnb's brand-use guidance.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant, placed-without-clearspace The Bélo's reading depends on respect for its custom proportions and clearspace. Airbnb's press kit forbids stretching, rotating, or recoloring the mark.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA WCAG 2.1 Level AA contrast minimum for body text. Airbnb Text Primary (#222222) on Airbnb White (#FFFFFF) clears AA comfortably.
contrastRatio roles.colors.primary against background minRatio 3 standard WCAG-AA-large Rausch (#FF5A5F) on white meets WCAG AA at large-text size; CTA buttons and primary affordances must clear 3:1.
variantSelection logo use belo-light when backgroundColorScheme="dark" On dark surfaces, use the Bélo in white. Do not invert the Rausch fill on the fly.
variantSelection logo use belo-rausch when backgroundColorScheme="light" On light surfaces, the Bélo renders in Rausch. The mark on the canonical airbnb.com surface is Rausch, not monochrome.
contextRestriction roles.colors.identity forbiddenContexts product-of-competitor, merchandise, endorsement-implication Airbnb's brand-use guidance restricts use of the Bélo and Rausch in ways that imply affiliation, on competing-product surfaces, or on third-party merchandise without explicit license.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Airbnb-skinned surfaces must clear AA on body text.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 500, 600, 700, 800 Airbnb Cereal ships with discrete weights Light (300), Book (400), Medium (500), Semi-Bold (600), Bold (700), and Extra-Bold (800). Headlines on airbnb.com sit in the 500–800 band; lighter weights compromise the confident, warm-but-precise voice.
Provenance
- Source
- https://news.airbnb.com/press-kit/
- License
Proprietary — All Rights Reserved- Attribution
- Airbnb and the Bélo (the Airbnb mark) are trademarks of Airbnb, Inc. Rausch (#FF5A5F) is verified via the simple-icons brand database, which cites airbnb.com as the source. Airbnb Cereal is a proprietary typeface commissioned from Dalton Maag for Airbnb.
- Imported
2026-05-17- Notes
- Airbnb's broader original Design Language System catalogues additional named colors (Babu, Arches, Hof, Foggy) in widely-cited secondary literature; those hex values are not currently surfaced in Airbnb's primary public press kit, so brand-atoms catalogues only verified Rausch plus authored neutral surfaces. The Cereal typeface is referenced here with a public-web fallback to Inter when the licensed file is unavailable (see fonts/airbnb-cereal/1.0.0/atom.yaml).