--- version: alpha name: Airbnb description: "Airbnb's design system is warm, photographic and quietly confident: a bright white canvas carries listing imagery, near-black #222222 ink does almost all of the typographic work, and a layered grey ladder (#6C6C6C, #8C8C8C, #C1C1C1) handles secondary and disabled text. The signature Rausch coral #FF385C is used sparingly for the logo, key CTAs and highlights, deepening to #DA1249 on pressed and gradient surfaces. Everything is set in the custom Airbnb Cereal VF variable typeface across a compact, utilitarian ladder from 11px micro labels up to 26px page headings, with modest negative tracking on titles. Shapes are soft and generous: 20px-rounded cards and search pills, 32px+ pills for chips, and very light multi-layer shadows. Hairlines are #DDDDDD, hover and chip fills #F2F2F2, and the footer sits on a soft #F7F7F7 surface." colors: primary: "#FF385C" primary-active: "#DA1249" ink: "#222222" ink-black: "#000000" body-muted: "#6C6C6C" muted-soft: "#8C8C8C" text-disabled: "#C1C1C1" hairline: "#DDDDDD" surface-soft: "#F2F2F2" surface-footer: "#F7F7F7" canvas: "#FFFFFF" on-primary: "#FFFFFF" focus-ring: "#3F3F3F" ink-focus: "#222222" typography: display-lg: fontFamily: Airbnb Cereal VF fontSize: 26px fontWeight: 500 lineHeight: 1.15 letterSpacing: normal title-lg: fontFamily: Airbnb Cereal VF fontSize: 22px fontWeight: 500 lineHeight: 1.2 letterSpacing: -0.44px title-md: fontFamily: Airbnb Cereal VF fontSize: 20px fontWeight: 600 lineHeight: 1.2 letterSpacing: -0.18px title-sm: fontFamily: Airbnb Cereal VF fontSize: 16px fontWeight: 500 lineHeight: 1.25 letterSpacing: normal body-lg: fontFamily: Airbnb Cereal VF fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: normal body-md: fontFamily: Airbnb Cereal VF fontSize: 16px fontWeight: 400 lineHeight: 1.25 letterSpacing: normal body: fontFamily: Airbnb Cereal VF fontSize: 14px fontWeight: 400 lineHeight: 1.45 letterSpacing: normal body-relaxed: fontFamily: Airbnb Cereal VF fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: normal body-strong: fontFamily: Airbnb Cereal VF fontSize: 14px fontWeight: 500 lineHeight: 1.45 letterSpacing: normal button: fontFamily: Airbnb Cereal VF fontSize: 14px fontWeight: 500 lineHeight: 1.3 letterSpacing: normal nav-link: fontFamily: Airbnb Cereal VF fontSize: 14px fontWeight: 400 lineHeight: 1.3 letterSpacing: normal caption-lg: fontFamily: Airbnb Cereal VF fontSize: 13px fontWeight: 400 lineHeight: 1.25 letterSpacing: normal caption: fontFamily: Airbnb Cereal VF fontSize: 12px fontWeight: 400 lineHeight: 1.35 letterSpacing: normal caption-medium: fontFamily: Airbnb Cereal VF fontSize: 12px fontWeight: 500 lineHeight: 1.35 letterSpacing: normal caption-strong: fontFamily: Airbnb Cereal VF fontSize: 12px fontWeight: 700 lineHeight: 1.35 letterSpacing: normal micro: fontFamily: Airbnb Cereal VF fontSize: 11px fontWeight: 600 lineHeight: 1.2 letterSpacing: normal rounded: 2xs: 3px xs: 4px sm: 6px md: 8px lg: 10px xl: 12px 2xl: 14px 3xl: 16px 4xl: 20px 5xl: 24px 6xl: 32px 7xl: 40px 8xl: 50px 9xl: 100px spacing: header-inner-2-gap: 12px button-secondary-padding-y: 11px button-secondary-padding-x: 12px button-primary-2-padding-y: 14px button-primary-2-padding-x: 24px button-secondary-4-padding-y: 14px button-secondary-4-padding-x: 24px components: button-primary: backgroundColor: transparent textColor: "#222222" rounded: 50px height: 48px button-primary-group: backgroundColor: "#DA1249" textColor: "#FFFFFF" rounded: 50px padding: 10px button-primary-icon: size: 16px button-secondary: backgroundColor: transparent textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px rounded: 20px height: 40px button-secondary-hover: backgroundColor: "#F7F7F7" button-secondary-2: backgroundColor: transparent textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px rounded: 8px height: 18px button-secondary-2-icon: size: 12px button-secondary-2-focus: backgroundColor: "#F7F7F7" button-ghost: backgroundColor: transparent textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px rounded: 12px height: 30px button-ghost-group: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px button-ghost-icon: size: 16px button-ghost-hover: backgroundColor: "#EBEBEB" button-ghost-2: backgroundColor: transparent textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px rounded: 12px height: 30px button-ghost-2-label: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px button-ghost-2-hover: backgroundColor: "#EBEBEB" card: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20.02px height: 159px card-group: rounded: 20px card-media: height: 18px width: 124px card-text: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 16px card-text-2: textColor: "#6C6C6C" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 16px card-2: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20.02px rounded: 20px height: 231px card-2-link: textColor: "#222222" rounded: 20px height: 231px width: 180px card-2-group-2: backgroundColor: "#DDDDDD" rounded: 20px card-2-text: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 16px card-2-group-10: textColor: "#6C6C6C" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 16px card-2-group-11: textColor: "#C1C1C1" card-2-group-12: textColor: "#6C6C6C" card-2-group-14: textColor: "#C1C1C1" card-3: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20.02px rounded: 20px height: 229px card-3-link: textColor: "#222222" rounded: 20px height: 229px width: 180px card-3-group-2: backgroundColor: "#DDDDDD" rounded: 20px card-3-text: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 16px card-3-group-10: textColor: "#6C6C6C" card-3-group-12: textColor: "#C1C1C1" wishlist-button: backgroundColor: transparent textColor: "#222222" height: 32px wishlist-button-icon: size: 24px nav-link-active: backgroundColor: transparent textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px rounded: 8px height: 18px nav-link-active-focus: backgroundColor: "#F7F7F7" rounded: 4px nav-link: backgroundColor: transparent textColor: "#6C6C6C" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px rounded: 8px height: 18px nav-link-focus: backgroundColor: "#F7F7F7" textColor: "#222222" rounded: 4px carousel-arrow: backgroundColor: "#F2F2F2" textColor: "#C1C1C1" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 height: 28px carousel-arrow-text: textColor: "#C1C1C1" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 carousel-arrow-icon: size: 12px carousel-arrow-2: backgroundColor: "#F2F2F2" textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 height: 28px carousel-arrow-2-text: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 carousel-arrow-2-icon: size: 12px menu-button: backgroundColor: "#F2F2F2" textColor: "#222222" height: 40px menu-button-icon: size: 24px menu-button-2: backgroundColor: "#F2F2F2" textColor: "#222222" height: 40px menu-button-2-icon: size: 16px header-landing: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20.02px height: 96px header-landing-logo: textColor: "#FF385C" height: 80px width: 102px header-landing-logo-icon: height: 32px width: 102px header-landing-link: textColor: "#222222" header-landing-text: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px header-landing-text-2: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20.02px header-landing-link-2: textColor: "#222222" header-landing-text-3: textColor: "#6C6C6C" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px header-landing-link-3: textColor: "#222222" header-landing-text-4: textColor: "#6C6C6C" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px header-landing-link-4: textColor: "#222222" header-landing-text-5: textColor: "#6C6C6C" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px header-landing-inner: rounded: 32px header-landing-group-8: backgroundColor: "#FFFFFF" rounded: 100px header-landing-group-9: rounded: 100px header-landing-group-10: rounded: 32px header-landing-group-11: rounded: 32px header-landing-text-6: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 16px header-landing-group-13: backgroundColor: "#DDDDDD" header-landing-group-16: padding: 10px header-landing-group-17: backgroundColor: "#DA1249" textColor: "#FFFFFF" rounded: 50px padding: 10px header-landing-cta: backgroundColor: transparent textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px rounded: 20px height: 40px header-landing-menu-toggle: backgroundColor: "#F2F2F2" textColor: "#222222" size: 40px header-landing-icon: size: 24px header-landing-icon-2: size: 16px header-landing-link-focus: rounded: 8px header-landing-link-2-focus: rounded: 8px header-landing-link-3-focus: rounded: 8px header-landing-link-4-focus: rounded: 8px header-landing-cta-hover: backgroundColor: "#F7F7F7" footer-landing: backgroundColor: "#F7F7F7" textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20.02px height: 705px footer-landing-heading: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 21px fontWeight: 700 lineHeight: 30.03px footer-landing-column-heading: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px footer-landing-link: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 18px rounded: 4px footer-landing-text: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20.02px footer-landing-group-4: padding: 4px footer-landing-text-2: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 18px footer-landing-link-focus: backgroundColor: "#3F3F3F" textColor: "#FFFFFF" button-ghost-3: backgroundColor: "#F2F2F2" textColor: "#C1C1C1" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 height: 28px button-ghost-3-label: textColor: "#C1C1C1" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 button-ghost-3-icon: size: 12px button-ghost-4: backgroundColor: "#F2F2F2" textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 height: 28px button-ghost-4-label: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 button-ghost-4-icon: size: 12px input-2: backgroundColor: transparent textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px height: 18px width: 214px card-4: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20.02px height: 265px card-4-group: rounded: 20px card-4-link: textColor: "#222222" rounded: 20px height: 247px width: 180px card-4-group-3: backgroundColor: "#DDDDDD" rounded: 20px card-4-text: textColor: "#6C6C6C" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 16px card-4-group-8: textColor: "#6C6C6C" carousel-section: textColor: "#222222" search-field-3: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20.02px rounded: 32px height: 66px search-field-3-text: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 16px search-field-3-text-2: textColor: "#6C6C6C" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 18px search-field-3-hover: backgroundColor: "#EBEBEB" search-field-4: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20.02px rounded: 32px height: 66px search-field-4-text: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 16px search-field-4-text-2: textColor: "#6C6C6C" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 18px search-field-4-hover: backgroundColor: "#EBEBEB" tab-active: backgroundColor: transparent textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px rounded: 8px height: 18px tab-active-focus: backgroundColor: "#F7F7F7" rounded: 4px tab: backgroundColor: transparent textColor: "#6C6C6C" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px rounded: 8px height: 18px tab-hover: textColor: "#222222" tab-focus: backgroundColor: "#F7F7F7" textColor: "#222222" rounded: 4px footer-setting-button: backgroundColor: transparent textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px rounded: 12px height: 30px footer-setting-button-group: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px footer-setting-button-icon: size: 16px footer-setting-button-hover: backgroundColor: "#EBEBEB" footer-setting-button-2: backgroundColor: transparent textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px rounded: 12px height: 30px footer-setting-button-2-text: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px footer-setting-button-2-hover: backgroundColor: "#EBEBEB" button-ghost-5: backgroundColor: "#F2F2F2" textColor: "#222222" height: 40px button-ghost-5-icon: size: 24px button-ghost-6: backgroundColor: "#F2F2F2" textColor: "#222222" height: 40px button-ghost-6-icon: size: 16px button-ghost-7: backgroundColor: transparent textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px rounded: 8px height: 18px button-ghost-7-icon: size: 12px button-ghost-7-focus: backgroundColor: "#F7F7F7" header-inner: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20.02px height: 96px header-inner-logo: textColor: "#FF385C" height: 80px width: 102px header-inner-logo-icon: height: 32px width: 102px header-inner-inner: rounded: 32px header-inner-inner-3: rounded: 40px header-inner-text: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20.02px header-inner-group-4: backgroundColor: "#FFFFFF" header-inner-group-6: backgroundColor: "#DA1249" textColor: "#FFFFFF" padding: 10px header-inner-cta: backgroundColor: transparent textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px rounded: 20px height: 40px header-inner-cta-2: backgroundColor: "#F2F2F2" textColor: "#222222" height: 40px header-inner-icon: size: 24px header-inner-icon-2: size: 16px header-inner-cta-hover: backgroundColor: "#F7F7F7" button-primary-2: backgroundColor: transparent textColor: "#FFFFFF" rounded: 999px height: 48px button-secondary-3: backgroundColor: "#F2F2F2" textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 16px rounded: 8px height: 32px button-secondary-3-group: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 16px button-secondary-3-icon: size: 16px button-secondary-3-hover: backgroundColor: "#EBEBEB" button-secondary-4: backgroundColor: "#F2F2F2" textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 20px rounded: 12px height: 48px button-secondary-4-hover: backgroundColor: "#EBEBEB" button-ghost-8: backgroundColor: transparent textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px rounded: 8px padding: 8px height: 34px button-ghost-8-group: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px button-ghost-8-icon: size: 16px button-ghost-8-hover: backgroundColor: "#F7F7F7" textColor: "#000000" button-ghost-8-focus: backgroundColor: "#F7F7F7" button-ghost-9: backgroundColor: transparent textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 20px rounded: 4px height: 18px button-ghost-9-group: textColor: "#6C6C6C" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px button-ghost-9-icon: size: 16px button-ghost-9-focus: backgroundColor: "#3F3F3F" textColor: "#FFFFFF" input-4: backgroundColor: transparent textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 16px fontWeight: 400 height: 48px input-4-label: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 16px fontWeight: 400 input-4-image: size: 48px input-4-label-2: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 22px input-5: backgroundColor: transparent textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 16px fontWeight: 400 rounded: 4px height: 48px input-5-label: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 16px fontWeight: 400 input-5-label-2: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 22px input-6: backgroundColor: transparent textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 16px fontWeight: 400 height: 48px input-6-label: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 16px fontWeight: 400 input-6-label-2: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 22px card-5: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 20px card-5-group-7: textColor: "#6C6C6C" card-5-text: textColor: "#6C6C6C" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 18px card-5-button: backgroundColor: transparent textColor: "#222222" rounded: 4px height: 24px width: 84px photo-gallery: backgroundColor: transparent textColor: "#222222" height: 476px photo-gallery-media: height: 21px width: 560px photo-gallery-2: backgroundColor: transparent textColor: "#222222" height: 238px photo-gallery-2-media: height: 21px width: 272px calendar: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 20px height: 222px calendar-cell: padding: 1px calendar-cell-2: backgroundColor: "#FFFFFF" calendar-text: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px calendar-cell-3: backgroundColor: "#F7F7F7" calendar-text-2: backgroundColor: "#222222" textColor: "#FFFFFF" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px calendar-cell-4: backgroundColor: "#F7F7F7" calendar-text-3: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px calendar-text-4: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 20px calendar-cell-5: backgroundColor: "#F7F7F7" calendar-text-5: textColor: "#6C6C6C" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px calendar-cell-6: backgroundColor: "#FFFFFF" calendar-text-6: textColor: "#8C8C8C" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 18px calendar-cell-7: backgroundColor: "#FFFFFF" calendar-2: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 20px height: 266px calendar-2-cell: padding: 1px calendar-2-cell-2: backgroundColor: "#FFFFFF" calendar-2-text: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px calendar-2-cell-3: backgroundColor: "#FFFFFF" calendar-2-cell-4: backgroundColor: "#FFFFFF" tab-2: backgroundColor: transparent textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 18px rounded: 16px height: 56px tab-2-media: height: 18px width: 20px tab-2-text: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px tab-2-text-2: textColor: "#8C8C8C" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 18px tab-3: backgroundColor: transparent textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 18px rounded: 16px height: 56px tab-3-media: height: 18px width: 20px tab-3-text: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px tab-3-text-2: textColor: "#8C8C8C" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 18px tab-4: backgroundColor: transparent textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 18px rounded: 16px height: 56px tab-4-media: height: 18px width: 20px tab-4-text: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px tab-4-text-2: textColor: "#8C8C8C" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 18px rating-summary: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 20px height: 84px rating-summary-text: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 16px rating-summary-list: textColor: "#6C6C6C" breadcrumb: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 20px height: 20px breadcrumb-link: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 18px breadcrumb-link-active: textColor: "#222222" breadcrumb-text: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 18px header-inner-2: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 16px fontWeight: 400 height: 80px header-inner-2-button: backgroundColor: transparent textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px rounded: 20px header-inner-2-menu-toggle: backgroundColor: "#F2F2F2" textColor: "#222222" size: 40px header-inner-2-logo: size: 24px header-inner-2-icon: size: 16px header-inner-2-button-hover: backgroundColor: "#F7F7F7" footer-inner: backgroundColor: "#F7F7F7" textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 20px height: 625px footer-inner-heading: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 20px footer-inner-column-heading: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px footer-inner-link: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 18px rounded: 4px footer-inner-text: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 20px footer-inner-group-6: padding: 4px footer-inner-text-2: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 18px footer-inner-link-focus: backgroundColor: "#3F3F3F" textColor: "#FFFFFF" footer-inner-mobile: backgroundColor: "#F7F7F7" textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 20px height: 1310px footer-inner-mobile-heading: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 20px footer-inner-mobile-column-heading: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px footer-inner-mobile-link: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 18px rounded: 4px footer-inner-mobile-heading-2: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px footer-inner-mobile-text: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 20px footer-inner-mobile-text-2: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 18px footer-inner-mobile-link-focus: backgroundColor: "#3F3F3F" textColor: "#FFFFFF" card-9: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20.02px height: 265px card-9-group: rounded: 20px card-9-link: textColor: "#222222" rounded: 20px height: 265px width: 180px card-9-group-3: backgroundColor: "#DDDDDD" rounded: 20px card-9-text: textColor: "#6C6C6C" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 16px card-9-text-2: textColor: "#6C6C6C" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 16px card-9-group-8: textColor: "#6C6C6C" card-10: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20.02px height: 263px card-10-group: rounded: 20px card-10-link: textColor: "#222222" rounded: 20px height: 247px width: 180px card-10-group-3: backgroundColor: "#DDDDDD" rounded: 20px card-10-text: textColor: "#6C6C6C" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 16px card-10-group-8: textColor: "#6C6C6C" section-carousel: textColor: "#222222" icon-button: backgroundColor: "#F2F2F2" textColor: "#222222" height: 40px icon-button-icon: size: 24px icon-button-2: backgroundColor: "#F2F2F2" textColor: "#222222" height: 40px icon-button-2-icon: size: 16px nav: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20.02px height: 80px nav-button: backgroundColor: transparent textColor: "#222222" rounded: 20px nav-text: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px nav-button-2: backgroundColor: "#F2F2F2" textColor: "#222222" size: 40px header-inner-3: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20.02px height: 96px header-inner-3-logo: textColor: "#FF385C" height: 80px width: 102px header-inner-3-logo-icon: height: 32px width: 102px header-inner-3-link: textColor: "#222222" header-inner-3-text: textColor: "#6C6C6C" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px header-inner-3-text-2: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20.02px header-inner-3-link-2: textColor: "#222222" header-inner-3-text-3: textColor: "#6C6C6C" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px header-inner-3-link-3: textColor: "#222222" header-inner-3-text-4: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px header-inner-3-link-4: textColor: "#222222" header-inner-3-text-5: textColor: "#6C6C6C" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px header-inner-3-inner: rounded: 32px header-inner-3-group-8: backgroundColor: "#FFFFFF" rounded: 100px header-inner-3-group-9: rounded: 100px header-inner-3-group-10: rounded: 32px header-inner-3-group-11: rounded: 32px header-inner-3-text-6: textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 16px header-inner-3-group-13: backgroundColor: "#DDDDDD" header-inner-3-group-16: padding: 10px header-inner-3-group-17: backgroundColor: "#DA1249" textColor: "#FFFFFF" rounded: 50px padding: 10px header-inner-3-cta: backgroundColor: transparent textColor: "#222222" typography: fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px rounded: 20px height: 40px header-inner-3-menu-toggle: backgroundColor: "#F2F2F2" textColor: "#222222" size: 40px header-inner-3-icon: size: 24px header-inner-3-icon-2: size: 16px header-inner-3-link-focus: rounded: 8px header-inner-3-link-2-focus: rounded: 8px header-inner-3-link-3-focus: rounded: 8px header-inner-3-link-4-focus: rounded: 8px header-inner-3-cta-hover: backgroundColor: "#F7F7F7" --- # Airbnb ## Overview Airbnb's interface is a white stage for photography. The chrome stays quiet: a near-black ink (`ink`, #222222) does almost all of the typographic work, a short grey ladder handles secondary and disabled text, and the coral brand color appears in only a handful of places (the logo, the search button, key CTAs). The listing photos carry the emotion; everything else exists to frame them and get out of the way. Density is medium-high but never cramped. The home and category pages are stacks of horizontal carousels of image-led cards, each with a bold left-aligned heading and a small circular arrow control. Card captions use a tight three-line hierarchy: a medium-weight title in `ink`, grey meta in `body-muted`, then price and rating. Type stays compact (11px to 26px across the whole ladder). Headings never get large, so hierarchy comes from weight steps (400 / 500 / 600 / 700) and from the ink-versus-grey contrast rather than from size. Geometry is soft and generous: 20px-rounded photo cards, a full-pill search bar with a circular coral button, pill CTAs and circular icon chips on a pale `surface-soft` fill. Depth is used with restraint but it is real. The search pill, the floating category tabs and the compact search bar carry diffuse, low-opacity shadows. Content cards carry none. **Key Characteristics:** - One typeface, Airbnb Cereal VF, for every role, with weights 400, 500, 600 and 700. - Ink-first text: `ink` (#222222) for primary text, `body-muted` (#6C6C6C) for meta, `text-disabled` (#C1C1C1) for inactive controls. - Coral used sparingly: `primary` (#FF385C) on the logo and `primary-active` (#DA1249) as the solid fill of the search button. - Pale fills instead of outlines for secondary controls: `surface-soft` (#F2F2F2) icon chips; `surface-footer` (#F7F7F7) hovers and the footer band. - 20px (`rounded.4xl`) is the dominant radius; pills and circles are used for search, CTAs and icon buttons. - Cards are flat photos; shadows are reserved for floating search and tab surfaces. - Focus is always a visible double ring built from box-shadow in `canvas` white and `ink`. ## Colors The palette is a neutral greyscale with a single coral accent. Roughly nine of every ten colored pixels in the sampled text are `ink`, so treat coral as punctuation, never as a fill for large areas. ### Brand & Accent - **Rausch Coral** (`primary`, #FF385C): the logo color (`header-landing-logo`, flagged: the `header-landing-group` y did not reproduce the measured 0px after 2 correction attempts). Use it for the brand mark and rare highlights. Never use it as body text or as a section background. - **Rausch Deep** (`primary-active`, #DA1249): the solid fill behind the search button and primary pill. It appears as `button-primary-group` with #FFFFFF text and 50px radius, and as `header-landing-group-17`. This is the only saturated fill on the page. No gradients were captured in the measured styles, so render this coral as a flat fill. - **On Coral** (`on-primary`, #FFFFFF): text and icons sitting on `primary-active`. ### Surface - **Canvas** (`canvas`, #FFFFFF): the page, the search pill body (`header-landing-group-8`) and calendar cells. - **Chip Fog** (`surface-soft`, #F2F2F2): the resting fill of circular icon buttons and menu toggles (`icon-button`, `menu-button`, `header-inner-2-menu-toggle`) and of the large secondary button `button-secondary-4`. - **Footer Mist** (`surface-footer`, #F7F7F7): the footer band (`footer-landing`, flagged: the original element could not be found again). It is also the hover fill of `button-secondary` and the focus fill of `nav-link` and `tab-active`. ### Text - **Ink** (`ink`, #222222): headings, titles, links, nav and button labels. It is also the selected-day fill in the calendar (`calendar-text-2`, flagged: the `calendar-row` height did not reproduce the measured 42px after 2 correction attempts). - **Slate** (`body-muted`, #6C6C6C): card meta lines, inactive nav tabs (`nav-link`) and search-field placeholders. - **Pewter** (`muted-soft`, #8C8C8C): tertiary counts in the category tabs (`tab-2-text-2`) and unavailable calendar days. - **Ghost** (`text-disabled`, #C1C1C1): disabled carousel arrows. For example, `carousel-arrow` (flagged: the original element could not be found again) sets #C1C1C1 on #F2F2F2. ### Hairlines & Borders - **Hairline** (`hairline`, #DDDDDD): the 1px border of the search pill (`header-landing-group-9`), segment dividers inside the search bar, and the placeholder fill behind card photos (`card-2-group-2`). - The footer divider uses a lighter 1px #EBEBEB top border (`footer-landing-group-2`). It is a recipe value, not a palette token. ### Component & State Colors These were measured only on components, never in the page sampling. - **Focus Graphite** (`focus-ring`, #3F3F3F): footer-link and legal-link focus. On focus the link fills #3F3F3F with #FFFFFF text and a 2px #3F3F3F box-shadow ring (`button-ghost-9`). - **Focus Ink** (`ink-focus`, #222222): the outer ring of the standard double focus ring. - **Pure Black** (`ink-black`, #000000): hover text on `button-ghost-8` (flagged: the render matched 95% of the original pixels, below the 97% required on focus after 2 correction attempts). - **Hover Fog**, #EBEBEB: the hover fill of `surface-soft` controls (`button-secondary-4-hover`) and of search segments (`search-field-3-hover`). It is not a token; reuse it only for hover. ## Typography ### Font Family **Airbnb Cereal VF** is the only family, used for display, UI and body text alike. The measured stack is `"Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif`. It is a variable font, which is why 600 sits between the more common 500 and 700. ### Hierarchy | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `display-lg` | 26px | 500 | 1.15 | normal | Page-level H1 (listing title) | | `title-lg` | 22px | 500 | 1.2 | -0.44px | Section headings on detail pages | | `title-md` | 20px | 600 | 1.2 | -0.18px | Carousel section headings | | `title-sm` | 16px | 500 | 1.25 | normal | Card titles, H3, emphasized buttons | | `body-lg` | 16px | 400 | 1.5 | normal | Long-form description text | | `body-md` | 16px | 400 | 1.25 | normal | Calendar, list items, compact 16px UI | | `body` | 14px | 400 | 1.45 | normal | Default body, links, header and footer text | | `body-relaxed` | 14px | 400 | 1.5 | normal | Multi-line 14px copy in buttons and spans | | `body-strong` | 14px | 500 | 1.45 | normal | Small H3 subheads | | `button` | 14px | 500 | 1.3 | normal | Button labels, nav tabs, inputs | | `nav-link` | 14px | 400 | 1.3 | normal | Plain list and nav links | | `caption-lg` | 13px | 400 | 1.25 | normal | Card subtitles | | `caption` | 12px | 400 | 1.35 | normal | Card meta (dates, distance), the most frequent style | | `caption-medium` | 12px | 500 | 1.35 | normal | Search segment labels (Where / When / Who) | | `caption-strong` | 12px | 700 | 1.35 | normal | Prices and rating emphasis | | `micro` | 11px | 600 | 1.2 | normal | Badges such as Guest favorite | ### Principles - **The ladder is compact.** Nothing exceeds 26px. The footer headings are the largest bold text: 21px/700 on `footer-landing-heading` and 24px/700 on `footer-inner-heading`. Do not add hero-scale display sizes. - **Weight carries hierarchy.** 500 is the workhorse for titles, labels and buttons. 600 is reserved for `title-md` and `micro`. 700 appears only at 12px (`caption-strong`) for prices. 400 covers running text. - **Negative tracking only on titles.** Only `title-lg` (-0.44px) and `title-md` (-0.18px) are tightened. Every other style uses normal tracking. - **Line height scales inversely with size.** It is tight (1.15–1.25) on headings and compact UI. Reading text opens to 1.45–1.5 (`body`, `body-lg`, `body-relaxed`). - **Color does half the hierarchy.** The same 12px style flips between `ink` and `body-muted` to separate title from meta, as in `card-2-text` versus `card-2-group-10`. ### Note on Font Substitutes Airbnb Cereal is proprietary. The best open-source stand-in is **DM Sans**, which is geometric, has round terminals and is available as a variable font with intermediate weights. **Inter** is the safer fallback. - Keep the token sizes and weights unchanged. - Inter runs slightly wider and taller than Cereal, so tighten headings a touch beyond the token tracking. - Check that 500 still reads as distinctly heavier than 400, because the hierarchy depends on that step. - Keep `-apple-system, system-ui` in the fallback stack, as the measured stack does. ## Layout ### Spacing System No `base` step was published. The verified spacing tokens all come from controls: | Token | Value | Measured on | |---|---|---| | `header-inner-2-gap` | 12px | Gap of the flex row holding the host CTA and the circular menu toggles in `header-inner-2` | | `button-secondary-padding-y` | 11px | Vertical padding of the pill nav CTA `button-secondary` | | `button-secondary-padding-x` | 12px | Horizontal padding of `button-secondary` | | `button-primary-2-padding-y` | 14px | Vertical padding of the full-pill primary `button-primary-2` | | `button-primary-2-padding-x` | 24px | Horizontal padding of `button-primary-2` | | `button-secondary-4-padding-y` | 14px | Vertical padding of the grey `button-secondary-4` | | `button-secondary-4-padding-x` | 24px | Horizontal padding of `button-secondary-4` | Two patterns follow from this table: - **Large buttons share one padding pair.** Primary and large secondary buttons both use 14px vertical by 24px horizontal (`button-primary-2-padding-y` / `button-primary-2-padding-x`). No vertical section rhythm token was measured. ### Grid & Container No container max-width was verified, so center content within generous side margins and do not hard-code a width. - **Home and category pages** are vertically stacked, full-width horizontal carousels. Each row is a run of equal-width image cards on a gap matching `header-inner-2-gap` (12px). - **Headers** center the category tabs and the pill search bar. The logo sits at left; the host CTA and menu toggles sit at right. - **Listing detail pages** use a two-column body with a sticky booking panel and a photo mosaic above. - **Footers** use a multi-column link grid (Support / Hosting / Airbnb), preceded by a tabbed inspiration link grid. ### Whitespace Philosophy - **Images set the rhythm.** Whitespace around carousels is generous, while text inside cards is tightly packed. - **Separate with space and tone, not rules.** Distinguish sections by vertical breathing room and by the shift to `surface-footer`. Hairlines appear only inside the search bar and above the footer's legal row. ### Measured Layout Every spacing token restates a measurement of a verified component recipe, or the step those measurements share. - `header-inner-2-gap`: 12px (`header-inner-2`, gap of `header-inner-2-group`) - `button-secondary-padding-y`: 11px (`button-secondary`, vertical padding of the root) - `button-secondary-padding-x`: 12px (`button-secondary`, horizontal padding of the root) - `button-primary-2-padding-y`: 14px (`button-primary-2`, vertical padding of the root) - `button-primary-2-padding-x`: 24px (`button-primary-2`, horizontal padding of the root) - `button-secondary-4-padding-y`: 14px (`button-secondary-4`, vertical padding of the root) - `button-secondary-4-padding-x`: 24px (`button-secondary-4`, horizontal padding of the root) ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat | No shadow; content sits on `canvas` | Listing and destination cards, page body, footer band on `surface-footer` | | Hairline | 1px solid #DDDDDD (`hairline`); 1px top border #EBEBEB | Search pill outline (`header-landing-group-9`); footer legal divider (`footer-landing-group-2`) | | Compact lift | `#00000014 0px 1px 2px 0px, #0000000D 0px 4px 12px 0px` plus 1px solid #DDDDDD | Condensed search bar on inner pages (`header-inner-group-4`) | | Soft float | `#00000012 0px 4px 20px 0px` plus 1px solid #F2F2F2; hover border becomes 1px solid #C1C1C1, focus becomes 1px solid #8C8C8C | Floating category tab tiles (`tab-2`, flagged: the `tab-2-media` y did not reproduce the measured 20px after 2 correction attempts) | | Search pill | `color(srgb 0 0 0 / 0.02) 0px 0px 0px 1px, color(srgb 0 0 0 / 0.1) 0px 8px 24px 0px` plus 1px solid #DDDDDD | Hero search bar (`header-landing-group-9`) | | Page-level layered | `color(srgb 0 0 0 / 0.02) 0px 0px 0px 1px, color(srgb 0 0 0 / 0.04) 0px 2px 6px 0px, color(srgb 0 0 0 / 0.1) 0px 4px 8px 0px` (most frequent, 4 pages); `rgba(0, 0, 0, 0.08) 0px 1px 2px 0px, rgba(0, 0, 0, 0.05) 0px 4px 12px 0px`; `rgba(0, 0, 0, 0.12) 0px 6px 16px 0px` | Floating pills on photos, booking panel, menus and popovers sampled on pages | | Focus ring | `#FFFFFF 0px 0px 0px 2px, #222222 0px 0px 0px 4px` (`button-primary`); `#222222 0px 0px 0px 2px` (`button-secondary`); `#3F3F3F 0px 0px 0px 2px` (`button-ghost-9`) | Keyboard focus on every interactive element | | Blur | None measured | — | **Shadow philosophy.** Shadows are real but rationed, and they belong to things that float, never to content. - **What gets a shadow:** the search pill, the condensed search bar, the category tabs and overlays on imagery. - **How shadows are built:** an almost invisible 1px spread at 0.02 alpha acts as a crisp edge. One or two wide, low-alpha blurs (0.04–0.12) sit under it. Nothing is ever darker than 0.12 alpha. - **What stays flat:** listing cards. Their photo and 20px radius are their only definition, so never add a card shadow. - **Focus uses the same mechanism.** Rings are box-shadows, not outlines, with a white inner ring that separates them from photos and fills. The header links are the exception: they use `outline: 2px solid #222222` with a 4px offset. ## Shapes ### Border Radius Scale | Token | Value | Use | |---|---|---| | `rounded.2xs` | 3px | Rare micro elements | | `rounded.xs` | 4px | Footer and legal links (`footer-landing-link`), focus fill of nav tabs (`nav-link-focus`), small text buttons (`button-ghost-9`) | | `rounded.sm` | 6px | Rare small chips | | `rounded.md` | 8px | Nav tabs (`nav-link`, `tab-active`), compact grey chip `button-secondary-3`, header link focus | | `rounded.lg` | 10px | Detail-page elements | | `rounded.xl` | 12px | Large grey button `button-secondary-4`, footer setting buttons | | `rounded.2xl` | 14px | Secondary containers seen on 4 pages | | `rounded.3xl` | 16px | Floating category tab tiles (`tab-2`) | | `rounded.4xl` | 20px | Dominant radius: card photos and links (`card-2-link`), the nav CTA pill (`button-secondary`) | | `rounded.5xl` | 24px | Rare large panels | | `rounded.6xl` | 32px | Search segments (`search-field-3`), search-bar inner rows (`header-landing-inner`) | | `rounded.7xl` | 40px | Condensed search bar row (`header-inner-inner-3`) | | `rounded.8xl` | 50px | Search button and coral pill (`button-primary`, `button-primary-group`) | | `rounded.9xl` | 100px | Full-pill search bar shell (`header-landing-group-8`) | ### Geometry character Nothing in the interface has a sharp corner. The scale is weighted heavily toward the large end. `rounded.4xl` (20px) is by far the most frequent radius and defines every photo card, so treat it as the default for any content tile. Pills are a first-class shape: - **Full pills:** the hero search bar (`rounded.9xl`), the coral search button (`rounded.8xl`) and the full primary button `button-primary-2` at 999px. - **Circles:** icon buttons and menu toggles, such as the 40px `header-inner-2-menu-toggle` and `icon-button`, render as circles on `surface-soft`, as do the carousel arrows. Smaller radii (4px–12px) are reserved for text-level controls and focus fills, where a pill would look bloated. ## Components Each component below was distilled from the live page: the recipe is a standalone, placeholder-filled reproduction with literal values, and every frontmatter key named in the anatomy carries the same measurements. A verified component reproduced the original in every check; a flagged one is shipped with the reason it did not; one marked not verifiable could not be compared with the original, which says nothing about the recipe. ### Button, primary **Verification**: verified against the live page at desktop. **Anatomy** - `button-primary`: the component root, a ` ``` ```css .c-button-primary-scope { background-color: #FFFFFF; color: #222222; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 400; line-height: 20.02px; } .c-button-primary { display: inline-block; border-spacing: 0px; box-sizing: border-box; padding: 0px; background-color: transparent; color: #222222; border: 0; border-radius: 50px; cursor: pointer; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 400; line-height: 20.02px; letter-spacing: normal; text-transform: none; text-align: start; } .c-button-primary__group { display: flex; justify-content: center; align-items: center; box-sizing: border-box; width: 48px; height: 48px; padding: 10px; background-color: #DA1249; color: #FFFFFF; border-radius: 50px; } .c-button-primary__icon { display: block; flex-shrink: 0; box-sizing: border-box; width: 16px; height: 16px; background-color: currentcolor; } .c-button-primary:focus { box-shadow: #FFFFFF 0px 0px 0px 2px, #222222 0px 0px 0px 4px; outline: none; } ``` **States** - focus: box-shadow #FFFFFF 0px 0px 0px 2px, #222222 0px 0px 0px 4px, outline none ### Button, secondary **Verification**: verified against the live page at desktop. **Anatomy** - `button-secondary`: the component root, a ` ``` ```css .c-button-secondary-scope { background-color: #FFFFFF; color: #222222; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 400; line-height: 20.02px; } .c-button-secondary { display: inline-block; border-spacing: 0px; box-sizing: border-box; padding: 11px 12px; position: relative; background-color: transparent; color: #222222; border: 0; border-radius: 20px; cursor: pointer; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; line-height: 18px; letter-spacing: normal; text-transform: none; text-align: center; white-space: nowrap; appearance: button; transition-duration: 0.2s, 0.25s, 0.3s, 0.3s, 0.3s; transition-timing-function: cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1); transition-property: box-shadow, transform, background-color, border-color, color; } .c-button-secondary:hover { background-color: #F7F7F7; } .c-button-secondary:focus { box-shadow: #222222 0px 0px 0px 2px; outline: none; } ``` **States** - hover (`button-secondary-hover`): background-color #F7F7F7 - focus: box-shadow #222222 0px 0px 0px 2px, outline none ### Button, secondary (2) **Verification**: flagged, the original element was not visible when verification ran. **Anatomy** - `button-secondary-2`: the component root, a ` ``` ```css .c-button-secondary-2-scope { background-color: #F7F7F7; color: #222222; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 400; line-height: 20.02px; } .c-button-secondary-2 { display: flex; align-items: center; gap: 4px; border-spacing: 0px; box-sizing: border-box; padding: 0px; position: relative; background-color: transparent; color: #222222; border: 0; border-radius: 8px; cursor: pointer; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; line-height: 18px; letter-spacing: normal; text-transform: none; text-align: center; list-style-type: none; appearance: button; transition-duration: 0.2s, 0.1s; transition-timing-function: cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1); transition-property: box-shadow, transform; } .c-button-secondary-2__icon { display: block; flex-shrink: 0; box-sizing: border-box; width: 12px; height: 12px; background-color: currentcolor; } .c-button-secondary-2:focus { background-color: #F7F7F7; box-shadow: #222222 0px 0px 0px 2px, #FFFFFFCC 0px 0px 0px 4px; outline: none; text-decoration-line: underline; } ``` **States** - focus (`button-secondary-2-focus`): background-color #F7F7F7, box-shadow #222222 0px 0px 0px 2px, #FFFFFFCC 0px 0px 0px 4px, outline none, text-decoration-line underline ### Button, ghost **Verification**: flagged, the original element could not be found again. **Anatomy** - `button-ghost`: the component root, a ` ``` ```css .c-button-ghost-scope { background-color: #F7F7F7; color: #222222; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 400; line-height: 20.02px; } .c-button-ghost { display: inline-block; border-spacing: 0px; box-sizing: border-box; padding: 6px 8px; position: relative; background-color: transparent; color: #222222; border: 0; border-radius: 12px; cursor: pointer; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; line-height: 18px; letter-spacing: normal; text-transform: none; text-align: center; appearance: button; transition-duration: 0.2s, 0.25s, 0.3s, 0.3s, 0.3s; transition-timing-function: cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1); transition-property: box-shadow, transform, background-color, border-color, color; } .c-button-ghost__group { display: inline-flex; justify-content: center; align-items: center; gap: 8px; box-sizing: border-box; vertical-align: top; } .c-button-ghost__icon { display: block; flex-shrink: 0; box-sizing: border-box; width: 16px; height: 16px; overflow-x: hidden; overflow-y: hidden; background-color: currentcolor; } .c-button-ghost:hover { background-color: #EBEBEB; } .c-button-ghost:focus { box-shadow: #222222 0px 0px 0px 2px; outline: none; } ``` **States** - hover (`button-ghost-hover`): background-color #EBEBEB - focus: box-shadow #222222 0px 0px 0px 2px, outline none ### Button, ghost (2) **Verification**: flagged, the original element could not be found again. **Anatomy** - `button-ghost-2`: the component root, a ` ``` ```css .c-button-ghost-2-scope { background-color: #F7F7F7; color: #222222; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 400; line-height: 20.02px; } .c-button-ghost-2 { display: inline-block; border-spacing: 0px; box-sizing: border-box; padding: 6px 8px; position: relative; background-color: transparent; color: #222222; border: 0; border-radius: 12px; cursor: pointer; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; line-height: 18px; letter-spacing: normal; text-transform: none; text-align: center; appearance: button; transition-duration: 0.2s, 0.25s, 0.3s, 0.3s, 0.3s; transition-timing-function: cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1); transition-property: box-shadow, transform, background-color, border-color, color; } .c-button-ghost-2__label { display: flex; gap: 8px; box-sizing: border-box; } .c-button-ghost-2:hover { background-color: #EBEBEB; } .c-button-ghost-2:focus { box-shadow: #222222 0px 0px 0px 2px; outline: none; } ``` **States** - hover (`button-ghost-2-hover`): background-color #EBEBEB - focus: box-shadow #222222 0px 0px 0px 2px, outline none ### Card **Verification**: flagged, the original element could not be found again. **Anatomy** - Group: 6 instances in a 20-column grid, 12px gap; the recipe carries the values they all share - `card`: the component root, a `` (`.c-card`) - `card-group`: inner block (`.c-card__group`) - `card-media`: image placeholder, 124x18px (`.c-card__media`) - `card-text`: label text, 5 characters (`.c-card__text`) - `card-text-2`: label text, 20 characters (`.c-card__text-2`) **Recipe** ```html
lorem
lorem ipsum dolor si
``` ```css .c-card-scope { background-color: #FFFFFF; color: #222222; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 400; line-height: 20.02px; } .c-card { display: inline-block; border-spacing: 0px; box-sizing: border-box; position: relative; color: #222222; border-radius: 20px 20px 10px 10px; cursor: pointer; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 400; line-height: 20.02px; text-decoration-line: none; transition-duration: 0.2s, 0.1s; transition-timing-function: cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1); transition-property: box-shadow, transform; } .c-card__group { display: block; box-sizing: border-box; aspect-ratio: 20 / 19; position: relative; vertical-align: bottom; border-radius: 20px; } .c-card__media { display: inline-block; flex-shrink: 0; box-sizing: border-box; width: 124px; height: 18px; background-color: currentcolor; } .c-card__text { display: block; box-sizing: border-box; font-size: 13px; font-weight: 500; line-height: 16px; padding-right: 4px; padding-left: 4px; margin-top: 8px; } .c-card__text-2 { display: block; box-sizing: border-box; color: #6C6C6C; font-size: 12px; line-height: 16px; padding-right: 4px; padding-left: 4px; margin-top: 2px; } .c-card:focus { box-shadow: #FFFFFFCC 0px 0px 0px 2px, #222222 0px 0px 0px 4px; outline: none; } ``` **States** - focus: box-shadow #FFFFFFCC 0px 0px 0px 2px, #222222 0px 0px 0px 4px, outline none ### Card (2) **Verification**: flagged, the original element could not be found again. **Anatomy** - Group: 6 instances in a 9-column grid, 12px gap; the recipe carries the values they all share - `card-2`: the component root, a `
` (`.c-card-2`) - `card-2-link`: link (`.c-card-2__link`) - `card-2-group`: inner flex column (`.c-card-2__group`) - `card-2-group-2`: inner block (`.c-card-2__group-2`) - `card-2-group-3`: inner block (`.c-card-2__group-3`), content not captured - `card-2-group-4`: inner grid (`.c-card-2__group-4`) - `card-2-group-5`: inner grid (`.c-card-2__group-5`), content not captured - `card-2-group-6`: inner grid (`.c-card-2__group-6`) - `card-2-group-7`: inner grid (`.c-card-2__group-7`) - `card-2-group-8`: inner grid (`.c-card-2__group-8`) - `card-2-group-9`: inner group (`.c-card-2__group-9`) - `card-2-text`: label text, 17 characters (`.c-card-2__text`) - `card-2-group-10`: inner block (`.c-card-2__group-10`) - `card-2-text-2`: label text, 9 characters (`.c-card-2__text-2`, 2 instances) - `card-2-group-11`: inner group (`.c-card-2__group-11`), content not captured - `card-2-group-12`: inner flex row (`.c-card-2__group-12`) - `card-2-group-13`: inner block (`.c-card-2__group-13`), content not captured - `card-2-group-14`: inner group (`.c-card-2__group-14`), content not captured - `card-2-group-15`: inner flex row (`.c-card-2__group-15`), content not captured **Recipe** ```html
lorem ipsum dolor
lorem ips lorem ipsum dol
``` ```css .c-card-2-scope { background-color: #FFFFFF; color: #222222; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 400; line-height: 20.02px; } .c-card-2 { display: inline-block; border-spacing: 0px; box-sizing: border-box; position: relative; color: #222222; border-radius: 20px; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 400; line-height: 20.02px; } .c-card-2__link { display: block; box-sizing: border-box; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: #222222; border-radius: 20px; cursor: pointer; text-decoration-line: none; } .c-card-2__group { display: flex; flex-direction: column; flex-grow: 1; flex-shrink: 0; flex-basis: 100%; gap: 8px; box-sizing: border-box; } .c-card-2__group-2 { display: block; box-sizing: border-box; position: relative; z-index: 0; overflow-x: clip; overflow-y: clip; background-color: #DDDDDD; border-radius: 20px; } .c-card-2__group-3 { display: block; box-sizing: border-box; aspect-ratio: 20 / 19; } .c-card-2__group-4 { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); grid-template-rows: repeat(3, minmax(0px, 1fr)); box-sizing: border-box; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; overflow-x: hidden; overflow-y: hidden; padding-top: 12px; padding-right: 12px; padding-left: 12px; } .c-card-2__group-5 { display: grid; column-gap: 8px; grid-template-columns: repeat(2, minmax(min-content, auto)); box-sizing: border-box; } .c-card-2__group-6 { display: grid; align-items: center; column-gap: 12px; grid-template-columns: repeat(2, minmax(min-content, auto)); box-sizing: border-box; margin-bottom: 12px; } .c-card-2__group-7 { display: grid; align-items: flex-end; column-gap: 8px; grid-template-columns: repeat(3, minmax(min-content, 1fr)); box-sizing: border-box; } .c-card-2__group-8 { display: grid; gap: 2px; grid-template-columns: minmax(0px, 1fr); box-sizing: border-box; margin-right: 4px; margin-left: 4px; } .c-card-2__group-9 { display: block; box-sizing: border-box; font-size: 13px; line-height: 16px; } .c-card-2__text { display: flow-root; box-sizing: border-box; overflow-x: clip; overflow-y: clip; font-weight: 500; text-overflow: ellipsis; } .c-card-2__group-10 { display: block; box-sizing: border-box; color: #6C6C6C; font-size: 12px; line-height: 16px; } .c-card-2__group-11 { display: inline; box-sizing: border-box; color: #C1C1C1; font-weight: 700; } .c-card-2__group-12 { display: flex; flex-wrap: wrap; box-sizing: border-box; color: #6C6C6C; font-size: 12px; line-height: 16px; } .c-card-2__group-13 { display: block; box-sizing: border-box; } .c-card-2__group-14 { display: block; box-sizing: border-box; color: #C1C1C1; font-weight: 700; } .c-card-2__group-15 { display: flex; align-items: baseline; column-gap: 2.5px; box-sizing: border-box; margin-top: auto; margin-bottom: auto; } ``` **States** - No hover or focus change was observed. ### Card (3) **Verification**: flagged, the original element could not be found again. **Anatomy** - Group: 6 instances in a 9-column grid, 12px gap; the recipe carries the values they all share - `card-3`: the component root, a `
` (`.c-card-3`) - `card-3-link`: link (`.c-card-3__link`) - `card-3-group`: inner flex column (`.c-card-3__group`) - `card-3-group-2`: inner block (`.c-card-3__group-2`) - `card-3-group-3`: inner block (`.c-card-3__group-3`), content not captured - `card-3-group-4`: inner grid (`.c-card-3__group-4`) - `card-3-group-5`: inner grid (`.c-card-3__group-5`), content not captured - `card-3-group-6`: inner grid (`.c-card-3__group-6`) - `card-3-group-7`: inner grid (`.c-card-3__group-7`) - `card-3-group-8`: inner grid (`.c-card-3__group-8`) - `card-3-group-9`: inner group (`.c-card-3__group-9`) - `card-3-text`: label text, 23 characters (`.c-card-3__text`) - `card-3-group-10`: inner flex row (`.c-card-3__group-10`) - `card-3-group-11`: inner block (`.c-card-3__group-11`), content not captured - `card-3-group-12`: inner group (`.c-card-3__group-12`), content not captured - `card-3-group-13`: inner flex row (`.c-card-3__group-13`), content not captured **Recipe** ```html
lorem ipsum dolor sit a
``` ```css .c-card-3-scope { background-color: #FFFFFF; color: #222222; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 400; line-height: 20.02px; } .c-card-3 { display: inline-block; border-spacing: 0px; box-sizing: border-box; position: relative; color: #222222; border-radius: 20px; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 400; line-height: 20.02px; } .c-card-3__link { display: block; box-sizing: border-box; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: #222222; border-radius: 20px; cursor: pointer; text-decoration-line: none; } .c-card-3__group { display: flex; flex-direction: column; flex-grow: 1; flex-shrink: 0; flex-basis: 100%; gap: 8px; box-sizing: border-box; } .c-card-3__group-2 { display: block; box-sizing: border-box; position: relative; z-index: 0; overflow-x: clip; overflow-y: clip; background-color: #DDDDDD; border-radius: 20px; } .c-card-3__group-3 { display: block; box-sizing: border-box; aspect-ratio: 20 / 19; } .c-card-3__group-4 { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); grid-template-rows: repeat(3, minmax(0px, 1fr)); box-sizing: border-box; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; overflow-x: hidden; overflow-y: hidden; padding-top: 12px; padding-right: 12px; padding-left: 12px; } .c-card-3__group-5 { display: grid; column-gap: 8px; grid-template-columns: repeat(2, minmax(min-content, auto)); box-sizing: border-box; } .c-card-3__group-6 { display: grid; align-items: center; column-gap: 12px; grid-template-columns: repeat(2, minmax(min-content, auto)); box-sizing: border-box; margin-bottom: 12px; } .c-card-3__group-7 { display: grid; align-items: flex-end; column-gap: 8px; grid-template-columns: repeat(3, minmax(min-content, 1fr)); box-sizing: border-box; } .c-card-3__group-8 { display: grid; gap: 2px; grid-template-columns: minmax(0px, 1fr); box-sizing: border-box; margin-right: 4px; margin-left: 4px; } .c-card-3__group-9 { display: block; box-sizing: border-box; font-size: 13px; line-height: 16px; } .c-card-3__text { display: flow-root; box-sizing: border-box; overflow-x: clip; overflow-y: clip; font-weight: 500; text-overflow: ellipsis; } .c-card-3__group-10 { display: flex; flex-wrap: wrap; box-sizing: border-box; color: #6C6C6C; font-size: 12px; line-height: 16px; } .c-card-3__group-11 { display: block; box-sizing: border-box; } .c-card-3__group-12 { display: block; box-sizing: border-box; color: #C1C1C1; font-weight: 700; } .c-card-3__group-13 { display: flex; align-items: baseline; column-gap: 2.5px; box-sizing: border-box; margin-top: auto; margin-bottom: auto; } ``` **States** - No hover or focus change was observed. ### Wishlist button **Verification**: flagged, the original element could not be found again. **Anatomy** - `wishlist-button`: the component root, a `
``` ```css .c-wishlist-button-scope { background-color: #DDDDDD; color: #222222; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 400; line-height: 20.02px; } .c-wishlist-button { display: inline-flex; justify-content: center; align-items: center; border-spacing: 0px; box-sizing: border-box; width: 32px; height: 32px; padding: 2px 0px 0px; background-color: transparent; color: #222222; border: 0; border-radius: 50%; cursor: pointer; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 16px; font-weight: 500; line-height: 20px; letter-spacing: normal; text-transform: none; text-align: center; appearance: button; transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1); } .c-wishlist-button__icon { display: block; flex-shrink: 0; box-sizing: border-box; width: 24px; height: 24px; background-color: currentcolor; } .c-wishlist-button:hover { transform: matrix(1.08, 0, 0, 1.08, 0, 0); } .c-wishlist-button:focus { box-shadow: #FFFFFF 0px 0px 0px 2px, #222222 0px 0px 0px 4px; outline: none; transform: matrix(1.08, 0, 0, 1.08, 0, 0); } ``` **States** - hover: transform matrix(1.08, 0, 0, 1.08, 0, 0) - focus: box-shadow #FFFFFF 0px 0px 0px 2px, #222222 0px 0px 0px 4px, outline none, transform matrix(1.08, 0, 0, 1.08, 0, 0) ### Nav link **Verification**: flagged, the render matched 30% of the original pixels, below the 96% required after 2 correction attempts. **Anatomy** - `nav-link-active`: the component root, a `
``` ```css .c-nav-link-active-scope { background-color: #F7F7F7; color: #222222; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 400; line-height: 20.02px; } .c-nav-link-active { display: inline-block; border-spacing: 0px; box-sizing: border-box; padding: 0px 16px; position: relative; background-color: transparent; color: #222222; border: 0; border-radius: 8px; cursor: default; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; line-height: 18px; letter-spacing: normal; text-transform: none; text-align: center; white-space: nowrap; appearance: button; transition-duration: 0.2s, 0.1s, 0.1s; transition-timing-function: cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0, 0, 1, 1); transition-property: box-shadow, transform, color; } .c-nav-link-active:focus { background-color: #F7F7F7; border-radius: 4px; box-shadow: #222222 0px 0px 0px 2px, #FFFFFFCC 0px 0px 0px 4px; outline: none; } ``` **States** - focus (`nav-link-active-focus`): background-color #F7F7F7, border-radius 4px, box-shadow #222222 0px 0px 0px 2px, #FFFFFFCC 0px 0px 0px 4px, outline none ### Nav link **Verification**: verified against the live page at desktop. **Anatomy** - `nav-link`: the component root, a ` ``` ```css .c-nav-link-scope { background-color: #F7F7F7; color: #222222; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 400; line-height: 20.02px; } .c-nav-link { display: inline-block; border-spacing: 0px; box-sizing: border-box; padding: 0px 16px; position: relative; background-color: transparent; color: #6C6C6C; border: 0; border-radius: 8px; cursor: pointer; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; line-height: 18px; letter-spacing: normal; text-transform: none; text-align: center; white-space: nowrap; appearance: button; transition-duration: 0.2s, 0.1s, 0.1s; transition-timing-function: cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0, 0, 1, 1); transition-property: box-shadow, transform, color; } .c-nav-link:focus { background-color: #F7F7F7; color: #222222; border-radius: 4px; box-shadow: #222222 0px 0px 0px 2px, #FFFFFFCC 0px 0px 0px 4px; outline: none; } ``` **States** - focus (`nav-link-focus`): background-color #F7F7F7, color #222222, border-radius 4px, box-shadow #222222 0px 0px 0px 2px, #FFFFFFCC 0px 0px 0px 4px, outline none ### Carousel arrow **Verification**: flagged, the original element could not be found again. **Anatomy** - `carousel-arrow`: the component root, a ` ``` ```css .c-carousel-arrow-scope { background-color: #FFFFFF; color: #222222; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 400; line-height: 20.02px; } .c-carousel-arrow { display: inline-flex; justify-content: center; align-items: center; border-spacing: 0px; box-sizing: border-box; width: 28px; height: 28px; padding: 0px; position: relative; background-color: #F2F2F2; color: #C1C1C1; border: 0; border-radius: 50%; opacity: 0.5; cursor: not-allowed; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 400; line-height: normal; letter-spacing: normal; text-transform: none; text-align: center; transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1); } .c-carousel-arrow::before { content: ""; display: block; box-sizing: border-box; width: 28px; height: 28px; position: absolute; top: 14px; right: -14px; bottom: -14px; left: 14px; background-color: #F2F2F2; border-radius: 50%; transform: matrix(1, 0, 0, 1, -14, -14); transition-duration: 0.3s, 0.3s, 0.3s, 0.3s; transition-timing-function: cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1); transition-property: background-color, border-color, backdrop-filter, -webkit-backdrop-filter; } .c-carousel-arrow__group { display: flex; justify-content: center; align-items: center; box-sizing: border-box; height: 100%; position: relative; transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1); } .c-carousel-arrow__text { display: block; box-sizing: border-box; width: 1px; height: 1px; position: absolute; overflow-x: clip; overflow-y: clip; white-space: nowrap; } .c-carousel-arrow__icon { display: block; flex-shrink: 0; box-sizing: border-box; width: 12px; height: 12px; background-color: currentcolor; } .c-carousel-arrow:hover { transform: matrix(1, 0, 0, 1, 0, 0); } .c-carousel-arrow:focus { outline: none; } ``` **States** - hover: transform matrix(1, 0, 0, 1, 0, 0) - focus: outline none ### Carousel arrow (2) **Verification**: flagged, the original element could not be found again. **Anatomy** - `carousel-arrow-2`: the component root, a ` ``` ```css .c-carousel-arrow-2-scope { background-color: #FFFFFF; color: #222222; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 400; line-height: 20.02px; } .c-carousel-arrow-2 { display: inline-flex; justify-content: center; align-items: center; border-spacing: 0px; box-sizing: border-box; width: 28px; height: 28px; padding: 0px; position: relative; background-color: #F2F2F2; color: #222222; border: 0; border-radius: 50%; cursor: pointer; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 400; line-height: normal; letter-spacing: normal; text-transform: none; text-align: center; transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1); } .c-carousel-arrow-2::before { content: ""; display: block; box-sizing: border-box; width: 28px; height: 28px; position: absolute; top: 14px; right: -14px; bottom: -14px; left: 14px; background-color: #F2F2F2; border-radius: 50%; transform: matrix(1, 0, 0, 1, -14, -14); transition-duration: 0.3s, 0.3s, 0.3s, 0.3s; transition-timing-function: cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1); transition-property: background-color, border-color, backdrop-filter, -webkit-backdrop-filter; } .c-carousel-arrow-2__group { display: flex; justify-content: center; align-items: center; box-sizing: border-box; height: 100%; position: relative; transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1); } .c-carousel-arrow-2__text { display: block; box-sizing: border-box; width: 1px; height: 1px; position: absolute; overflow-x: clip; overflow-y: clip; white-space: nowrap; } .c-carousel-arrow-2__icon { display: block; flex-shrink: 0; box-sizing: border-box; width: 12px; height: 12px; background-color: currentcolor; } .c-carousel-arrow-2:hover { transform: matrix(1.07143, 0, 0, 1.07143, 0, 0); } .c-carousel-arrow-2:hover::before { background-color: #EBEBEB; } .c-carousel-arrow-2:focus { outline: none; } .c-carousel-arrow-2:focus::before { box-shadow: #FFFFFF 0px 0px 0px 2px, #222222 0px 0px 0px 4px; } ``` **States** - hover: transform matrix(1.07143, 0, 0, 1.07143, 0, 0), ::before background-color #EBEBEB - focus: outline none, ::before box-shadow #FFFFFF 0px 0px 0px 2px, #222222 0px 0px 0px 4px ### Menu button **Verification**: verified against the live page at desktop. **Anatomy** - `menu-button`: the component root, a ` ``` ```css .c-menu-button-scope { background-color: #FFFFFF; color: #222222; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 400; line-height: 20.02px; } .c-menu-button { display: inline-flex; justify-content: center; align-items: center; border-spacing: 0px; box-sizing: border-box; width: 40px; height: 40px; padding: 0px; position: relative; background-color: #F2F2F2; color: #222222; border: 0; border-radius: 50%; cursor: pointer; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 400; line-height: normal; letter-spacing: normal; text-transform: none; text-align: center; transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1); } .c-menu-button::before { content: ""; display: block; box-sizing: border-box; width: 40px; height: 40px; position: absolute; top: 20px; right: -20px; bottom: -20px; left: 20px; background-color: #F2F2F2; border-radius: 50%; transform: matrix(1, 0, 0, 1, -20, -20); transition-duration: 0.3s, 0.3s, 0.3s, 0.3s; transition-timing-function: cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1); transition-property: background-color, border-color, backdrop-filter, -webkit-backdrop-filter; } .c-menu-button__group { display: flex; justify-content: center; align-items: center; box-sizing: border-box; width: 40px; height: 40px; position: relative; transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1); } .c-menu-button__icon { display: block; flex-shrink: 0; box-sizing: border-box; width: 24px; height: 24px; background-color: currentcolor; } .c-menu-button:hover::before { background-color: #EBEBEB; } .c-menu-button:focus { outline: none; } .c-menu-button:focus::before { box-shadow: #FFFFFF 0px 0px 0px 2px, #222222 0px 0px 0px 4px; } ``` **States** - hover: ::before background-color #EBEBEB - focus: outline none, ::before box-shadow #FFFFFF 0px 0px 0px 2px, #222222 0px 0px 0px 4px ### Menu button (2) **Verification**: verified against the live page at desktop. **Anatomy** - `menu-button-2`: the component root, a ` ``` ```css .c-menu-button-2-scope { background-color: #FFFFFF; color: #222222; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 400; line-height: 20.02px; } .c-menu-button-2 { display: inline-flex; justify-content: center; align-items: center; border-spacing: 0px; box-sizing: border-box; width: 40px; height: 40px; padding: 0px; position: relative; background-color: #F2F2F2; color: #222222; border: 0; border-radius: 50%; cursor: pointer; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 400; line-height: normal; letter-spacing: normal; text-transform: none; text-align: center; transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1); } .c-menu-button-2::before { content: ""; display: block; box-sizing: border-box; width: 40px; height: 40px; position: absolute; top: 20px; right: -20px; bottom: -20px; left: 20px; background-color: #F2F2F2; border-radius: 50%; transform: matrix(1, 0, 0, 1, -20, -20); transition-duration: 0.3s, 0.3s, 0.3s, 0.3s; transition-timing-function: cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1); transition-property: background-color, border-color, backdrop-filter, -webkit-backdrop-filter; } .c-menu-button-2__group { display: flex; justify-content: center; align-items: center; box-sizing: border-box; width: 40px; height: 40px; position: relative; transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1); } .c-menu-button-2__icon { display: block; flex-shrink: 0; box-sizing: border-box; width: 16px; height: 16px; background-color: currentcolor; } .c-menu-button-2:hover::before { background-color: #EBEBEB; } .c-menu-button-2:focus { outline: none; } .c-menu-button-2:focus::before { box-shadow: #FFFFFF 0px 0px 0px 2px, #222222 0px 0px 0px 4px; } ``` **States** - hover: ::before background-color #EBEBEB - focus: outline none, ::before box-shadow #FFFFFF 0px 0px 0px 2px, #222222 0px 0px 0px 4px ### Header (landing) **Verification**: flagged, the `header-landing-group` y did not reproduce the measured 0px after 2 correction attempts. Variant observed on https://www.airbnb.com/. **Anatomy** - `header-landing`: the component root, a `
` (`.c-header-landing`) - `header-landing-logo`: link (`.c-header-landing__logo`) - `header-landing-logo-icon`: icon placeholder, 102x32px (`.c-header-landing__logo-icon`) - `header-landing-group`: inner group (`.c-header-landing__group`) - `header-landing-group-2`: inner flex column (`.c-header-landing__group-2`) - `header-landing-group-3`: inner block (`.c-header-landing__group-3`, 6 instances), content not captured - `header-landing-group-4`: inner block (`.c-header-landing__group-4`) - `header-landing-group-5`: inner grid (`.c-header-landing__group-5`) - `header-landing-link`: link (`.c-header-landing__link`) - `header-landing-group-6`: inner group (`.c-header-landing__group-6`, 4 instances) - `header-landing-group-7`: inner group (`.c-header-landing__group-7`, 4 instances), content not captured - `header-landing-text`: label text, 3 characters (`.c-header-landing__text`) - `header-landing-text-2`: label text, 3 characters (`.c-header-landing__text-2`, 4 instances) - `header-landing-link-2`: link (`.c-header-landing__link-2`) - `header-landing-text-3`: label text, 5 characters (`.c-header-landing__text-3`) - `header-landing-link-3`: link (`.c-header-landing__link-3`) - `header-landing-text-4`: label text, 11 characters (`.c-header-landing__text-4`) - `header-landing-link-4`: link (`.c-header-landing__link-4`) - `header-landing-text-5`: label text, 8 characters (`.c-header-landing__text-5`) - `header-landing-inner`: inner flex row (`.c-header-landing__inner`) - `header-landing-group-8`: inner block (`.c-header-landing__group-8`) - `header-landing-group-9`: inner block (`.c-header-landing__group-9`) - `header-landing-group-10`: inner grid (`.c-header-landing__group-10`) - `header-landing-group-11`: inner flex row (`.c-header-landing__group-11`, 3 instances) - `header-landing-group-12`: inner block (`.c-header-landing__group-12`) - `header-landing-text-6`: label text, 5 characters (`.c-header-landing__text-6`, 3 instances) - `header-landing-group-13`: inner block (`.c-header-landing__group-13`, 2 instances) - `header-landing-group-14`: inner block (`.c-header-landing__group-14`) - `header-landing-group-15`: inner block (`.c-header-landing__group-15`) - `header-landing-group-16`: inner block (`.c-header-landing__group-16`) - `header-landing-group-17`: inner flex row (`.c-header-landing__group-17`) - `header-landing-group-18`: inner block (`.c-header-landing__group-18`) - `header-landing-nav`: inner flex row (`.c-header-landing__nav`) - `header-landing-group-19`: inner flex row (`.c-header-landing__group-19`) - `header-landing-cta`: the `button-secondary` button, 13-character label (`.c-header-landing__cta`) - `header-landing-group-20`: inner block (`.c-header-landing__group-20`) - `header-landing-menu-toggle`: button (`.c-header-landing__menu-toggle`, 2 instances) - `header-landing-group-21`: inner flex row (`.c-header-landing__group-21`, 2 instances) - `header-landing-icon`: icon placeholder, 24px (`.c-header-landing__icon`) - `header-landing-group-22`: inner block (`.c-header-landing__group-22`) - `header-landing-icon-2`: icon placeholder, 16px (`.c-header-landing__icon-2`) **Recipe** ```html
lor lor lorem lorem lorem ipsum lorem ipsum lorem ip lorem ip
lorem
lore
lor
``` ```css .c-header-landing-scope { background-color: #FFFFFF; color: #222222; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 400; line-height: 20.02px; } .c-header-landing { display: flex; justify-content: space-between; align-items: center; border-spacing: 0px; box-sizing: border-box; height: 96px; max-width: 1920px; color: #222222; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 400; line-height: 20.02px; padding-right: 48px; padding-left: 48px; } .c-header-landing__logo { display: inline-flex; align-items: center; box-sizing: border-box; height: 80px; position: relative; z-index: 1; vertical-align: middle; color: #FF385C; cursor: pointer; text-decoration-line: none; transition: color 0.25s cubic-bezier(0.2, 0, 0, 1); } .c-header-landing__logo::before { content: ""; display: block; box-sizing: border-box; width: 126px; height: 56px; position: absolute; top: 12px; right: -12px; bottom: 12px; left: -12px; border-radius: 12px; } .c-header-landing__logo-icon { display: block; flex-shrink: 0; box-sizing: border-box; width: 102px; height: 32px; overflow-x: hidden; overflow-y: hidden; background-color: currentcolor; } .c-header-landing__group { display: block; box-sizing: border-box; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 0; padding-right: 48px; padding-left: 48px; } .c-header-landing__group-2 { display: flex; flex-direction: column; align-items: center; box-sizing: border-box; width: 100%; position: relative; z-index: 1; margin-top: 8px; } .c-header-landing__group-3 { display: block; box-sizing: border-box; } .c-header-landing__group-4 { display: block; box-sizing: border-box; width: 500px; margin: 22px auto 24px; transition: opacity 0.175s cubic-bezier(0, 0, 1, 1); } .c-header-landing__group-5 { display: grid; justify-content: center; gap: 35px; grid-auto-flow: column; box-sizing: border-box; position: relative; margin-top: 8px; } .c-header-landing__link { display: flex; align-items: center; box-sizing: border-box; color: #222222; cursor: pointer; text-decoration-line: none; padding-right: 5px; margin-right: 5px; margin-bottom: 12px; } .c-header-landing__group-6 { display: block; box-sizing: border-box; position: relative; } .c-header-landing__group-7 { display: block; box-sizing: border-box; width: 36px; height: 36px; } .c-header-landing__text { display: block; box-sizing: border-box; font-weight: 500; line-height: 18px; white-space: nowrap; margin-left: 8px; } .c-header-landing__text-2 { display: block; box-sizing: border-box; width: 1px; height: 1px; position: absolute; overflow-x: clip; overflow-y: clip; white-space: nowrap; } .c-header-landing__link-2 { display: flex; align-items: center; box-sizing: border-box; color: #222222; cursor: pointer; text-decoration-line: none; padding-left: 5px; margin-bottom: 12px; margin-left: -5px; } .c-header-landing__text-3 { display: block; box-sizing: border-box; color: #6C6C6C; font-weight: 500; line-height: 18px; white-space: nowrap; margin-left: 16px; } .c-header-landing__link-3 { display: flex; align-items: center; box-sizing: border-box; color: #222222; cursor: pointer; text-decoration-line: none; margin-bottom: 12px; } .c-header-landing__text-4 { display: block; box-sizing: border-box; color: #6C6C6C; font-weight: 500; line-height: 18px; white-space: nowrap; margin-left: 8px; } .c-header-landing__link-4 { display: flex; align-items: center; box-sizing: border-box; color: #222222; cursor: pointer; text-decoration-line: none; padding-left: 2px; margin-bottom: 12px; margin-left: -2px; } .c-header-landing__text-5 { display: block; box-sizing: border-box; color: #6C6C6C; font-weight: 500; line-height: 18px; white-space: nowrap; margin-left: 12px; } .c-header-landing__inner { display: flex; justify-content: space-between; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; height: 66px; max-width: 850px; position: absolute; left: 50%; border-radius: 32px; transform: matrix(1, 0, 0, 1, -425, 0); } .c-header-landing__group-8 { display: block; box-sizing: border-box; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: -3; background-color: #FFFFFF; border-radius: 100px; } .c-header-landing__group-9 { display: block; box-sizing: border-box; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: -3; border: 1px solid #DDDDDD; border-radius: 100px; box-shadow: color(srgb 0 0 0 / 0.02) 0px 0px 0px 1px, color(srgb 0 0 0 / 0.1) 0px 8px 24px 0px; } .c-header-landing__group-10 { display: grid; align-items: center; gap: 2px; grid-template-columns: [location] minmax(0px, 2fr) 1px [center-start] minmax(0px, 1fr) 1px minmax(0px, 1fr) [center-end] 1px [last] minmax(0px, 2fr); box-sizing: border-box; width: 100%; height: 100%; border-radius: 32px; } .c-header-landing__group-11 { display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; width: 100%; height: 100%; position: relative; border-radius: 32px; cursor: pointer; } .c-header-landing__group-11::before { content: ""; display: block; box-sizing: border-box; width: 286px; height: 32px; position: absolute; top: 33px; right: -4px; bottom: 1px; left: -4px; z-index: -1; transform: matrix(1, 0, 0, 1, 0, -16); } .c-header-landing__group-11::after { content: ""; display: block; box-sizing: border-box; width: 348px; height: 66px; position: absolute; top: 0px; right: -70px; bottom: 0px; left: 0px; z-index: -1; border-radius: 32px; } .c-header-landing__group-12 { display: block; box-sizing: border-box; width: 100%; padding: 15px 32px; position: relative; z-index: 2; overflow-x: clip; overflow-y: clip; } .c-header-landing__text-6 { display: block; box-sizing: border-box; overflow-x: clip; overflow-y: clip; font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; text-overflow: ellipsis; padding-bottom: 2px; } .c-header-landing__group-13 { display: block; box-sizing: border-box; width: 1px; height: 32px; background-color: #DDDDDD; } .c-header-landing__group-14 { display: block; box-sizing: border-box; width: 100%; padding: 15px 24px; position: relative; z-index: 2; overflow-x: clip; overflow-y: clip; } .c-header-landing__group-15 { display: block; box-sizing: border-box; width: 100%; padding: 15px 130.904px 15px 24px; position: relative; z-index: 2; overflow-x: clip; overflow-y: clip; } .c-header-landing__group-16 { display: block; box-sizing: border-box; padding: 10px; position: absolute; right: 0px; z-index: 2; } .c-header-landing__group-17 { display: flex; justify-content: center; align-items: center; box-sizing: border-box; width: 48px; height: 48px; padding: 10px; background-color: #DA1249; color: #FFFFFF; border-radius: 50px; cursor: pointer; } .c-header-landing__group-18 { display: block; box-sizing: border-box; width: 100%; height: 96px; position: absolute; top: 0px; left: 0px; background-image: linear-gradient(in srgb, #FFFFFF 39.9%, color(srgb 0.972471 0.972471 0.972471) 100%); transform: matrix(1, 0, 0, 2.08, 0, 0); transition: transform 0.451754s linear(0 0%, 0.185572 10%, 0.465306 20%, 0.682334 30%, 0.822325 40%, 0.904974 50%, 0.951289 60%, 0.976364 70%, 0.989612 80%, 0.996485 90%, 1 100%); } .c-header-landing__group-18::after { content: ""; display: block; box-sizing: border-box; width: 1425px; height: 2px; position: absolute; top: 96px; right: 0px; bottom: -2px; left: 0px; background-color: #EBEBEB; transform: matrix(1, 0, 0, 0.48, 0, 0); transition: transform 0.451754s linear(0 0%, 0.185572 10%, 0.465306 20%, 0.682334 30%, 0.822325 40%, 0.904974 50%, 0.951289 60%, 0.976364 70%, 0.989612 80%, 0.996485 90%, 1 100%); } .c-header-landing__nav { display: flex; justify-content: flex-end; align-items: center; box-sizing: border-box; height: 80px; position: relative; } .c-header-landing__group-19 { display: flex; justify-content: flex-end; align-items: center; flex-grow: 1; gap: 12px; box-sizing: border-box; margin-right: 12px; } .c-header-landing__cta { display: block; box-sizing: border-box; padding: 11px 12px; position: relative; background-color: transparent; color: #222222; border: 0; border-radius: 20px; cursor: pointer; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; line-height: 18px; letter-spacing: normal; text-transform: none; text-align: center; white-space: nowrap; appearance: button; transition-duration: 0.2s, 0.25s, 0.3s, 0.3s, 0.3s; transition-timing-function: cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1); transition-property: box-shadow, transform, background-color, border-color, color; } .c-header-landing__group-20 { display: block; box-sizing: border-box; position: relative; vertical-align: middle; margin-top: auto; margin-bottom: auto; } .c-header-landing__menu-toggle { display: inline-flex; justify-content: center; align-items: center; box-sizing: border-box; width: 40px; height: 40px; padding: 0px; position: relative; background-color: #F2F2F2; color: #222222; border: 0; border-radius: 50%; cursor: pointer; font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 400; line-height: normal; letter-spacing: normal; text-transform: none; text-align: center; transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1); } .c-header-landing__menu-toggle::before { content: ""; display: block; box-sizing: border-box; width: 40px; height: 40px; position: absolute; top: 20px; right: -20px; bottom: -20px; left: 20px; background-color: #F2F2F2; border-radius: 50%; transform: matrix(1, 0, 0, 1, -20, -20); transition-duration: 0.3s, 0.3s, 0.3s, 0.3s; transition-timing-function: cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1); transition-property: background-color, border-color, backdrop-filter, -webkit-backdrop-filter; } .c-header-landing__group-21 { display: flex; justify-content: center; align-items: center; box-sizing: border-box; width: 40px; height: 40px; position: relative; transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1); } .c-header-landing__icon { display: block; flex-shrink: 0; box-sizing: border-box; width: 24px; height: 24px; background-color: currentcolor; } .c-header-landing__group-22 { display: inline; box-sizing: border-box; position: relative; } .c-header-landing__icon-2 { display: block; flex-shrink: 0; box-sizing: border-box; width: 16px; height: 16px; background-color: currentcolor; } .c-header-landing__logo:focus { outline: none; } .c-header-landing__logo:focus::before { box-shadow: #222222 0px 0px 0px 2px; } .c-header-landing__link:focus { border-radius: 8px; outline: 2px solid #222222; outline-offset: 4px; } .c-header-landing__link-2:focus { border-radius: 8px; outline: 2px solid #222222; outline-offset: 4px; } .c-header-landing__link-3:focus { border-radius: 8px; outline: 2px solid #222222; outline-offset: 4px; } .c-header-landing__link-4:focus { border-radius: 8px; outline: 2px solid #222222; outline-offset: 4px; } .c-header-landing__cta:hover { background-color: #F7F7F7; } .c-header-landing__cta:focus { box-shadow: #222222 0px 0px 0px 2px; outline: none; } .c-header-landing__menu-toggle:hover::before { background-color: #EBEBEB; } .c-header-landing__menu-toggle:focus { outline: none; } .c-header-landing__menu-toggle:focus::before { box-shadow: #FFFFFF 0px 0px 0px 2px, #222222 0px 0px 0px 4px; } ``` **States** - `header-landing-logo` focus: outline none, ::before box-shadow #222222 0px 0px 0px 2px - `header-landing-link` focus (`header-landing-link-focus`): border-radius 8px, outline 2px solid #222222, outline-offset 4px - `header-landing-link-2` focus (`header-landing-link-2-focus`): border-radius 8px, outline 2px solid #222222, outline-offset 4px - `header-landing-link-3` focus (`header-landing-link-3-focus`): border-radius 8px, outline 2px solid #222222, outline-offset 4px - `header-landing-link-4` focus (`header-landing-link-4-focus`): border-radius 8px, outline 2px solid #222222, outline-offset 4px - `header-landing-cta` hover (`header-landing-cta-hover`): background-color #F7F7F7 - `header-landing-cta` focus: box-shadow #222222 0px 0px 0px 2px, outline none - `header-landing-menu-toggle` hover: ::before background-color #EBEBEB - `header-landing-menu-toggle` focus: outline none, ::before box-shadow #FFFFFF 0px 0px 0px 2px, #222222 0px 0px 0px 4px ### Footer (landing) **Verification**: flagged, the original element could not be found again. Variant observed on https://www.airbnb.com/. **Anatomy** - `footer-landing`: the component root, a `