Airbnb

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/airbnb.com -->
<!-- Extracted: 2026-04-26T13:11:06.024Z | Schema: v1 | Quality: 90/100 -->
---
version: alpha
name: "Airbnb"
description: "Airbnb projects a sophisticated yet accessible vibe, emphasizing global reach and diverse travel experiences. It feels trustworthy and efficient, guiding users through a vast selection of accommodations with clear, concise communication."
colors:
  primary: "#222222"
  secondary: "#6a6a6a"
  tertiary: "#c13515"
  neutral: "#6a6a6a"
  surface: "#ffffff"
  on-surface: "#222222"
  on-surface-secondary: "#6a6a6a"
  border: "#222222"
  link: "#222222"
  error: "#fff8f6"
  warning: "#e07912"
  success: "#008a05"
  info: "#428bff"
typography:
  display-lg:
    fontFamily: "Airbnb Cereal VF"
    fontSize: "28px"
    fontWeight: "700"
    lineHeight: "40.04px"
  headline-lg:
    fontFamily: "Airbnb Cereal VF"
    fontSize: "22px"
    fontWeight: "500"
    lineHeight: "26px"
    letterSpacing: "-0.44px"
  headline-md:
    fontFamily: "Airbnb Cereal VF"
    fontSize: "14px"
    fontWeight: "500"
    lineHeight: "18px"
  body-md:
    fontFamily: "Airbnb Cereal VF"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "20.02px"
rounded:
  md: "50px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-secondary:
    backgroundColor: "#f2f2f2"
    textColor: "#222222"
    rounded: "50%"
    padding: "0px"
    fontSize: "14px"
    fontWeight: "400"
    borderColor: "#222222"
---

# Airbnb — Design System

## Overview

Airbnb's design system embodies the spirit of The Everyman and The Explorer, creating a sophisticated yet accessible digital experience. It guides users through a vast selection of global accommodations with efficiency and trustworthiness, mirroring the clear, concise communication found in comparable brands like Booking.com, Expedia, and Google Travel. The aesthetic is modern and inviting, prioritizing user-friendliness and global reach over niche specialization or avant-garde experimentation. This design system is not about flashy, ephemeral trends; it is built for enduring utility and universal understanding, ensuring a consistent and reliable experience for a diverse, worldwide audience. It avoids overly playful or overly corporate aesthetics, instead striking a balance that feels both professional and personally engaging.

The design ethos is grounded in enabling seamless travel planning and discovery. Every element, from typography to color, contributes to an atmosphere of confidence and clarity. The system prioritizes intuitive navigation and straightforward information delivery, reflecting a brand that values directness and user empowerment. It does not aim to be a luxury brand, nor does it lean into budget-only perceptions. Instead, it positions Airbnb as a reliable and comprehensive platform for all types of travel, fostering a sense of adventure and possibility within a secure and well-organized framework. This approach ensures that the design serves as a transparent conduit for diverse travel experiences, rather than an imposing stylistic statement.

**Key characteristics:**

- Vibe — accessible, global, trustworthy, efficient, modern, inviting
- Archetypes — The Everyman, The Explorer
- Comparable to — Booking.com, Expedia, TripAdvisor, Google Travel
- Design era — flat-2.0
- Emotional tone — reliable-approachable
- Target audience — Travelers seeking diverse, unique, and reliable accommodation options globally, who appreciate clear navigation and a straightforward booking process.
- Visual energy — 4/10 (moderate)

## Colors

The primary color palette, anchored by #222222 and #ffffff, establishes a foundation of modern sophistication and clarity. This high-contrast pairing ensures optimal readability and a clean aesthetic, signaling trustworthiness and efficiency. The deliberate restraint in color choice allows the diverse imagery of global travel to take prominence, reinforcing the brand's accessible and inviting character without visual competition. This minimalist approach communicates a focus on content and user experience, rather than overt branding through a complex color scheme.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#222222` | Near-Black |
| secondary | `#6a6a6a` | Dim Gray |
| accent / tertiary | `#c13515` | Firebrick |
| background | `#ffffff` | White |
| text | `#222222` | Near-Black |
| secondary text | `#6a6a6a` | Dim Gray |
| border | `#222222` | Near-Black |
| link | `#222222` | Near-Black |
| muted | `#6a6a6a` | Dim Gray |

### Semantic

| Role | Hex | Use |
|------|-----|-----|
| success | `#008a05` | Confirmations, positive states |
| warning | `#e07912` | Caution, intermediate states |
| error | `#fff8f6` | Failures, destructive actions |
| info | `#428bff` | Neutral information, tips |

## Typography

Airbnb Cereal VF is the sole typeface, ensuring visual consistency and a unified brand voice. Its variable font capabilities allow for precise control over weight and width, facilitating a flexible yet cohesive typographic hierarchy. This choice communicates modernity and efficiency, aligning with the brand's accessible and trustworthy vibe. The system prioritizes legibility and clear information delivery, ensuring that all content is easily digestible across diverse devices and user contexts, reinforcing the brand's commitment to a global and inviting user experience.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Airbnb Cereal VF | body | self-hosted | 400 |
| Airbnb Cereal VF | heading | self-hosted | 500, 700 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Airbnb Cereal VF | 28px | 700 | 40.04px | — |
| Heading 2 | Airbnb Cereal VF | 22px | 500 | 26px | -0.44px |
| Heading 3 | Airbnb Cereal VF | 14px | 500 | 18px | — |
| Body | Airbnb Cereal VF | 14px | 400 | 20.02px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 20.02px

## Layout

- Base spacing unit — `2px`

## Shapes

Border-radius scale:

- `md` — 50px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Secondary**

- Background — `#f2f2f2`
- Text — `#222222`
- Radius — `50%`
- Padding — `0px`
- Font size — `14px`
- Font weight — `400`
- Border — ` solid #222222`

## Do's and Don'ts

### Do

- Use Airbnb Cereal VF (400 weight) for all body text with a line-height of 20.02px.
- Apply Airbnb Cereal VF (500 or 700 weight) for headings, always in sentence-case.
- Utilize the primary color #222222 for main text and primary elements, and #6a6a6a for secondary text.
- Accentuate key actions and highlights with the accent color #c13515.
- Design secondary buttons with a #f2f2f2 background, #222222 text, a #222222 border, and a 50% border-radius (pill-shaped).
- Maintain a consistent base unit of 2px for all spacing and measurements.
- Employ large, pill-shaped border radii (50px) for elements requiring significant rounding.
- Craft calls to action using action-oriented imperative verbs, keeping vocabulary simple and jargon-free.

### Don't

- Avoid using any box-shadows on elements; the brand maintains a flat aesthetic.
- Do not incorporate gradients into any design elements; the brand uses solid colors.
- Refrain from using emoji or exclamations in copy; the brand maintains a matter-of-fact and accessible tone.
- Do not use title case or all caps for headings; always adhere to sentence-case.
- Avoid complex vocabulary or industry-specific jargon; keep language simple and accessible.
- Do not use sharp or slightly rounded corners; all significant rounding should be 50px (pill-shaped).
- Do not introduce additional font families beyond Airbnb Cereal VF; maintain typographic consistency.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 8/10 | casual |
| Playful ↔ Serious | 4/10 | playful |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 3/10 | respectful |
| Technical ↔ Accessible | 9/10 | accessible |

### Copywriting style

- Avg. sentence length — 7 words
- Vocabulary — simple
- Jargon — none
- CTA style — action-oriented imperative verbs
- Rhetorical devices — repetition

### Sample copy

> Get an Airbnb for every kind of trip

> 8 million vacation rentals → 2 million Guest Favorites → 220+ countries and regions worldwide

> Inspiration for future getaways

> Become a host

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/airbnb.com) | 100% |
| favicon | — | png | [link](brands/airbnb.com/logo-0.png) | 95% |
| favicon | — | png | [link](brands/airbnb.com/logo-1.png) | 95% |
| favicon | — | png | [link](brands/airbnb.com/logo-2.png) | 95% |
| favicon | — | png | [link](brands/airbnb.com/logo-3.png) | 95% |
| favicon | — | png | [link](brands/airbnb.com/logo-4.png) | 95% |
| favicon | — | png | [link](brands/airbnb.com/logo-5.png) | 95% |
| favicon | — | png | [link](brands/airbnb.com/logo-6.png) | 95% |
| favicon | — | png | [link](brands/airbnb.com/logo-7.png) | 95% |
| favicon | — | png | [link](brands/airbnb.com/logo-8.png) | 95% |
| favicon | — | png | [link](brands/airbnb.com/logo-9.png) | 95% |
| favicon | — | png | [link](brands/airbnb.com/logo-10.png) | 95% |

## Sources

- Live brand page — https://extractvibe.com/brand/airbnb.com
- Raw JSON — https://extractvibe.com/api/brand/airbnb.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/airbnb.com/design.md
- Extracted — 2026-04-26T13:11:06.024Z
- Generator — ExtractVibe vv1
- Quality score — 90/100

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md