AI Brand Kits

Popular brand kit

Airbnb Brand Kit

Airbnb's web brand colors, CSS custom properties, and typography — preview on real UI, customize tokens, and export DESIGN.md for AI coding agents.

Airbnb Cereal VF is Airbnb's proprietary typeface. The preview may fall back to system sans-serif; exports use the official font name.

Airbnbbrand colors, CSS variables & typography

Reference tokens from the Airbnb brand kit — semantic color roles, CSS custom properties, font families, and Tailwind mappings observed on www.airbnb.com/. Copy any block into your project or export the full kit above.

Airbnb typography

Headline font
Airbnb Cereal VF
Page titles, hero headlines, section headers
Body font
Airbnb Cereal VF
Paragraphs, UI text, long-form content

Airbnb color palette

Nine semantic tokens — background, foreground, primary (#ff385c), accent, muted, border, and foreground-on-color pairs. Vibe: Light, clean, professional.

  • Background

    #ffffff

    Main page and app background

  • Text / Foreground

    #6a6a6a

    Body text and default foreground

  • Surface / Card

    #ffffff

    Cards, modals, elevated surfaces

  • Primary

    #ff385c

    Buttons, links, primary actions

  • Primary Foreground

    #fafafa

    Text on primary surfaces

  • Accent

    #ff385c

    Highlights, CTAs, interactive elements

  • Accent Foreground

    #fafafa

    Text on accent surfaces

  • Muted

    #f6f6f6

    Subtle backgrounds, disabled states

  • Border

    #222222

    Dividers and input borders

Airbnb CSS variables

Paste into globals.css, a Tailwind v4 @theme block, or any design-token layer. These are the CSS styles used across the Airbnb web UI.

CSS custom properties
:root {
  --background: #ffffff;
  --foreground: #6a6a6a;
  --card: #ffffff;
  --primary: #ff385c;
  --primary-foreground: #fafafa;
  --accent: #ff385c;
  --accent-foreground: #fafafa;
  --muted: #f6f6f6;
  --border: #222222;
  --secondary: #f6f6f6;
  --secondary-foreground: #6a6a6a;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --success: #16a34a;
  --success-foreground: #ffffff;
  --warning: #d97706;
  --warning-foreground: #ffffff;
  --ring: #ff385c;
  --input: #222222;
  --popover: #ffffff;
  --popover-foreground: #6a6a6a;
}

.dark {
  --background: #404040;
  --foreground: #c9c9c9;
  --card: #595959;
  --primary: #ff406a;
  --primary-foreground: #fafafa;
  --accent: #ff3e65;
  --accent-foreground: #fafafa;
  --muted: #6f6f6f;
  --border: #131313;
  --secondary: #6f6f6f;
  --secondary-foreground: #fafafa;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --success: #16a34a;
  --success-foreground: #ffffff;
  --warning: #d97706;
  --warning-foreground: #ffffff;
  --ring: #ff406a;
  --input: #131313;
  --popover: #595959;
  --popover-foreground: #c9c9c9;
}

Full token table

TokenHexUsage
Background#ffffffMain page and app background
Text / Foreground#6a6a6aBody text and default foreground
Surface / Card#ffffffCards, modals, elevated surfaces
Primary#ff385cButtons, links, primary actions
Primary Foreground#fafafaText on primary surfaces
Accent#ff385cHighlights, CTAs, interactive elements
Accent Foreground#fafafaText on accent surfaces
Muted#f6f6f6Subtle backgrounds, disabled states
Border#222222Dividers and input borders

Tailwind config for Airbnb

Map semantic tokens to Tailwind utility classes — use with the CSS variables above.

tailwind.config.ts excerpt
theme: {
  extend: {
    fontFamily: {
      heading: ['Airbnb Cereal VF', 'sans-serif'],
      body: ['Airbnb Cereal VF', 'sans-serif'],
    },
    colors: {
      background: 'var(--background)',
      foreground: 'var(--foreground)',
      card: 'var(--card)',
      primary: 'var(--primary)',
      'primary-foreground': 'var(--primary-foreground)',
      accent: 'var(--accent)',
      'accent-foreground': 'var(--accent-foreground)',
      muted: 'var(--muted)',
      border: 'var(--border)',
    },
  },
}

Airbnb brand kit — colors, CSS styles & typography

The Airbnb brand kit captures the design tokens used on airbnb.com: white backgrounds (#ffffff), soft gray body text (#6a6a6a), the signature Rausch coral primary (#ff385c), muted surfaces (#f6f6f6), and Airbnb Cereal VF for both headlines and body copy.

Every token ships as semantic CSS variables, a full color table, and Tailwind config snippets — ready to paste into globals.css or export as DESIGN.md for Cursor, Claude Code, and v0.

What's in the Airbnb brand kit

Nine semantic color roles, typography tokens, CSS variables, and machine-readable JSON — the same structure AI coding agents expect from a DESIGN.md export.

  • Primary #ff385c and accent tokens from Airbnb's web UI
  • CSS custom properties for background, foreground, card, muted, and border
  • Airbnb Cereal VF headline and body font roles
  • Live preview on buttons, cards, and typography
  • Copy DESIGN.md, CSS variables, JSON, or Tailwind config

How to use the Airbnb brand kit

The generator loads Airbnb's tokens automatically. Scroll to the reference section for copy-paste CSS and Tailwind snippets, or use the export buttons for a full DESIGN.md bundle.

  • Review colors and fonts in the live preview panel
  • Copy CSS variables from the token reference below
  • Adjust any token with pickers before exporting
  • Download DESIGN.md or open in playground to stress-test components

When to use an Airbnb brand kit

Product design studies, hospitality UI prototypes, client mood boards, and teaching design systems all benefit from Airbnb's clean, high-contrast web aesthetic.

Developers building travel or marketplace apps can start with real Airbnb CSS styles and diverge where their product needs its own identity — without guessing hex values from screenshots.

Frequently asked questions

What is Airbnb's brand color?

Airbnb's signature web accent is #ff385c — often called Rausch coral. It appears on primary buttons, links, and CTAs. This kit maps it to both primary and accent semantic tokens alongside #6a6a6a body text and #ffffff backgrounds.

Is this the official Airbnb brand kit?

This kit reflects colors and typography observed on airbnb.com. Airbnb Cereal is a proprietary typeface — exports use the official font name; for web projects you may need a licensed font file or a similar fallback like Circular or Nunito.

Can I copy Airbnb CSS variables directly?

Yes. The reference section includes a :root block with --background, --foreground, --primary, and all nine semantic tokens. Paste into globals.css or a Tailwind @theme block.

How do I export for AI coding agents?

Click Download DESIGN.md or Copy Markdown. Place the file in your repo root and tell Cursor or Claude Code to follow it for UI decisions.

Related tools

Explore more free generators from Airbnb brand kit to full design system exports.