What is Airbnb's primary brand color?

Airbnb's brand color is Rausch — #ff385c, a coral-leaning red somewhere between fuchsia and tomato. It's used sparingly across just three of the system's 33 components: primary CTA buttons, the circular search orb at the right edge of the search bar, and the heart save state on property cards. Most pages are 90% white plus near-black ink, with Rausch acting as the visual voltage that focuses the eye on one action at a time.

Does Airbnb's design system have a dark mode?

No — Airbnb's public marketing and product surfaces are light-only. Canvas is pure #ffffff, surfaces step through three near-white fills (#f7f7f7, #ffffff card, #f2f2f2 strong), and text is deep ink #222222 rather than pure black. A native dark mode exists in the iOS and Android apps, but it isn't represented in this DESIGN.md, which captures the public web experience.

What typography does Airbnb use, and what should I use if Cereal isn't available?

Airbnb runs Airbnb Cereal VF, a custom variable typeface licensed only to Airbnb. The spec walks through 18 type tokens at modest weights (400–700), with display headlines deliberately small (22–28px) and a single typographically loud moment — the 64px rating display on listing pages. Inter is the closest open-source substitute; adjust line-heights down by ~2% to match Cereal's slightly tighter cap height.

Why does Airbnb use such modest display weights?

The brand trusts photography to carry visual weight, not typography. A homepage h1 at 28px / 700 would feel small on a typical SaaS page, but Airbnb tucks it under the search bar and lets the city collage and property cards above it pull the eye. The single loud typographic moment is the listing-page rating display (64px / 700) — rating numbers are a peak trust signal, so they get the loudest treatment in the system.

Can I use this DESIGN.md to build my own React marketplace?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Airbnb's restraint (single accent, soft radii, modest type) rather than a generic shadcn theme. You can also reference the tokens directly: every color, type style, radius, and spacing value in the spec is a quoted value you can paste into Tailwind config, CSS variables, or your own component library.

What's missing from this DESIGN.md spec?

A handful of things, documented in the Known Gaps section of the file: hover-state colors (the system has a single subtle elevation lift on cards that's hard to extract reliably), loading skeletons, the search-results map tile style, full input error-state combinations, and the sub-brand palettes for Airbnb Luxe (#460479) and Plus (#92174d), which live on separate sub-domains. The spec captures roughly 95% of the public marketing and product surfaces.

Airbnb Design System

Airbnb's design system as a DESIGN.md file.

About Airbnb DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source airbnb.com

Travel & Hospitality
Marketplaces

Airbnb's design system is built around one idea: restraint. One brand color (Rausch, #ff385c). One custom typeface (Airbnb Cereal VF). One soft 14px corner on most surfaces. No second accent in the marketing site. The brand leans on photography and white space, not on bold type.

This page packages all of that into a single DESIGN.md file. Inside: 23 colors, 18 type styles, 9 spacing values, 9 corner radii, and 33 components — every piece you need to build something that looks like Airbnb.

Download the file and feed it to Claude, Cursor, or GitHub Copilot. The AI writes React components and Tailwind classes that match Airbnb's voice — not a generic e-commerce theme. Or just use it as a reference for your own work.

What makes it distinct

Single accent voltageRausch (#ff385c) used in just 3 of 33 components, never as a secondary
Modest type weightsdisplay headlines sit at 22–28px / 500–700, not the heavy weights fintech leans on
Soft 14px base radiusevery interactive surface is rounded; the only sharp edges are body grid lines
No dark mode in mainline marketingphotography and pure white #ffffff canvas carry the visual weight
One typographically loud momentthe 64px rating display on listing pages, the system's peak trust signal

Live at airbnb.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

airbnb.com

Explore Airbnb

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Airbnb design system FAQ

Common questions about Airbnb's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives.

Use Airbnb in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→