Airbnb Design Tokens

Name: Dembrandt
Author: Dembrandt

Online marketplace for lodging and experiences

Image gallery lazy loading

Stripe Linear Notion OpenAI Tesla Airbnb Figma Slack Uber Apple Raycast Krea AI Family Oura Nike Duolingo Arc Perplexity AI Anthropic Vercel Cursor

Observed with Dembrandt. Semantic roles, gradients, and breakpoints come from live extractions where available; contrast is computed from the real palette. Try the CLI for the complete W3C token export.

Design tokens observed from publicly visible CSS. Dembrandt does not host, copy, or redistribute any brand assets.

Colors

#ff385c

#222222

#6a6a6a

#ebebeb

#f7f7f7

#ffffff

primary#ff385c

background#ffffff

text#222222

Typography

Airbnb Cereal VF, Circular, sans-serif

hero:28px / 700

body:16px / 400

button:14px / 600

weights:400, 600, 700

leading:1, 1.1, 1.4, 1.6

tracking:-0.02em, 0, 0.04em

Shadows

Spacing

4px8px12px16px24px32px

Border Radius

8px

14px

32px

50%

Borders

1px solid #dddddd

1px solid rgba(255, 255, 255, 0.5)

Links

Link text#222222 · no underline

Gradients

linear-gradient(#ffffff 39.9%, #f8f8f8 100%)

Opacity

0.04

0.08

0.16

0.4

0.64

0.92

Breakpoints

320px480px768px1024px1280px1920px

Motion

Duration120ms180ms280ms420ms

Easingcubic-bezier(0.4, 0, 0.2, 1)cubic-bezier(0.16, 1, 0.3, 1)linear

Contrast · WCAG 2.2

Button label

3.52:1

AA Large

Body text

15.91:1

AAA

Button States

React + Next.js

Default

#ff385c

Hover

#e00b41

Active

#c40036

Focus

focus

Disabled

disabled

radius: 8pxpadding: 14px 24px

output.json

{
  "$schema": "https://design-tokens.org/schema.json",
  "color": {
    "palette-1": {
      "$type": "color",
      "$value": "#ff385c"
    },
    "palette-2": {
      "$type": "color",
      "$value": "#222222"
    },
    "palette-3": {
      "$type": "color",
      "$value": "#6a6a6a"
    },
    "palette-4": {
      "$type": "color",
      "$value": "#ebebeb"
    },
    "palette-5": {
      "$type": "color",
      "$value": "#f7f7f7"
    },
    "palette-6": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "primary": {
      "$type": "color",
      "$value": "#ff385c"
    },
    "background": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "text": {
      "$type": "color",
      "$value": "#222222"
    },
    "link": {
      "$type": "color",
      "$value": "#222222"
    }
  },
  "border": {
    "border-1": {
      "$type": "border",
      "$value": "1px solid #dddddd"
    },
    "border-2": {
      "$type": "border",
      "$value": "1px solid rgba(255, 255, 255, 0.5)"
    }
  },
  "gradient": {
    "gradient-1": {
      "$type": "gradient",
      "$value": "linear-gradient(#ffffff 39.9%, #f8f8f8 100%)"
    }
  },
  "fontFamily": {
    "base": {
      "$type": "fontFamily",
      "$value": "Airbnb Cereal VF, Circular, sans-serif"
    }
  },
  "fontWeight": {
    "weight-400": {
      "$type": "fontWeight",
      "$value": 400
    },
    "weight-600": {
      "$type": "fontWeight",
      "$value": 600
    },
    "weight-700": {
      "$type": "fontWeight",
      "$value": 700
    }
  },
  "dimension": {
    "space-1": {
      "$type": "dimension",
      "$value": "4px"
    },
    "space-2": {
      "$type": "dimension",
      "$value": "8px"
    },
    "space-3": {
      "$type": "dimension",
      "$value": "12px"
    },
    "space-4": {
      "$type": "dimension",
      "$value": "16px"
    },
    "space-5": {
      "$type": "dimension",
      "$value": "24px"
    },
    "space-6": {
      "$type": "dimension",
      "$value": "32px"
    },
    "radius-1": {
      "$type": "dimension",
      "$value": "8px"
    },
    "radius-2": {
      "$type": "dimension",
      "$value": "14px"
    },
    "radius-3": {
      "$type": "dimension",
      "$value": "32px"
    },
    "radius-4": {
      "$type": "dimension",
      "$value": "50%"
    }
  },
  "shadow": {
    "shadow-1": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.08)"
    },
    "shadow-2": {
      "$type": "shadow",
      "$value": "0 6px 20px rgba(0,0,0,0.12)"
    },
    "shadow-3": {
      "$type": "shadow",
      "$value": "0 16px 40px rgba(0,0,0,0.2)"
    }
  },
  "opacity": {
    "opacity-0": {
      "$type": "number",
      "$value": 0
    },
    "opacity-1": {
      "$type": "number",
      "$value": 0.04
    },
    "opacity-2": {
      "$type": "number",
      "$value": 0.08
    },
    "opacity-3": {
      "$type": "number",
      "$value": 0.16
    },
    "opacity-4": {
      "$type": "number",
      "$value": 0.4
    },
    "opacity-5": {
      "$type": "number",
      "$value": 0.64
    },
    "opacity-6": {
      "$type": "number",
      "$value": 0.92
    },
    "opacity-7": {
      "$type": "number",
      "$value": 1
    }
  },
  "duration": {
    "duration-1": {
      "$type": "duration",
      "$value": "120ms"
    },
    "duration-2": {
      "$type": "duration",
      "$value": "180ms"
    },
    "duration-3": {
      "$type": "duration",
      "$value": "280ms"
    },
    "duration-4": {
      "$type": "duration",
      "$value": "420ms"
    }
  },
  "cubicBezier": {
    "ease-1": {
      "$type": "cubicBezier",
      "$value": "cubic-bezier(0.4, 0, 0.2, 1)"
    },
    "ease-2": {
      "$type": "cubicBezier",
      "$value": "cubic-bezier(0.16, 1, 0.3, 1)"
    },
    "ease-3": {
      "$type": "cubicBezier",
      "$value": "linear"
    }
  },
  "breakpoint": {
    "bp-1": {
      "$type": "dimension",
      "$value": "320px"
    },
    "bp-2": {
      "$type": "dimension",
      "$value": "480px"
    },
    "bp-3": {
      "$type": "dimension",
      "$value": "768px"
    },
    "bp-4": {
      "$type": "dimension",
      "$value": "1024px"
    },
    "bp-5": {
      "$type": "dimension",
      "$value": "1280px"
    },
    "bp-6": {
      "$type": "dimension",
      "$value": "1920px"
    }
  },
  "contrast": {
    "button-label": {
      "ratio": 3.52,
      "grade": "AA Large"
    },
    "body-text": {
      "ratio": 15.91,
      "grade": "AAA"
    }
  }
}
// ...and more

Other token exports

--dtcgW3C token JSON, checked by the DTCG Validator

--design-mdDESIGN.md for agents and docs

--brand-guideBrand guide PDF

--wcagPalette-wide contrast report

All flags in the CLI quickstart. Same tokens in your editor via the MCP server.

$npx dembrandt airbnb.com