{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "Design tokens for Airbnb",
  "meta": {
    "name": "Airbnb",
    "description": "A warm, generous consumer marketplace anchored on a clean white canvas and Airbnb Rausch (#ff385c), the single brand voltage that carries every primary CTA, search-button orb, and rating dot. Type runs Airbnb Cereal VF at modest weights — display sits at 22–28px in weight 500/600 rather than the heavy 700+ that fintech and enterprise systems use; the brand trusts photography and generous whitespace over typographic muscle. Three product entries (Homes, Experiences, Services) sit in the top nav with hand-illustrated 32-icon glyphs and \"NEW\" badges, signaling a marketplace expansion rather than a feature dump. Pill-shaped search bars (`{rounded.full}`), softly rounded property cards (`{rounded.lg}` ~14px), and 32px button radii read as friendly and human — there is no hard corner anywhere except the body grid.",
    "theme": "light"
  },
  "color": {
    "primary": {
      "$value": "#ff385c",
      "$type": "color",
      "$description": "Use for the primary role."
    },
    "primary-active": {
      "$value": "#e00b41",
      "$type": "color",
      "$description": "Use for the primary active role."
    },
    "primary-disabled": {
      "$value": "#ffd1da",
      "$type": "color",
      "$description": "Use for the primary disabled role."
    },
    "primary-error-text": {
      "$value": "#c13515",
      "$type": "color",
      "$description": "Use for the primary error text role."
    },
    "primary-error-text-hover": {
      "$value": "#b32505",
      "$type": "color",
      "$description": "Use for the primary error text hover role."
    },
    "luxe": {
      "$value": "#460479",
      "$type": "color",
      "$description": "Use for the luxe role."
    },
    "plus": {
      "$value": "#92174d",
      "$type": "color",
      "$description": "Use for the plus role."
    },
    "ink": {
      "$value": "#222222",
      "$type": "color",
      "$description": "Use for the ink role."
    },
    "body": {
      "$value": "#3f3f3f",
      "$type": "color",
      "$description": "Use for the body role."
    },
    "muted": {
      "$value": "#6a6a6a",
      "$type": "color",
      "$description": "Use for the muted role."
    },
    "muted-soft": {
      "$value": "#929292",
      "$type": "color",
      "$description": "Use for the muted soft role."
    },
    "hairline": {
      "$value": "#dddddd",
      "$type": "color",
      "$description": "Use for the hairline role."
    },
    "hairline-soft": {
      "$value": "#ebebeb",
      "$type": "color",
      "$description": "Use for the hairline soft role."
    },
    "border-strong": {
      "$value": "#c1c1c1",
      "$type": "color",
      "$description": "Use for the border strong role."
    },
    "canvas": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the canvas role."
    },
    "surface-soft": {
      "$value": "#f7f7f7",
      "$type": "color",
      "$description": "Use for the surface soft role."
    },
    "surface-card": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the surface card role."
    },
    "surface-strong": {
      "$value": "#f2f2f2",
      "$type": "color",
      "$description": "Use for the surface strong role."
    },
    "on-primary": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the on primary role."
    },
    "on-dark": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the on dark role."
    },
    "legal-link": {
      "$value": "#428bff",
      "$type": "color",
      "$description": "Use for the legal link role."
    },
    "star-rating": {
      "$value": "#222222",
      "$type": "color",
      "$description": "Use for the star rating role."
    },
    "scrim": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Use for the scrim role."
    }
  },
  "typography": {
    "display-xl": {
      "$value": {
        "fontFamily": "'Airbnb Cereal VF', Circular, -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif",
        "fontSize": "28px",
        "fontWeight": 700,
        "lineHeight": 1.43,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for display xl."
    },
    "display-lg": {
      "$value": {
        "fontFamily": "'Airbnb Cereal VF', Circular, sans-serif",
        "fontSize": "22px",
        "fontWeight": 500,
        "lineHeight": 1.18,
        "letterSpacing": "-0.44px"
      },
      "$type": "typography",
      "$description": "Typography style for display lg."
    },
    "display-md": {
      "$value": {
        "fontFamily": "'Airbnb Cereal VF', Circular, sans-serif",
        "fontSize": "21px",
        "fontWeight": 700,
        "lineHeight": 1.43,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for display md."
    },
    "display-sm": {
      "$value": {
        "fontFamily": "'Airbnb Cereal VF', Circular, sans-serif",
        "fontSize": "20px",
        "fontWeight": 600,
        "lineHeight": 1.2,
        "letterSpacing": "-0.18px"
      },
      "$type": "typography",
      "$description": "Typography style for display sm."
    },
    "title-md": {
      "$value": {
        "fontFamily": "'Airbnb Cereal VF', Circular, sans-serif",
        "fontSize": "16px",
        "fontWeight": 600,
        "lineHeight": 1.25,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for title md."
    },
    "title-sm": {
      "$value": {
        "fontFamily": "'Airbnb Cereal VF', Circular, sans-serif",
        "fontSize": "16px",
        "fontWeight": 500,
        "lineHeight": 1.25,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for title sm."
    },
    "rating-display": {
      "$value": {
        "fontFamily": "'Airbnb Cereal VF', Circular, sans-serif",
        "fontSize": "64px",
        "fontWeight": 700,
        "lineHeight": 1.1,
        "letterSpacing": "-1px"
      },
      "$type": "typography",
      "$description": "Typography style for rating display."
    },
    "body-md": {
      "$value": {
        "fontFamily": "'Airbnb Cereal VF', Circular, sans-serif",
        "fontSize": "16px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body md."
    },
    "body-sm": {
      "$value": {
        "fontFamily": "'Airbnb Cereal VF', Circular, sans-serif",
        "fontSize": "14px",
        "fontWeight": 400,
        "lineHeight": 1.43,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body sm."
    },
    "caption": {
      "$value": {
        "fontFamily": "'Airbnb Cereal VF', Circular, sans-serif",
        "fontSize": "14px",
        "fontWeight": 500,
        "lineHeight": 1.29,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for caption."
    },
    "caption-sm": {
      "$value": {
        "fontFamily": "'Airbnb Cereal VF', Circular, sans-serif",
        "fontSize": "13px",
        "fontWeight": 400,
        "lineHeight": 1.23,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for caption sm."
    },
    "badge": {
      "$value": {
        "fontFamily": "'Airbnb Cereal VF', Circular, sans-serif",
        "fontSize": "11px",
        "fontWeight": 600,
        "lineHeight": 1.18,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for badge."
    },
    "micro-label": {
      "$value": {
        "fontFamily": "'Airbnb Cereal VF', Circular, sans-serif",
        "fontSize": "12px",
        "fontWeight": 700,
        "lineHeight": 1.33,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for micro label."
    },
    "uppercase-tag": {
      "$value": {
        "fontFamily": "'Airbnb Cereal VF', Circular, sans-serif",
        "fontSize": "8px",
        "fontWeight": 700,
        "lineHeight": 1.25,
        "letterSpacing": "0.32px"
      },
      "$type": "typography",
      "$description": "Typography style for uppercase tag."
    },
    "button-md": {
      "$value": {
        "fontFamily": "'Airbnb Cereal VF', Circular, sans-serif",
        "fontSize": "16px",
        "fontWeight": 500,
        "lineHeight": 1.25,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for button md."
    },
    "button-sm": {
      "$value": {
        "fontFamily": "'Airbnb Cereal VF', Circular, sans-serif",
        "fontSize": "14px",
        "fontWeight": 500,
        "lineHeight": 1.29,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for button sm."
    },
    "link": {
      "$value": {
        "fontFamily": "'Airbnb Cereal VF', Circular, sans-serif",
        "fontSize": "14px",
        "fontWeight": 400,
        "lineHeight": 1.43,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for link."
    },
    "nav-link": {
      "$value": {
        "fontFamily": "'Airbnb Cereal VF', Circular, sans-serif",
        "fontSize": "16px",
        "fontWeight": 600,
        "lineHeight": 1.25,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for nav link."
    }
  },
  "spacing": {
    "xxs": {
      "$value": "2px",
      "$type": "dimension",
      "$description": "Spacing step xxs."
    },
    "xs": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Spacing step xs."
    },
    "sm": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Spacing step sm."
    },
    "md": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Spacing step md."
    },
    "base": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Spacing step base."
    },
    "lg": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Spacing step lg."
    },
    "xl": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "Spacing step xl."
    },
    "xxl": {
      "$value": "48px",
      "$type": "dimension",
      "$description": "Spacing step xxl."
    },
    "section": {
      "$value": "64px",
      "$type": "dimension",
      "$description": "Spacing step section."
    }
  },
  "radius": {
    "none": {
      "$value": "0px",
      "$type": "dimension",
      "$description": "Border radius none."
    },
    "xs": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Border radius xs."
    },
    "sm": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Border radius sm."
    },
    "md": {
      "$value": "14px",
      "$type": "dimension",
      "$description": "Border radius md."
    },
    "lg": {
      "$value": "20px",
      "$type": "dimension",
      "$description": "Border radius lg."
    },
    "xl": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "Border radius xl."
    },
    "full": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Border radius full."
    }
  },
  "shadow": {},
  "$extensions": {
    "com.design-md-editor.source": {
      "url": "https://www.airbnb.com/",
      "note": "Official brand website used for visual comparison."
    }
  }
}
