{
  "schemaVersion": 1,
  "brandId": "airbnb",
  "source": {
    "componentsHtml": "components.html",
    "tokensCss": "tokens.css"
  },
  "fixture": {
    "title": "Airbnb — reference components",
    "description": "Reference fixture for design-systems/airbnb. Every visible value comes from tokens.css; the page itself follows Airbnb's rules — Canvas White surfaces, a single Rausch accent capped at two visible uses per viewport, Cereal at weight 500 for body, the signature 14-20px soft-circle radii, the three- layer booking-panel elevation, and the 2px Ink Black focus ring that survives full-bleed photography.",
    "styleBlockCount": 1,
    "selectorCount": 111,
    "classCount": 67,
    "elementCount": 28
  },
  "tokens": {
    "declared": [
      "--accent",
      "--accent-active",
      "--accent-hover",
      "--accent-on",
      "--bg",
      "--border",
      "--border-soft",
      "--container-gutter-desktop",
      "--container-gutter-phone",
      "--container-gutter-tablet",
      "--container-max",
      "--danger",
      "--ease-standard",
      "--elev-flat",
      "--elev-raised",
      "--elev-ring",
      "--fg",
      "--fg-2",
      "--focus-ring",
      "--font-body",
      "--font-display",
      "--font-mono",
      "--leading-body",
      "--leading-tight",
      "--meta",
      "--motion-base",
      "--motion-fast",
      "--muted",
      "--radius-lg",
      "--radius-md",
      "--radius-pill",
      "--radius-sm",
      "--section-y-desktop",
      "--section-y-phone",
      "--section-y-tablet",
      "--space-1",
      "--space-12",
      "--space-2",
      "--space-3",
      "--space-4",
      "--space-5",
      "--space-6",
      "--space-8",
      "--success",
      "--surface",
      "--surface-warm",
      "--text-2xl",
      "--text-3xl",
      "--text-4xl",
      "--text-base",
      "--text-lg",
      "--text-sm",
      "--text-xl",
      "--text-xs",
      "--tracking-display",
      "--warn"
    ],
    "referenced": [
      "--accent",
      "--accent-active",
      "--accent-hover",
      "--accent-on",
      "--bg",
      "--border",
      "--border-soft",
      "--container-gutter-desktop",
      "--container-gutter-phone",
      "--container-gutter-tablet",
      "--container-max",
      "--danger",
      "--ease-standard",
      "--elev-raised",
      "--elev-ring",
      "--fg",
      "--fg-2",
      "--focus-ring",
      "--font-body",
      "--font-display",
      "--font-mono",
      "--leading-body",
      "--leading-tight",
      "--meta",
      "--motion-fast",
      "--muted",
      "--radius-lg",
      "--radius-md",
      "--radius-pill",
      "--radius-sm",
      "--section-y-desktop",
      "--section-y-phone",
      "--section-y-tablet",
      "--space-1",
      "--space-12",
      "--space-2",
      "--space-3",
      "--space-4",
      "--space-5",
      "--space-6",
      "--space-8",
      "--success",
      "--surface",
      "--surface-warm",
      "--text-2xl",
      "--text-3xl",
      "--text-base",
      "--text-lg",
      "--text-sm",
      "--text-xl",
      "--text-xs",
      "--tracking-display"
    ],
    "unusedDeclared": [
      "--elev-flat",
      "--motion-base",
      "--text-4xl",
      "--warn"
    ],
    "undeclaredReferenced": []
  },
  "selectors": [
    ".award",
    ".award-label",
    ".award-laurel",
    ".award-laurel.right",
    ".award-rating",
    ".award-row",
    ".award-sub",
    ".badge",
    ".badge-rausch",
    ".badge-soft",
    ".badge-status",
    ".badge-status .badge-dot",
    ".body-meta",
    ".body-muted",
    ".body-sm",
    ".booking-cell-label",
    ".booking-cell-value",
    ".booking-disclaimer",
    ".booking-grid",
    ".booking-grid-cell",
    ".booking-grid-cell + .booking-grid-cell",
    ".booking-grid-cell.full",
    ".booking-headline",
    ".booking-panel",
    ".booking-per",
    ".booking-price",
    ".btn",
    ".btn-icon",
    ".btn-icon svg",
    ".btn-icon:active",
    ".btn-icon:focus-visible",
    ".btn-icon:hover",
    ".btn-primary",
    ".btn-primary:active",
    ".btn-primary:hover",
    ".btn-secondary",
    ".btn-secondary:hover",
    ".btn-sm",
    ".btn:active",
    ".btn:focus-visible",
    ".container",
    ".divider-soft",
    ".eyebrow",
    ".field",
    ".field input",
    ".field input::placeholder",
    ".field input:focus-visible",
    ".field label",
    ".field select",
    ".field select:focus-visible",
    ".field-error .field-help",
    ".field-error input",
    ".field-help",
    ".form",
    ".form-row",
    ".hero-actions",
    ".hero-grid",
    ".icon",
    ".lede",
    ".listing",
    ".listing-meta",
    ".listing-photo",
    ".listing-photo .btn-icon",
    ".listing-photo .listing-badge",
    ".listing-photo::before",
    ".listing-price",
    ".listing-price .per",
    ".listing-rating",
    ".listing-row",
    ".listing-subtitle",
    ".listing-title",
    ".listings-grid",
    ".nav-logo",
    ".nav-row",
    ".row-between",
    ".row-cluster",
    ".search-pill",
    ".search-segment",
    ".search-segment + .search-segment",
    ".search-segment-label",
    ".search-segment-value",
    ".search-submit",
    ".search-submit svg",
    ".search-submit:active",
    ".search-submit:focus-visible",
    ".search-submit:hover",
    ".stack-2 > * + *",
    ".stack-3 > * + *",
    ".stack-4 > * + *",
    ".stack-6 > * + *",
    ".tab",
    ".tab-glyph",
    ".tab-new",
    ".tab[aria-selected=\"true\"]",
    ".tab[aria-selected=\"true\"]::after",
    ".tabs",
    "*",
    "*::after",
    "*::before",
    "a",
    "a:focus-visible",
    "a:hover",
    "body",
    "h1",
    "h2",
    "h3",
    "html",
    "kbd",
    "p",
    "section",
    "section + section"
  ],
  "classes": [
    "award",
    "award-label",
    "award-laurel",
    "award-rating",
    "award-row",
    "award-sub",
    "badge",
    "badge-dot",
    "badge-rausch",
    "badge-soft",
    "badge-status",
    "body-meta",
    "body-muted",
    "booking-cell-label",
    "booking-cell-value",
    "booking-disclaimer",
    "booking-grid",
    "booking-grid-cell",
    "booking-headline",
    "booking-panel",
    "booking-per",
    "booking-price",
    "btn",
    "btn-icon",
    "btn-primary",
    "btn-secondary",
    "btn-sm",
    "container",
    "divider-soft",
    "eyebrow",
    "field",
    "field-error",
    "field-help",
    "form",
    "form-row",
    "full",
    "hero-actions",
    "hero-grid",
    "icon",
    "lede",
    "listing",
    "listing-badge",
    "listing-meta",
    "listing-photo",
    "listing-price",
    "listing-rating",
    "listing-row",
    "listing-subtitle",
    "listing-title",
    "listings-grid",
    "nav-logo",
    "nav-row",
    "per",
    "right",
    "row-between",
    "row-cluster",
    "search-pill",
    "search-segment",
    "search-segment-label",
    "search-segment-value",
    "search-submit",
    "stack-3",
    "stack-4",
    "tab",
    "tab-glyph",
    "tab-new",
    "tabs"
  ],
  "elements": [
    "a",
    "article",
    "aside",
    "body",
    "button",
    "circle",
    "div",
    "ellipse",
    "form",
    "h1",
    "h2",
    "head",
    "hr",
    "html",
    "input",
    "kbd",
    "label",
    "main",
    "meta",
    "nav",
    "p",
    "path",
    "section",
    "span",
    "style",
    "svg",
    "time",
    "title"
  ],
  "groups": [
    {
      "id": "buttons",
      "label": "Buttons and calls to action",
      "present": true,
      "selectors": [
        ".btn",
        ".btn-icon",
        ".btn-icon svg",
        ".btn-icon:active",
        ".btn-icon:focus-visible",
        ".btn-icon:hover",
        ".btn-primary",
        ".btn-primary:active",
        ".btn-primary:hover",
        ".btn-secondary",
        ".btn-secondary:hover",
        ".btn-sm",
        ".btn:active",
        ".btn:focus-visible",
        ".listing-photo .btn-icon"
      ],
      "classes": [
        "btn",
        "btn-icon",
        "btn-primary",
        "btn-secondary",
        "btn-sm"
      ],
      "elements": [
        "button"
      ],
      "tokenReferences": [
        "--accent-hover",
        "--border",
        "--ease-standard",
        "--elev-ring",
        "--fg",
        "--focus-ring",
        "--font-display",
        "--motion-fast",
        "--radius-lg",
        "--radius-sm",
        "--space-2",
        "--surface",
        "--text-base",
        "--text-sm"
      ]
    },
    {
      "id": "inputs",
      "label": "Form fields and controls",
      "present": true,
      "selectors": [
        ".award-label",
        ".booking-cell-label",
        ".field",
        ".field input",
        ".field input::placeholder",
        ".field input:focus-visible",
        ".field label",
        ".field select",
        ".field select:focus-visible",
        ".field-error .field-help",
        ".field-error input",
        ".field-help",
        ".search-segment-label"
      ],
      "classes": [
        "field",
        "field-error",
        "field-help",
        "form",
        "form-row"
      ],
      "elements": [
        "form",
        "input",
        "label"
      ],
      "tokenReferences": [
        "--border",
        "--danger",
        "--ease-standard",
        "--fg",
        "--motion-fast",
        "--muted",
        "--radius-sm",
        "--space-2",
        "--surface",
        "--text-base"
      ]
    },
    {
      "id": "cards",
      "label": "Cards and panels",
      "present": false,
      "selectors": [],
      "classes": [],
      "elements": [],
      "tokenReferences": []
    },
    {
      "id": "badges",
      "label": "Badges, chips, and status labels",
      "present": true,
      "selectors": [
        ".badge",
        ".badge-rausch",
        ".badge-soft",
        ".badge-status",
        ".badge-status .badge-dot"
      ],
      "classes": [
        "badge",
        "badge-dot",
        "badge-rausch",
        "badge-soft",
        "badge-status"
      ],
      "elements": [],
      "tokenReferences": [
        "--accent",
        "--accent-on",
        "--fg",
        "--radius-md",
        "--surface-warm"
      ]
    },
    {
      "id": "links",
      "label": "Links and inline actions",
      "present": true,
      "selectors": [
        "a",
        "a:focus-visible",
        "a:hover"
      ],
      "classes": [],
      "elements": [
        "a"
      ],
      "tokenReferences": [
        "--border",
        "--ease-standard",
        "--fg",
        "--focus-ring",
        "--motion-fast",
        "--radius-sm"
      ]
    },
    {
      "id": "keyboard",
      "label": "Keyboard hints",
      "present": true,
      "selectors": [
        "kbd"
      ],
      "classes": [],
      "elements": [
        "kbd"
      ],
      "tokenReferences": []
    },
    {
      "id": "icons",
      "label": "Icon slots",
      "present": true,
      "selectors": [
        ".icon"
      ],
      "classes": [
        "icon"
      ],
      "elements": [
        "svg"
      ],
      "tokenReferences": []
    },
    {
      "id": "typography",
      "label": "Typography scale and text utilities",
      "present": true,
      "selectors": [
        ".body-muted",
        ".body-sm",
        ".eyebrow",
        "h1",
        "h2",
        "h3"
      ],
      "classes": [
        "body-muted",
        "eyebrow"
      ],
      "elements": [
        "h1",
        "h2",
        "p"
      ],
      "tokenReferences": [
        "--font-display",
        "--leading-tight",
        "--muted",
        "--text-sm",
        "--text-xl",
        "--tracking-display"
      ]
    },
    {
      "id": "layout",
      "label": "Layout primitives",
      "present": true,
      "selectors": [
        ".container",
        ".nav-logo",
        ".nav-row",
        ".row-between",
        ".stack-2 > * + *",
        ".stack-3 > * + *",
        ".stack-4 > * + *",
        ".stack-6 > * + *",
        "section",
        "section + section"
      ],
      "classes": [
        "booking-grid",
        "booking-grid-cell",
        "container",
        "hero-grid",
        "listings-grid",
        "row-between",
        "stack-3",
        "stack-4"
      ],
      "elements": [
        "main",
        "nav",
        "section"
      ],
      "tokenReferences": [
        "--border",
        "--container-gutter-desktop",
        "--container-gutter-phone",
        "--container-gutter-tablet",
        "--container-max",
        "--space-2",
        "--space-4"
      ]
    }
  ],
  "literals": {
    "colorExpressions": 1,
    "pixelValues": 61,
    "hardcodedFontFamilies": 12
  }
}