Rausch
#ff385cRed decorative accent for icons, marks, and small graphic details. Do not promote it to the primary CTA color
Airbnb
airbnb.comWebsite preview
The design language
Airbnb operates on a white-canvas, photograph-first vocabulary: nearly every screen is a quiet monochrome frame that lets full-bleem property imagery carry the experience, with a single saturated coral-red accent (Rausch) as the only chromatic punctuation for action. Typography is set in a custom geometric sans (Airbnb Cereal VF) at mostly small, confident sizes — 14px body, 16px UI, 22–28px section titles — with tight negative tracking and generous line-height that keeps dense listing cards readable. The interface is flat, borderless, and rounded: 12–14px radii on cards and controls, pill-shaped circular buttons, and soft layered shadows only for elevated overlays like the search bar. Everything else — cards, list items, links — relies on whitespace and hairlines rather than chrome.
Color palette
brand
Rausch 600
#e00b41Pressed and dark-state variant of Rausch for hover/active surfaces of the brand accent
neutral
Hof
#222222Primary text, body copy, headings, icon strokes, and inverse backgrounds — a near-black neutral that anchors the entire achromatic system
Foggy
#6a6a6aSecondary text, muted labels, helper copy, disabled icon fills, and subdued metadata beneath card titles
Grey 500
#c1c1c1Disabled text, placeholder text in inputs, and muted icon strokes where state de-emphasis is required
Bebe
#ebebebHairline borders, input underlines, dividers between list rows, and subtle separator lines
Deco
#ddddddCard surface backgrounds for muted containers, skeleton placeholders, and disabled card states
Faint
#f7f7f7Page canvas background, footer surface, and hover state for interactive surfaces — the soft off-white that sets the page apart from pure white cards
White
#ffffffElevated card surfaces, input fields, modals, and the primary surface against the off-white canvas
Typography
Type scale
Minor Second (1.067) · 16px baseheading
28px · 700 · 1.43 · 0px trackingThe quick brown fox jumps
heading-sm
22px · 500 · 1.18 · -0.44px trackingThe quick brown fox jumps
text-21
21px · 700 · 1.43The quick brown fox jumps
subheading
20px · 600 · 1.2 · -0.18px trackingThe quick brown fox jumps
ui
16px · 500 · 1.25 · 0px trackingThe quick brown fox jumps
text-14
14px · 400 · 1.43The quick brown fox jumps
text-13
13px · 400 · 1.23The quick brown fox jumps
text-12
12px · 400 · 1.33The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Airbnb Cereal VF
- Weights
- 400, 500, 600, 700
- Sizes
- 11px, 12px, 13px, 14px, 16px, 20px, 21px, 22px, 28px
- Line height
- 1.18–1.43
- Letter spacing
- Display 22px: -0.0200em; body 20px: -0.0090em; all other sizes: normal
- Fallback
- Circular, Inter, or DM Sans
- Features
- "salt" on
Custom geometric sans designed for Airbnb. Body at 14px/400 carries most content; UI labels at 16px/500; section headings step up through 20px/600, 22px/500 with tight -0.02em tracking, and 28px/700 for page-level titles. Negative tracking tightens as size increases, a hallmark of geometric sans at display sizes. Activates the 'salt' alternate glyph feature.
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 4px
- Max width
- 1440px
- Section gap
- 48px
- Card padding
- 12px
- Element gap
- 12px
Border radius
cards
12pxbadges
9999pxinputs
8pxavatars
9999pxbuttons
9999pxsearch-bar
9999pxSpacing scale
2px3px4px5px6px8px10px11px12px13px15px16px18px20px24px28px32px35px40px44px48px80pxGuidelines
Do
- Set body text at 14px/400 in Hof (#222222) with 1.43 line-height — this is the content backbone.
- Use Rausch (#ff385c) exclusively for the brand logo, search submit, active wishlist hearts, and one primary action per surface. No other reds.
- Give all listing card images a 12px border-radius and let them overflow into the card edge — no padding between image and text below.
- Use border-radius: 9999px for the search bar, pill buttons, wishlist hearts, and circular icon buttons. Use 12px for listing cards and 8px for ghost buttons.
- Set section headings at 22px/500 with -0.0200em letter-spacing — the tight tracking is a geometric-sans signature at that size.
- Place the page canvas at #f7f7f7 and cards at #ffffff so elevation reads through value contrast, not just shadow.
- Keep property imagery full-bleed within its card frame — no margins, no decorative borders around photographs.
Don’t
- Don't introduce additional accent colors beyond Rausch — the 0% colorfulness of the interface is deliberate; every additional hue dilutes the brand.
- Don't use shadows on listing cards. The visual system uses flat surfaces with whitespace, not elevation, to separate content.
- Don't set body text below 12px — the scale bottoms out at 11px for badges only.
- Don't round corners at inconsistent radii — the system has exactly two sizes for cards (12px and 14px) and full-pill (9999px) for interactive controls.
- Don't use borders on listing cards. Separation comes from the off-white canvas vs white card surface, not from lines.
- Don't apply Rausch to text or decorative elements — it is an action color, not a brand paint color for backgrounds or headings.
- Don't use bold (700) for body or metadata text — 700 is reserved for the 28px page titles and 21px card-titles emphasis; everything else is 400–600.
Components
Search Bar (Floating Capsule)
Primary global search input — the signature element of the homepageFull-width rounded capsule (border-radius: 9999px), white surface (#ffffff), three segmented fields (Where, When, Who) separated by vertical dividers, 16px/500 labels with 14px/400 placeholder text in #6a6a6a. Surrounded by a layered shadow stack at 0/2/4/8px with decreasing opacity. Right-aligned circular submit button in Rausch (#ff385c), 48px diameter, white search icon, white-on-coral hover state. Container max-width approximately 880px, centered.
Property Listing Card
Repeating content card in horizontal scroll rowsRounded container at 12–14px radius, no border, white or transparent background. Image area is the full card width at roughly 1:1 aspect with 12px radius, overflowing slightly with the heart wishlist icon in the top-right corner. Title below in 14px/500 #222222, truncated to one line. Metadata line (host type, dates) in 14px/400 #6a6a6a. Price line in 14px/400 #222222 with the price in 14px/600 #222222. No padding between image and text — they share a 12px gutter.
Guest Favorite Badge
Trust badge overlay on listing imagesSmall white pill (border-radius: 9999px), white #ffffff background, 12px/600 text in #222222, positioned in the top-left of listing card images. Padding approximately 6px 12px. Subtle shadow to separate from the photograph.
Wishlist Heart Button
Save/favorite toggle on listing cardsCircular transparent button (border-radius: 9999px), no background fill, positioned absolute top-right of card image. Heart icon stroke in white when inactive, fill in Rausch (#ff385c) when active. 48px touch target, icon centered at approximately 20px.
Top Navigation Bar
Primary site navigationFixed top bar on white background, 80px height. Left: Airbnb logo in Rausch (#ff385c). Center: tab navigation (All, Homes, Experiences, Services) with icon + label pairs in 16px/500, active tab underlined with a 2px black (#222222) bar, inactive tabs in #6a6a6a. Right: 'Become a host' link in 14px/500 #222222, language globe icon, and hamburger menu button (circular, 40px, #f7f7f7 background).
Circular Nav Button
Icon-only navigation control for category tabsPerfectly round button (border-radius: 9999px), 40px diameter, #f7f7f7 background. Icon stroke in #222222 at 16px. Hover lifts to #ebebeb. Used for the hamburger menu and language selector in the top-right.
Pill Navigation Tab
Category selection tab in top navPill-shaped tab with icon + label, active state shows a 2px black underline beneath the icon. Inactive text in #6a6a6a, active in #222222. 16px/500. No background fill — sits directly on white.
Section Title with Arrow
Row heading for horizontal scroll sectionsTitle in 22px/500 #222222 with tight -0.02em tracking, followed by a right-pointing arrow icon in #222222 at the same baseline. No underline, no decoration — the arrow implies navigability. Right-aligned carousel arrows in circular 40px buttons with #f7f7f7 background and #222222 chevron.
Carousel Arrow Button
Horizontal scroll navigation for listing rowsCircular 32px button, white #ffffff background with subtle shadow, positioned vertically centered on the row. Chevron icon stroke in #222222. Disabled state: #c1c1c1 chevron, reduced opacity.
Ghost Outline Button
Secondary action buttonTransparent background, 1px solid #222222 border, #222222 text, border-radius: 8px, padding 0px 16px. 14px/500. No shadow. Hover: #f7f7f7 background fill.
Filled Inverse Button
Primary non-brand action buttonSolid #222222 background, white #ffffff text, border-radius: 8px, padding 0px 16px. 14px/500. Used where Rausch would be too loud for the action hierarchy.
Category Icon Button
Grid icon for browse-by-category navigationSquare or rectangular button (border-radius: 8px) with icon centered above label. Icon in #222222 at 24px, label in 12px/400 #6a6a6a. Transparent background. No border.
Footer Column Link
Secondary site links in footer14px/400 text in #6a6a6a, no underline, no padding. Hover: text color shifts to #222222. Arranged in multi-column grid with 12px row gap. Column headers in 14px/600 #222222.
Social Icon Link
Brand social links in footerCircular icon-only button (border-radius: 9999px), 32px, transparent background, icon stroke or fill in #222222. Inline horizontal row in footer.
Language/Currency Selector
Locale controls in footerInline text + icon pair, 14px/500 #222222, globe icon to the left. No background, no border. Sits between the copyright text and social icons at the very bottom of the page.
Surfaces & elevation
Level 0
Canvas
#f7f7f7Page background — soft off-white that recedes behind all content
Level 1
Card
#ffffffProperty listing cards, search inputs, navigation pills — the primary interactive surface
Level 2
Muted Surface
#ddddddSkeleton/placeholder card backgrounds and disabled card states
Level 3
Inverse
#222222Dark mode surfaces, inverse buttons, high-contrast overlays
Search bar
0px 0px 0px 1px rgba(0,0,0,0.02), 0px 2px 6px 0px rgba(0,0,0,0.04), 0px 4px 8px 0px rgba(0,0,0,0.10)
Elevated overlay (modal, popover)
0 8px 28px rgba(0,0,0,0.28)
Dropdown / menu
0 6px 20px rgba(0,0,0,0.2)
Tooltip
0 2px 4px rgba(0,0,0,0.18)
Layout & imagery
Layout
Full-bleed layout with no fixed max-width constraint — content stretches edge to edge within the viewport, with internal horizontal padding of approximately 40px on each side at desktop. The hero is the floating search capsule centered on a quiet white canvas with no hero image or headline — the search bar IS the hero. Below the search, the page flows into vertically stacked horizontal-scroll sections (4 rows visible: Popular homes, Great hotels, another city, Available next month), each at roughly 320px tall, separated by 48px vertical gaps. Each section uses a 7-up card grid with horizontal overflow and arrow navigation. The footer is a 3-column link grid on #f7f7f7 background, followed by a bottom bar with copyright, language/currency, and social icons. Navigation is a fixed top bar with centered tab navigation and right-aligned utility controls.
Imagery
Photography dominates the visual system — full-bleed property images are the primary content type. All photographs are warm, well-lit interior and exterior shots of real homes and hotels, treated with natural color grading (no heavy filters or duotones). Images are tightly cropped at 1:1 aspect ratio for listing cards, filling the card edge with no margin. Icons throughout the interface are outlined, monochrome (#222222 stroke, ~16–20px), used sparingly for navigation categories and UI controls. The logo is the only multicolor graphic element (Rausch). No illustrations, no 3D renders, no abstract graphics — the visual language is pure photography + minimal monochrome iconography on a soft white canvas.
Design notes
Agent Guide
**Quick Color Reference:** text: #222222 (Hof) · background: #ffffff (Card) / #f7f7f7 (Canvas) · border: #ebebeb (Bebe) · muted text: #6a6a6a (Foggy) · accent: #ff385c (Rausch) · primary action: no distinct CTA color **3–5 Example Component Prompts:** 1. **Create the search bar capsule:** Full-width white capsule, border-radius: 9999px, max-width 880px, centered on #f7f7f7 canvas. Three fields side by side: 'Where' label at 16px/500 #222222 with placeholder 'Search destinations' at 14px/400 #6a6a6a, 'When' label at 16px/500 #222222 with 'Add dates' at 14px/400 #6a6a6a, 'Who' label at 16px/500 #222222 with 'Add guests' at 14px/400 #6a6a6a. Right end: circular submit button 48px diameter, #ff385c (Rausch) background, white search icon. Shadow: 0px 0px 0px 1px rgba(0,0,0,0.02), 0px 2px 6px rgba(0,0,0,0.04), 0px 4px 8px rgba(0,0,0,0.10). 2. **Create a property listing card:** Card with no border, no shadow, white background. Image at top, 1:1 aspect, 12px border-radius, filling the card width. White 'Guest favorite' pill badge in top-left (border-radius: 9999px, 12px/600 #222222, padding 6px 12px). Transparent circular wishlist button in top-right (48px, heart icon stroke white, fill #ff385c when active). Below image: property name at 14px/500 #222222 truncated to one line, then metadata at 14px/400 #6a6a6a (e.g. 'Jul 31 – Aug 5 · Business host'), then price at 14px/400 #222222 with amount in 14px/600 #222222 and a star icon + rating at 14px/400 #222222. 3. **Create the top navigation bar:** Fixed header, 80px tall, white background. Left: Airbnb logo in #ff385c (Rausch). Center: four pill tabs — All, Homes, Experiences, Services — each with a 24px outlined icon above 12px/400 label. Active tab: #222222 text with 2px #222222 underline beneath icon. Inactive: #6a6a6a text. Right: 'Become a host' text link at 14px/500 #222222, then a circular globe icon button (40px, #f7f7f7 background, #222222 icon), then a circular hamburger menu button (40px, #f7f7f7 background, #222222 icon). 4. **Create a section title with carousel arrows:** Section title at left in 22px/500 #222222 with -0.0200em tracking, followed by a right-pointing arrow icon in #222222 at the same baseline. Right side: two circular arrow buttons (32px, white #ffffff background, subtle shadow), left chevron and right chevron in #222222, vertically centered on the row height. 5. **Create a footer link column:** Three-column grid of links on #f7f7f7 background. Each column starts with a header at 14px/600 #222222, followed by 6–8 links at 14px/400 #6a6a6a with 12px row spacing. Hover state: links transition to #222222. No underlines anywhere.
Similar brands
Booking.com
Same white-canvas approach with property-image-led cards, but Booking uses blue accents instead of coral
Vrbo
Same full-bleed photography card pattern in horizontal scroll rows, similar card radii and metadata hierarchy
Tripadvisor
Same image-first listing grid layout with title + metadata + price beneath, similar typographic scale
Linear
Same near-monochrome UI philosophy with one saturated accent color and geometric sans typography, though Linear is darker
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
