Airbnb Design System

airbnb.com

PROEngine v4

Visual system

100% confidence

display-lgDesign is intelligence made visibleAirbnb Cereal VF26px / 500 / 1.15

title-lgDesign is intelligence made visibleAirbnb Cereal VF22px / 500 / 1.2

title-mdDesign is intelligence made visibleAirbnb Cereal VF20px / 600 / 1.2

title-smDesign is intelligence made visibleAirbnb Cereal VF16px / 500 / 1.25

body-lgDesign is intelligence made visibleAirbnb Cereal VF16px / 400 / 1.5

body-mdDesign is intelligence made visibleAirbnb Cereal VF16px / 400 / 1.25

bodyDesign is intelligence made visibleAirbnb Cereal VF14px / 400 / 1.45

body-relaxedDesign is intelligence made visibleAirbnb Cereal VF14px / 400 / 1.5

body-strongDesign is intelligence made visibleAirbnb Cereal VF14px / 500 / 1.45

buttonDesign is intelligence made visibleAirbnb Cereal VF14px / 500 / 1.3

nav-linkDesign is intelligence made visibleAirbnb Cereal VF14px / 400 / 1.3

caption-lgDesign is intelligence made visibleAirbnb Cereal VF13px / 400 / 1.25

captionDesign is intelligence made visibleAirbnb Cereal VF12px / 400 / 1.35

caption-mediumDesign is intelligence made visibleAirbnb Cereal VF12px / 500 / 1.35

caption-strongDesign is intelligence made visibleAirbnb Cereal VF12px / 700 / 1.35

microDesign is intelligence made visibleAirbnb Cereal VF11px / 600 / 1.2

100% confidence

button-secondary-padding-y
11px

header-inner-2-gap
12px

button-secondary-padding-x
12px

button-primary-2-padding-y
14px

button-secondary-4-padding-y
14px

button-primary-2-padding-x
24px

button-secondary-4-padding-x
24px

100% confidence

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

Components

Button15

Not checked

ghost · desktop

The element could not be found on the page again.

Nothing was compared for this component.

Recipe in DESIGN.md

Not checked

ghost · desktop

The element could not be found on the page again.

Nothing was compared for this component.

Recipe in DESIGN.md

Not checked

ghost · desktop

The element could not be found on the page again.

Nothing was compared for this component.

Recipe in DESIGN.md

Not checked

ghost · desktop

The element could not be found on the page again.

Nothing was compared for this component.

Recipe in DESIGN.md

100% match

ghost · desktop

At rest100% match56 measurements match

Original

Render

Hover100% match18 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

ghost · desktop

At rest100% match56 measurements match

Original

Render

Hover100% match18 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

ghost · desktop

At rest100% match35 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

95% match

ghost · desktop

On focus, it renders 95% like the site, below the 97% bar.

At rest100% match76 measurements match

Original

Render

Hover100% match18 measurements match

Original

Render

Focus95% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

ghost · desktop

At rest100% match76 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

primary · desktop

At rest100% match56 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

primary · desktop

At rest100% match22 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

secondary · desktop

At rest100% match21 measurements match

Original

Render

Hover100% match18 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

Not checked

secondary · desktop

The element was not visible when the check ran.

Nothing was compared for this component.

Recipe in DESIGN.md

63% match

secondary · desktop

It renders 63% like the site, below the 97% bar.

At rest63% match54 measurements match

Original

Render

Hover63% match18 measurements match

Original

Render

Focus96% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

secondary · desktop

At rest100% match21 measurements match

Original

Render

Hover100% match18 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

Card10

Not checked

desktop

The element could not be found on the page again.

Nothing was compared for this component.

Recipe in DESIGN.md

Not checked

desktop

The element could not be found on the page again.

Nothing was compared for this component.

Recipe in DESIGN.md

Not checked

desktop

The element could not be found on the page again.

Nothing was compared for this component.

Recipe in DESIGN.md

Not checked

desktop

The element could not be found on the page again.

Nothing was compared for this component.

Recipe in DESIGN.md

Not checked

desktop

The element could not be found on the page again.

Nothing was compared for this component.

Recipe in DESIGN.md

100% match

desktop

Group 9 y is 130px, the site has 82px; Group 10 y is 258px, the site has 162px and 2 more.

At rest100% match4 of 296 measurements differ

Original Card (5) on the site, at rest — Original

Isolated render of Card (5), at rest — Render

At rest, instance 2100% match4 of 296 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 3100% match4 of 296 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 4100% match4 of 296 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 5100% match4 of 296 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 6100% match4 of 296 measurements differ

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Not checked

desktop

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

Not checked

desktop

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

Not checked

desktop

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

Not checked

desktop

The element could not be found on the page again.

Nothing was compared for this component.

Recipe in DESIGN.md

Extra39

100% match

desktop

Group y is 10px, the site has 7px; Group width is 0px, the site has 7px and 11 more.

At rest100% match13 of 250 measurements differ

Original Breadcrumbs on the site, at rest — Original

Isolated render of Breadcrumbs, at rest — Render

Recipe in DESIGN.md

94% match

desktop

Row height is 71px, the site has 42px; Cell height is 71px, the site has 42px and 49 more.

At rest94% match51 of 497 measurements differ

Original Calendar on the site, at rest — Original

Isolated render of Calendar, at rest — Render

Recipe in DESIGN.md

100% match

desktop

Row height is 86px, the site has 42px; Cell height is 86px, the site has 42px and 51 more.

At rest100% match53 of 536 measurements differ

Original Calendar (2) on the site, at rest — Original

Isolated render of Calendar (2), at rest — Render

Recipe in DESIGN.md

Not checked

desktop

The element could not be found on the page again.

Nothing was compared for this component.

Recipe in DESIGN.md

Not checked

desktop

The element could not be found on the page again.

Nothing was compared for this component.

Recipe in DESIGN.md

Not checked

desktop

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

Not checked

desktop

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

Not checked

desktop

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

100% match

desktop

It renders 100% like the site, below the 96% bar.

At rest100% match21 measurements match

Original Carousel section on the site, at rest — Original

Isolated render of Carousel section, at rest — Render

At rest, instance 2100% match21 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match21 measurements match

Original

No image stored

Render

No image stored

At rest, instance 4100% match21 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Not checked

desktop

The element could not be found on the page again.

Nothing was compared for this component.

Recipe in DESIGN.md

Not checked

desktop

The element could not be found on the page again.

Nothing was compared for this component.

Recipe in DESIGN.md

100% match

desktop

At rest100% match56 measurements match

Original

Render

Hover100% match18 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match56 measurements match

Original

Render

Hover100% match18 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match56 measurements match

Original

Render

Hover100% match18 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match56 measurements match

Original

Render

Hover100% match18 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

desktop

Group y is 17px, the site has 20px; Group height is 45px, the site has 40px and 9 more.

At rest100% match11 of 216 measurements differ

Original Nav on the site, at rest — Original

Isolated render of Nav, at rest — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match21 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

30% match

desktop

It renders 30% like the site, below the 96% bar.

At rest30% match21 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

desktop

Media y is 0px, the site has 455px.

At rest100% match1 of 57 measurements differ

Original Photo gallery on the site, at rest — Original

Isolated render of Photo gallery, at rest — Render

Focus100% match18 measurements match

Original Photo gallery on the site, focus — Original

Isolated render of Photo gallery, focus — Render

Recipe in DESIGN.md

100% match

desktop

Media y is 0px, the site has 217px.

At rest100% match1 of 57 measurements differ

Original Photo gallery (2) on the site, at rest — Original

Isolated render of Photo gallery (2), at rest — Render

Focus100% match18 measurements match

Original Photo gallery (2) on the site, focus — Original

Isolated render of Photo gallery (2), focus — Render

Recipe in DESIGN.md

91% match

desktop

List width is 170px, the site has 138px; Item width is 170px, the site has 138px and 4 more.

At rest91% match6 of 207 measurements differ

Original Rating summary on the site, at rest — Original

Isolated render of Rating summary, at rest — Render

At rest, instance 299% match6 of 207 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 399% match6 of 207 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 499% match6 of 207 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 599% match6 of 207 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 699% match6 of 207 measurements differ

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Not checked

desktop

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

Not checked

desktop

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

93% match

desktop

On focus, it renders 93% like the site, below the 96% bar.

At rest100% match46 measurements match

Original Search field (3) on the site, at rest — Original

Isolated render of Search field (3), at rest — Render

Hover99% match18 measurements match

Original Search field (3) on the site, hover — Original

Isolated render of Search field (3), hover — Render

Focus93% match18 measurements match

Original Search field (3) on the site, focus — Original

Isolated render of Search field (3), focus — Render

Recipe in DESIGN.md

90% match

desktop

On hover, it renders 90% like the site, below the 96% bar.

At rest99% match66 measurements match

Original Search field (4) on the site, at rest — Original

Isolated render of Search field (4), at rest — Render

Hover90% match18 measurements match

Original Search field (4) on the site, hover — Original

Isolated render of Search field (4), hover — Render

Focus91% match18 measurements match

Original Search field (4) on the site, focus — Original

Isolated render of Search field (4), focus — Render

Recipe in DESIGN.md

Not checked

desktop

No recipe was made: the element was not visible.

Nothing was compared for this component.

Not checked

desktop

No recipe was made: the element was not visible.

Nothing was compared for this component.

100% match

desktop

It renders 100% like the site, below the 96% bar.

At rest100% match21 measurements match

Original Section carousel on the site, at rest — Original

Isolated render of Section carousel, at rest — Render

At rest, instance 2100% match21 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match21 measurements match

Original

No image stored

Render

No image stored

At rest, instance 4100% match21 measurements match

Original

No image stored

Render

No image stored

At rest, instance 5100% match21 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Not checked

desktop

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

Not checked

desktop

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

96% match

desktop

On focus, it renders 96% like the site, below the 96% bar.

At rest100% match21 measurements match

Original Tab on the site, at rest — Original

Isolated render of Tab, at rest — Render

Hover100% match18 measurements match

Original Tab on the site, hover — Original

Focus96% match18 measurements match

Original Tab on the site, focus — Original

Recipe in DESIGN.md

99% match

desktop

Media y is 18px, the site has 20px.

At rest100% match1 of 104 measurements differ

Original Tabs (2) on the site, at rest — Original

Isolated render of Tabs (2), at rest — Render

Hover99% match22 measurements match

Original Tabs (2) on the site, hover — Original

Isolated render of Tabs (2), hover — Render

Focus99% match22 measurements match

Original Tabs (2) on the site, focus — Original

Isolated render of Tabs (2), focus — Render

Recipe in DESIGN.md

100% match

desktop

Media y is 18px, the site has 20px.

At rest100% match1 of 104 measurements differ

Original Tabs (3) on the site, at rest — Original

Isolated render of Tabs (3), at rest — Render

Hover100% match22 measurements match

Original Tabs (3) on the site, hover — Original

Isolated render of Tabs (3), hover — Render

Focus100% match22 measurements match

Original Tabs (3) on the site, focus — Original

Isolated render of Tabs (3), focus — Render

Recipe in DESIGN.md

99% match

desktop

Media y is 18px, the site has 20px.

At rest100% match1 of 104 measurements differ

Original Tabs (4) on the site, at rest — Original

Isolated render of Tabs (4), at rest — Render

Hover99% match22 measurements match

Original Tabs (4) on the site, hover — Original

Isolated render of Tabs (4), hover — Render

Focus99% match22 measurements match

Original Tabs (4) on the site, focus — Original

Isolated render of Tabs (4), focus — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match21 measurements match

Focus100% match18 measurements match

Recipe in DESIGN.md

Not checked

desktop

The element could not be found on the page again.

Nothing was compared for this component.

Recipe in DESIGN.md

Not checked

desktop

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

Not checked

desktop

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

Not checked

desktop

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

Header10

Not checked

desktop

No recipe was made: reading the element timed out.

Nothing was compared for this component.

99% match

desktop

Group y is -16px, the site has 0px; Group height is 900px, the site has 96px and 21 more.

At rest99% match23 of 545 measurements differ

Original Header (inner) on the site, at rest — Original

Isolated render of Header (inner), at rest — Render

Hovernot checked

Original Header (inner) on the site, hover — Original

Isolated render of Header (inner), hover — Render

Focusnot checked

Original Header (inner) on the site, focus — Original

Isolated render of Header (inner), focus — Render

Focus on cta 299% match18 measurements match

Original

No image stored

Render

No image stored

Hover on cta 299% match18 measurements match

Original

No image stored

Render

No image stored

Focus on cta99% match18 measurements match

Original

No image stored

Render

No image stored

Hover on cta99% match18 measurements match

Original

No image stored

Render

No image stored

Focus on logo99% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

At rest100% match238 measurements match

Original Header (inner, 2) on the site, at rest — Original

Isolated render of Header (inner, 2), at rest — Render

Hovernot checked

Original Header (inner, 2) on the site, hover — Original

Isolated render of Header (inner, 2), hover — Render

Focusnot checked

Original Header (inner, 2) on the site, focus — Original

Isolated render of Header (inner, 2), focus — Render

Focus on button100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on button100% match18 measurements match

Original

No image stored

Render

No image stored

Focus on menu toggle100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on menu toggle100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

98% match

desktop

Group y is -16px, the site has 0px; Group height is 900px, the site has 96px and 54 more.

At rest99% match56 of 1063 measurements differ

Original Header (inner, 3) on the site, at rest — Original

Isolated render of Header (inner, 3), at rest — Render

Hovernot checked

Original Header (inner, 3) on the site, hover — Original

Isolated render of Header (inner, 3), hover — Render

Focusnot checked

Original Header (inner, 3) on the site, focus — Original

Isolated render of Header (inner, 3), focus — Render

Focus on cta99% match18 measurements match

Original

No image stored

Render

No image stored

Hover on cta99% match18 measurements match

Original

No image stored

Render

No image stored

Focus on link 298% match18 measurements match

Original

No image stored

Render

No image stored

Focus on link 398% match18 measurements match

Original

No image stored

Render

No image stored

Focus on link 498% match18 measurements match

Original

No image stored

Render

No image stored

Focus on link98% match18 measurements match

Original

No image stored

Render

No image stored

Focus on logo99% match18 measurements match

Original

No image stored

Render

No image stored

Focus on menu toggle99% match18 measurements match

Original

No image stored

Render

No image stored

Hover on menu toggle99% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

98% match

desktop

Group y is -16px, the site has 0px; Group height is 900px, the site has 96px and 54 more.

At rest99% match56 of 1063 measurements differ

Original Header (landing) on the site, at rest — Original

Isolated render of Header (landing), at rest — Render

Hovernot checked

Original Header (landing) on the site, hover — Original

Isolated render of Header (landing), hover — Render

Focusnot checked

Original Header (landing) on the site, focus — Original

Isolated render of Header (landing), focus — Render

Focus on cta99% match18 measurements match

Original

No image stored

Render

No image stored

Hover on cta99% match18 measurements match

Original

No image stored

Render

No image stored

Focus on link 298% match18 measurements match

Original

No image stored

Render

No image stored

Focus on link 398% match18 measurements match

Original

No image stored

Render

No image stored

Focus on link 498% match18 measurements match

Original

No image stored

Render

No image stored

Focus on link98% match18 measurements match

Original

No image stored

Render

No image stored

Focus on logo99% match18 measurements match

Original

No image stored

Render

No image stored

Focus on menu toggle99% match18 measurements match

Original

No image stored

Render

No image stored

Hover on menu toggle99% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Not checked

mobile

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

Not checked

mobile

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

Not checked

mobile

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

Not checked

mobile

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

Not checked

mobile

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

Footer6

Not checked

desktop

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

100% match

desktop

Root height is 845px, the site has 625px; Inner height is 845px, the site has 625px and 103 more.

At rest100% match105 of 1577 measurements differ

Original Footer (inner) on the site, at rest — Original

Isolated render of Footer (inner), at rest — Render

Hovernot checked

Original Footer (inner) on the site, hover — Original

Isolated render of Footer (inner), hover — Render

Focusnot checked

Original Footer (inner) on the site, focus — Original

Isolated render of Footer (inner), focus — Render

Focus on link100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Not checked

desktop

The element could not be found on the page again.

Nothing was compared for this component.

Recipe in DESIGN.md

Not checked

mobile

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

100% match

mobile

Inner height is 953px, the site has 1310px; Group height is 953px, the site has 1310px and 117 more.

At rest100% match119 of 1646 measurements differ

Hovernot checked

Focusnot checked

Focus on link100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Not checked

mobile

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

Input7

Not checked

desktop

No recipe was made: the element was not visible.

Nothing was compared for this component.

100% match

desktop

At rest100% match22 measurements match

Original Input (2) on the site, at rest — Original

Isolated render of Input (2), at rest — Render

Focus100% match18 measurements match

Original Input (2) on the site, focus — Original

Isolated render of Input (2), focus — Render

Recipe in DESIGN.md

Not checked

desktop

No recipe was made: the element was not visible.

Nothing was compared for this component.

94% match

desktop

On focus, it renders 94% like the site, below the 97% bar.

At rest100% match64 measurements match

Original Input (4) on the site, at rest — Original

Isolated render of Input (4), at rest — Render

Focus94% match22 measurements match

Original Input (4) on the site, focus — Original

Isolated render of Input (4), focus — Render

Recipe in DESIGN.md

94% match

desktop

On focus, it renders 94% like the site, below the 97% bar.

At rest100% match30 measurements match

Original Input (5) on the site, at rest — Original

Isolated render of Input (5), at rest — Render

Focus94% match22 measurements match

Original Input (5) on the site, focus — Original

Isolated render of Input (5), focus — Render

Recipe in DESIGN.md

97% match

desktop

On focus, it renders 97% like the site, below the 97% bar.

At rest100% match51 measurements match

Original Input (6) on the site, at rest — Original

Isolated render of Input (6), at rest — Render

Focus97% match22 measurements match

Original Input (6) on the site, focus — Original

Isolated render of Input (6), focus — Render

Recipe in DESIGN.md

Not checked

desktop

No recipe was made: the element was not visible.

Nothing was compared for this component.

DESIGN.md

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 <button> (.c-button-primary)
button-primary-group: inner flex row (.c-button-primary__group)
button-primary-icon: icon placeholder, 16px (.c-button-primary__icon)

Recipe

HTML · CSS

<div class="c-button-primary-scope">
  <button class="c-button-primary" type="button">
    <div class="c-button-primary__group">
      <span class="c-button-primary__icon" aria-hidden="true"></span>
    </div>
  </button>
</div>

.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 <button> (.c-button-secondary), 13-character label

Recipe

HTML · CSS

<div class="c-button-secondary-scope">
  <button class="c-button-secondary" type="button">lorem ipsum d</button>
</div>

.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 <button> (.c-button-secondary-2)
button-secondary-2-label: label text, 9 characters (.c-button-secondary-2__label)
button-secondary-2-icon: icon placeholder, 12px (.c-button-secondary-2__icon)

Recipe

HTML · CSS

<div class="c-button-secondary-2-scope">
  <button class="c-button-secondary-2" type="button">
    <span class="c-button-secondary-2__label">lorem ips</span>
    <span class="c-button-secondary-2__icon" aria-hidden="true"></span>
  </button>
</div>

.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 <button> (.c-button-ghost)
button-ghost-group: inner flex row (.c-button-ghost__group)
button-ghost-icon: icon placeholder, 16px (.c-button-ghost__icon)
button-ghost-label: label text, 12 characters (.c-button-ghost__label)

Recipe

HTML · CSS

<div class="c-button-ghost-scope">
  <button class="c-button-ghost" type="button">
    <span class="c-button-ghost__group">
      <span class="c-button-ghost__icon" aria-hidden="true"></span>
      <span class="c-button-ghost__label">lorem ipsum</span>
    </span>
  </button>
</div>

.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 <button> (.c-button-ghost-2)
button-ghost-2-label: label text, 0 characters (.c-button-ghost-2__label)
button-ghost-2-label-2: label text, 1 characters (.c-button-ghost-2__label-2)
button-ghost-2-label-3: label text, 3 characters (.c-button-ghost-2__label-3)

Recipe

HTML · CSS

<div class="c-button-ghost-2-scope">
  <button class="c-button-ghost-2" type="button">
    <div class="c-button-ghost-2__label">
      <span class="c-button-ghost-2__label-2">l</span>
      <span class="c-button-ghost-2__label-3">lor</span>
    </div>
  </button>
</div>

.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 <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 · CSS

<div class="c-card-scope">
  <a class="c-card" href="#">
    <div class="c-card__group">
      <span class="c-card__media" aria-hidden="true"></span>
    </div>
    <div class="c-card__text">lorem</div>
    <div class="c-card__text-2">lorem ipsum dolor si</div>
  </a>
</div>

.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 <div> (.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 · CSS

<div class="c-card-2-scope">
  <div class="c-card-2">
    <a class="c-card-2__link" href="#"></a>
    <div class="c-card-2__group">
      <div class="c-card-2__group-2">
        <div class="c-card-2__group-3"></div>
        <div class="c-card-2__group-4">
          <div class="c-card-2__group-5"></div>
          <div class="c-card-2__group-6"></div>
          <div class="c-card-2__group-7"></div>
        </div>
      </div>
      <div class="c-card-2__group-8">
        <span class="c-card-2__group-9">
          <div class="c-card-2__text">lorem ipsum dolor</div>
        </span>
        <div class="c-card-2__group-10">
          <span class="c-card-2__text-2">lorem ips</span>
          <span class="c-card-2__group-11"></span>
          <span class="c-card-2__text-2">lorem ipsum dol</span>
        </div>
        <div class="c-card-2__group-12">
          <div class="c-card-2__group-13"></div>
          <span class="c-card-2__group-14"></span>
          <span class="c-card-2__group-15"></span>
        </div>
      </div>
    </div>
  </div>
</div>

.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 <div> (.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 · CSS

<div class="c-card-3-scope">
  <div class="c-card-3">
    <a class="c-card-3__link" href="#"></a>
    <div class="c-card-3__group">
      <div class="c-card-3__group-2">
        <div class="c-card-3__group-3"></div>
        <div class="c-card-3__group-4">
          <div class="c-card-3__group-5"></div>
          <div class="c-card-3__group-6"></div>
          <div class="c-card-3__group-7"></div>
        </div>
      </div>
      <div class="c-card-3__group-8">
        <span class="c-card-3__group-9">
          <div class="c-card-3__text">lorem ipsum dolor sit a</div>
        </span>
        <div class="c-card-3__group-10">
          <div class="c-card-3__group-11"></div>
          <span class="c-card-3__group-12"></span>
          <span class="c-card-3__group-13"></span>
        </div>
      </div>
    </div>
  </div>
</div>

.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 <button> (.c-wishlist-button)
wishlist-button-icon: icon placeholder, 24px (.c-wishlist-button__icon)

Recipe

HTML · CSS

<div class="c-wishlist-button-scope">
  <button class="c-wishlist-button" type="button">
    <span class="c-wishlist-button__icon" aria-hidden="true"></span>
  </button>
</div>

.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 <button> (.c-nav-link-active), 7-character label

Recipe

HTML · CSS

<div class="c-nav-link-active-scope">
  <button class="c-nav-link-active" type="button">lorem i</button>
</div>

.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 <button> (.c-nav-link), 7-character label

Recipe

HTML · CSS

<div class="c-nav-link-scope">
  <button class="c-nav-link" type="button">lorem i</button>
</div>

.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 <button> (.c-carousel-arrow)
carousel-arrow-group: inner flex row (.c-carousel-arrow__group)
carousel-arrow-text: label text, 1 characters (.c-carousel-arrow__text)
carousel-arrow-icon: icon placeholder, 12px (.c-carousel-arrow__icon)

Recipe

HTML · CSS

<div class="c-carousel-arrow-scope">
  <button class="c-carousel-arrow" type="button">
    <span class="c-carousel-arrow__group">
      <span class="c-carousel-arrow__text">l</span>
      <span class="c-carousel-arrow__icon" aria-hidden="true"></span>
    </span>
  </button>
</div>

.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 <button> (.c-carousel-arrow-2)
carousel-arrow-2-group: inner flex row (.c-carousel-arrow-2__group)
carousel-arrow-2-text: label text, 1 characters (.c-carousel-arrow-2__text)
carousel-arrow-2-icon: icon placeholder, 12px (.c-carousel-arrow-2__icon)

Recipe

HTML · CSS

<div class="c-carousel-arrow-2-scope">
  <button class="c-carousel-arrow-2" type="button">
    <span class="c-carousel-arrow-2__group">
      <span class="c-carousel-arrow-2__text">l</span>
      <span class="c-carousel-arrow-2__icon" aria-hidden="true"></span>
    </span>
  </button>
</div>

.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

Verification: verified against the live page at desktop.

Anatomy

menu-button: the component root, a <button> (.c-menu-button)
menu-button-group: inner flex row (.c-menu-button__group)
menu-button-icon: icon placeholder, 24px (.c-menu-button__icon)

Recipe

HTML · CSS

<div class="c-menu-button-scope">
  <button class="c-menu-button" type="button">
    <span class="c-menu-button__group">
      <span class="c-menu-button__icon" aria-hidden="true"></span>
    </span>
  </button>
</div>

.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

Verification: verified against the live page at desktop.

Anatomy

menu-button-2: the component root, a <button> (.c-menu-button-2)
menu-button-2-group: inner flex row (.c-menu-button-2__group)
menu-button-2-icon: icon placeholder, 16px (.c-menu-button-2__icon)

Recipe

HTML · CSS

<div class="c-menu-button-2-scope">
  <button class="c-menu-button-2" type="button">
    <span class="c-menu-button-2__group">
      <span class="c-menu-button-2__icon" aria-hidden="true"></span>
    </span>
  </button>
</div>

.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 <header> (.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 · CSS

<div class="c-header-landing-scope">
  <header class="c-header-landing">
    <a class="c-header-landing__logo" href="#">
      <span class="c-header-landing__logo-icon" aria-hidden="true"></span>
    </a>
    <div class="c-header-landing__group">
      <div class="c-header-landing__group-2">
        <div class="c-header-landing__group-3">
          <div class="c-header-landing__group-4">
            <div class="c-header-landing__group-5">
              <a class="c-header-landing__link" href="#">
                <span class="c-header-landing__group-6">
                  <span class="c-header-landing__group-7"></span>
                </span>
                <span class="c-header-landing__text">lor</span>
                <span class="c-header-landing__text-2">lor</span>
              </a>
              <a class="c-header-landing__link-2" href="#">
                <span class="c-header-landing__group-6">
                  <span class="c-header-landing__group-7"></span>
                </span>
                <span class="c-header-landing__text-3">lorem</span>
                <span class="c-header-landing__text-2">lorem</span>
              </a>
              <a class="c-header-landing__link-3" href="#">
                <span class="c-header-landing__group-6">
                  <span class="c-header-landing__group-7"></span>
                </span>
                <span class="c-header-landing__text-4">lorem ipsum</span>
                <span class="c-header-landing__text-2">lorem ipsum</span>
              </a>
              <a class="c-header-landing__link-4" href="#">
                <span class="c-header-landing__group-6">
                  <span class="c-header-landing__group-7"></span>
                </span>
                <span class="c-header-landing__text-5">lorem ip</span>
                <span class="c-header-landing__text-2">lorem ip</span>
              </a>
            </div>
          </div>
          <div class="c-header-landing__inner">
            <div class="c-header-landing__group-8">
              <div class="c-header-landing__group-9"></div>
            </div>
            <div class="c-header-landing__group-10">
              <div class="c-header-landing__group-11">
                <div class="c-header-landing__group-12">
                  <div class="c-header-landing__text-6">lorem</div>
                  <div class="c-header-landing__group-3"></div>
                </div>
              </div>
              <div class="c-header-landing__group-13"></div>
              <div class="c-header-landing__group-11">
                <div class="c-header-landing__group-14">
                  <div class="c-header-landing__text-6">lore</div>
                  <div class="c-header-landing__group-3"></div>
                </div>
              </div>
              <div class="c-header-landing__group-13"></div>
              <div class="c-header-landing__group-11">
                <div class="c-header-landing__group-15">
                  <div class="c-header-landing__text-6">lor</div>
                  <div class="c-header-landing__group-3"></div>
                </div>
              </div>
            </div>
            <div class="c-header-landing__group-16">
              <div class="c-header-landing__group-17">
                <div class="c-header-landing__group-3"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="c-header-landing__group-18"></div>
    </div>
    <nav class="c-header-landing__nav">
      <div class="c-header-landing__group-19">
        <button class="c-header-landing__cta" type="button">lorem ipsum d</button>
        <div class="c-header-landing__group-20">
          <button class="c-header-landing__menu-toggle" type="button">
            <span class="c-header-landing__group-21">
              <span class="c-header-landing__icon" aria-hidden="true"></span>
            </span>
          </button>
        </div>
      </div>
      <div class="c-header-landing__group-3">
        <div class="c-header-landing__group-22">
          <button class="c-header-landing__menu-toggle" type="button">
            <span class="c-header-landing__group-21">
              <span class="c-header-landing__icon-2" aria-hidden="true"></span>
            </span>
          </button>
        </div>
      </div>
    </nav>
  </header>
</div>

.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

Verification: flagged, the original element could not be found again.

Variant observed on https://www.airbnb.com/.

Anatomy

footer-landing: the component root, a <footer> (.c-footer-landing)
footer-landing-inner: inner block (.c-footer-landing__inner)
footer-landing-group: inner group (.c-footer-landing__group)
footer-landing-heading: heading, 11 characters (.c-footer-landing__heading)
footer-landing-columns: inner grid (.c-footer-landing__columns)
footer-landing-column: inner group (.c-footer-landing__column, 3 instances)
footer-landing-column-heading: heading, 7 characters (.c-footer-landing__column-heading, 3 instances)
footer-landing-list: inner grid (.c-footer-landing__list, 3 instances)
footer-landing-item: inner group (.c-footer-landing__item, 27 instances), content not captured
footer-landing-link: link, 11-character label (.c-footer-landing__link, 26 instances)
footer-landing-group-2: inner block (.c-footer-landing__group-2)
footer-landing-text: label text, 14 characters (.c-footer-landing__text)
footer-landing-columns-2: inner flex row (.c-footer-landing__columns-2)
footer-landing-group-3: inner block (.c-footer-landing__group-3)
footer-landing-group-4: inner block (.c-footer-landing__group-4)
footer-landing-text-2: label text, 19 characters (.c-footer-landing__text-2)
footer-landing-group-5: inner block (.c-footer-landing__group-5)
footer-landing-group-6: inner group (.c-footer-landing__group-6), content not captured
footer-landing-group-7: inner group (.c-footer-landing__group-7), content not captured
footer-landing-columns-3: inner flex row (.c-footer-landing__columns-3, 2 instances)
footer-landing-group-8: inner block (.c-footer-landing__group-8)
footer-landing-group-9: inner group (.c-footer-landing__group-9), content not captured
footer-landing-group-10: inner group (.c-footer-landing__group-10), content not captured
footer-landing-group-11: inner flex row (.c-footer-landing__group-11)
footer-landing-list-2: inner flex row (.c-footer-landing__list-2)
footer-landing-item-2: inner group (.c-footer-landing__item-2, 2 instances), content not captured

Recipe

HTML · CSS

<div class="c-footer-landing-scope">
  <footer class="c-footer-landing">
    <div class="c-footer-landing__inner">
      <span class="c-footer-landing__group">
        <h2 class="c-footer-landing__heading">lorem ipsum</h2>
      </span>
      <div class="c-footer-landing__columns">
        <section class="c-footer-landing__column">
          <h3 class="c-footer-landing__column-heading">lorem i</h3>
          <ul class="c-footer-landing__list">
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum dolor sit amet c</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ip</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum dolo</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum dolor s</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum dolor</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum dolor si</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum dolor sit amet</a>
            </li>
          </ul>
        </section>
        <section class="c-footer-landing__column">
          <h3 class="c-footer-landing__column-heading">lorem i</h3>
          <ul class="c-footer-landing__list">
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum dolo</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum dolor sit</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum dolor s</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum dolor</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum dolor s</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum dolor</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum dol</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum dolor s</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum dolor sit amet</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum dolor sit ame</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum do</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum</a>
            </li>
          </ul>
        </section>
        <section class="c-footer-landing__column">
          <h3 class="c-footer-landing__column-heading">lorem</h3>
          <ul class="c-footer-landing__list">
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum dolor s</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ip</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem i</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ips</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsu</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum dolor sit amet</a>
            </li>
          </ul>
        </section>
      </div>
      <div class="c-footer-landing__group-2">
        <span class="c-footer-landing__text">lorem ipsum do</span>
        <div class="c-footer-landing__columns-2">
          <div class="c-footer-landing__group-3">
            <div class="c-footer-landing__group-4">
              <div class="c-footer-landing__text-2">lorem ipsum dolor s</div>
              <div class="c-footer-landing__group-5">
                <span class="c-footer-landing__group-6"></span>
                <span class="c-footer-landing__group-7"></span>
              </div>
            </div>
          </div>
          <div class="c-footer-landing__columns-3">
            <div class="c-footer-landing__group-8">
              <div class="c-footer-landing__columns-3">
                <span class="c-footer-landing__group-9"></span>
                <span class="c-footer-landing__group-10"></span>
              </div>
            </div>
            <div class="c-footer-landing__group-11">
              <ul class="c-footer-landing__list-2">
                <li class="c-footer-landing__item-2"></li>
                <li class="c-footer-landing__item-2"></li>
                <li class="c-footer-landing__item"></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</div>

.c-footer-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-footer-landing {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  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;
  padding-bottom: 80px;
}

.c-footer-landing__inner {
  display: block;
  box-sizing: border-box;
  max-width: 1920px;
  padding-right: 48px;
  padding-left: 48px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-landing__group {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow-x: clip;
  overflow-y: clip;
  white-space: nowrap;
}

.c-footer-landing__heading {
  display: block;
  box-sizing: border-box;
  margin: 0px 0px 15px;
  font-size: 21px;
  font-weight: 700;
  line-height: 30.03px;
}

.c-footer-landing__columns {
  display: grid;
  column-gap: 16px;
  grid-template-columns: repeat(12, minmax(0px, 1fr));
  box-sizing: border-box;
  width: 100%;
  padding-top: 48px;
  padding-bottom: 48px;
}

.c-footer-landing__column {
  display: block;
  box-sizing: border-box;
}

.c-footer-landing__column-heading {
  display: block;
  box-sizing: border-box;
  margin: 0px 0px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
}

.c-footer-landing__list {
  display: grid;
  gap: 16px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-landing__item {
  display: list-item;
  box-sizing: border-box;
}

.c-footer-landing__link {
  display: inline;
  box-sizing: border-box;
  position: relative;
  color: #222222;
  border-radius: 4px;
  cursor: pointer;
  line-height: 18px;
  text-decoration-line: none;
  transition-duration: 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);
  transition-property: text-decoration-thickness, box-shadow, background-color;
}

.c-footer-landing__group-2 {
  display: block;
  box-sizing: border-box;
  padding-top: 24px;
  padding-bottom: 24px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #EBEBEB;
}

.c-footer-landing__text {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow-x: clip;
  overflow-y: clip;
  white-space: nowrap;
}

.c-footer-landing__columns-2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.c-footer-landing__group-3 {
  display: block;
  box-sizing: border-box;
  text-align: left;
}

.c-footer-landing__group-4 {
  display: block;
  box-sizing: border-box;
  padding: 4px;
  margin: -4px;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-footer-landing__text-2 {
  display: inline-block;
  box-sizing: border-box;
  line-height: 18px;
}

.c-footer-landing__group-5 {
  display: inline-block;
  box-sizing: border-box;
}

.c-footer-landing__group-6 {
  display: inline-block;
  box-sizing: border-box;
}

.c-footer-landing__group-7 {
  display: inline-block;
  box-sizing: border-box;
  line-height: 18px;
}

.c-footer-landing__columns-3 {
  display: flex;
  box-sizing: border-box;
}

.c-footer-landing__group-8 {
  display: block;
  box-sizing: border-box;
  margin-left: -8px;
}

.c-footer-landing__group-9 {
  display: block;
  box-sizing: border-box;
  margin-right: 4px;
}

.c-footer-landing__group-10 {
  display: block;
  box-sizing: border-box;
}

.c-footer-landing__group-11 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  margin-left: 4px;
}

.c-footer-landing__list-2 {
  display: flex;
  gap: 20px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px 0px 0px 8px;
  line-height: 0px;
  list-style-type: none;
}

.c-footer-landing__item-2 {
  display: list-item;
  box-sizing: border-box;
  margin-right: 4px;
}

.c-footer-landing__link:hover {
  text-decoration-line: underline;
}

.c-footer-landing__link:focus {
  background-color: #3F3F3F;
  color: #FFFFFF;
  box-shadow: #3F3F3F 0px 0px 0px 2px;
  outline: none;
  text-decoration-line: underline;
  text-decoration-color: #FFFFFF;
}

States

footer-landing-link hover: text-decoration-line underline
footer-landing-link focus (footer-landing-link-focus): background-color #3F3F3F, color #FFFFFF, box-shadow #3F3F3F 0px 0px 0px 2px, outline none, text-decoration-line underline, text-decoration-color #FFFFFF

Button, ghost (3)

Verification: flagged, the original element could not be found again.

Anatomy

button-ghost-3: the component root, a <button> (.c-button-ghost-3)
button-ghost-3-group: inner flex row (.c-button-ghost-3__group)
button-ghost-3-label: label text, 1 characters (.c-button-ghost-3__label)
button-ghost-3-icon: icon placeholder, 12px (.c-button-ghost-3__icon)

Recipe

HTML · CSS

<div class="c-button-ghost-3-scope">
  <button class="c-button-ghost-3" type="button">
    <span class="c-button-ghost-3__group">
      <span class="c-button-ghost-3__label">l</span>
      <span class="c-button-ghost-3__icon" aria-hidden="true"></span>
    </span>
  </button>
</div>

.c-button-ghost-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-button-ghost-3 {
  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-button-ghost-3::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-button-ghost-3__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-button-ghost-3__label {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow-x: clip;
  overflow-y: clip;
  white-space: nowrap;
}

.c-button-ghost-3__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  background-color: currentcolor;
}

.c-button-ghost-3:hover {
  transform: matrix(1, 0, 0, 1, 0, 0);
}

.c-button-ghost-3:focus {
  outline: none;
}

States

hover: transform matrix(1, 0, 0, 1, 0, 0)
focus: outline none

Button, ghost (4)

Verification: flagged, the original element could not be found again.

Anatomy

button-ghost-4: the component root, a <button> (.c-button-ghost-4)
button-ghost-4-group: inner flex row (.c-button-ghost-4__group)
button-ghost-4-label: label text, 1 characters (.c-button-ghost-4__label)
button-ghost-4-icon: icon placeholder, 12px (.c-button-ghost-4__icon)

Recipe

HTML · CSS

<div class="c-button-ghost-4-scope">
  <button class="c-button-ghost-4" type="button">
    <span class="c-button-ghost-4__group">
      <span class="c-button-ghost-4__label">l</span>
      <span class="c-button-ghost-4__icon" aria-hidden="true"></span>
    </span>
  </button>
</div>

.c-button-ghost-4-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-ghost-4 {
  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-button-ghost-4::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-button-ghost-4__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-button-ghost-4__label {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow-x: clip;
  overflow-y: clip;
  white-space: nowrap;
}

.c-button-ghost-4__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  background-color: currentcolor;
}

.c-button-ghost-4:hover {
  transform: matrix(1.07143, 0, 0, 1.07143, 0, 0);
}

.c-button-ghost-4:hover::before {
  background-color: #EBEBEB;
}

.c-button-ghost-4:focus {
  outline: none;
}

.c-button-ghost-4: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

Input (2)

Verification: verified against the live page at desktop.

Anatomy

input-2: the component root, a <input> (.c-input-2), 19-character placeholder

Recipe

HTML · CSS

<div class="c-input-2-scope">
  <input class="c-input-2" type="search" placeholder="lorem ipsum dolor s">
</div>

.c-input-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-input-2 {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 214px;
  height: 18px;
  padding: 0px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: transparent;
  color: #222222;
  border: 0;
  cursor: text;
  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: start;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-input-2:focus {
  outline: none;
}

States

focus: outline none

Card (4)

Verification: flagged, the original element could not be found again.

Anatomy

Group: 6 instances in a 8-column grid, 12px gap; the recipe carries the values they all share
card-4: the component root, a <div> (.c-card-4)
card-4-group: inner block (.c-card-4__group)
card-4-link: link (.c-card-4__link)
card-4-group-2: inner flex column (.c-card-4__group-2)
card-4-group-3: inner block (.c-card-4__group-3)
card-4-group-4: inner block (.c-card-4__group-4), content not captured
card-4-group-5: inner grid (.c-card-4__group-5), content not captured
card-4-group-6: inner grid (.c-card-4__group-6)
card-4-group-7: inner group (.c-card-4__group-7), content not captured
card-4-text: label text, 15 characters (.c-card-4__text)
card-4-group-8: inner flex row (.c-card-4__group-8), content not captured

Recipe

HTML · CSS

<div class="c-card-4-scope">
  <div class="c-card-4">
    <div class="c-card-4__group">
      <a class="c-card-4__link" href="#"></a>
      <div class="c-card-4__group-2">
        <div class="c-card-4__group-3">
          <div class="c-card-4__group-4"></div>
          <div class="c-card-4__group-5"></div>
        </div>
        <div class="c-card-4__group-6">
          <span class="c-card-4__group-7"></span>
          <div class="c-card-4__text">lorem ipsum dol</div>
          <div class="c-card-4__group-8"></div>
        </div>
      </div>
    </div>
  </div>
</div>

.c-card-4-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-4 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  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-4__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  border-radius: 20px;
}

.c-card-4__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-4__group-2 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 100%;
  gap: 8px;
  box-sizing: border-box;
}

.c-card-4__group-3 {
  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-4__group-4 {
  display: block;
  box-sizing: border-box;
}

.c-card-4__group-5 {
  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-4__group-6 {
  display: grid;
  gap: 2px;
  grid-template-columns: minmax(0px, 1fr);
  box-sizing: border-box;
  margin-right: 4px;
  margin-left: 4px;
}

.c-card-4__group-7 {
  display: block;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 16px;
}

.c-card-4__text {
  display: block;
  box-sizing: border-box;
  color: #6C6C6C;
  font-size: 12px;
  line-height: 16px;
}

.c-card-4__group-8 {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  color: #6C6C6C;
  font-size: 12px;
  line-height: 16px;
}

States

No hover or focus change was observed.

Carousel section

Verification: flagged, the render came out 4 px narrower than the original (instance 1) after 2 correction attempts.

Anatomy

Group: 4 instances in a 1-column grid; the recipe carries the values they all share
carousel-section: the component root, a <div> (.c-carousel-section)

Recipe

HTML · CSS

<div class="c-carousel-section-scope">
  <div class="c-carousel-section"></div>
</div>

.c-carousel-section-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-section {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  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-section::before {
  content: "";
  display: flex;
  box-sizing: border-box;
}

.c-carousel-section::after {
  content: "";
  display: flex;
  box-sizing: border-box;
}

States

No hover or focus change was observed.

Search field (3)

Verification: flagged, the render matched 93% of the original pixels, below the 96% required on focus after 2 correction attempts.

Anatomy

search-field-3: the component root, a <div> (.c-search-field-3)
search-field-3-group: inner block (.c-search-field-3__group)
search-field-3-text: label text, 4 characters (.c-search-field-3__text)
search-field-3-text-2: label text, 9 characters (.c-search-field-3__text-2)

Recipe

HTML · CSS

<div class="c-search-field-3-scope">
  <div class="c-search-field-3">
    <div class="c-search-field-3__group">
      <div class="c-search-field-3__text">lore</div>
      <div class="c-search-field-3__text-2">lorem ips</div>
    </div>
  </div>
</div>

.c-search-field-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-search-field-3 {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  color: #222222;
  border-radius: 32px;
  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;
}

.c-search-field-3::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 291px;
  height: 32px;
  position: absolute;
  top: 33px;
  right: -4px;
  bottom: 1px;
  left: -4px;
  z-index: -1;
  transform: matrix(1, 0, 0, 1, 0, -16);
}

.c-search-field-3::after {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 353px;
  height: 66px;
  position: absolute;
  top: 0px;
  right: -70px;
  bottom: 0px;
  left: 0px;
  z-index: -1;
  border-radius: 32px;
}

.c-search-field-3__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 15px 24px;
  position: relative;
  z-index: 2;
  overflow-x: clip;
  overflow-y: clip;
}

.c-search-field-3__text {
  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-search-field-3__text-2 {
  display: block;
  box-sizing: border-box;
  overflow-x: clip;
  overflow-y: clip;
  color: #6C6C6C;
  line-height: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-search-field-3:hover {
  background-color: #EBEBEB;
}

.c-search-field-3:hover::before {
  background-color: #FFFFFF;
}

.c-search-field-3:focus {
  box-shadow: #222222 0px 0px 0px 2px;
}

States

hover (search-field-3-hover): background-color #EBEBEB, ::before background-color #FFFFFF
focus: box-shadow #222222 0px 0px 0px 2px

Search field (4)

Verification: flagged, the render matched 90% of the original pixels, below the 96% required on hover after 2 correction attempts.

Anatomy

search-field-4: the component root, a <div> (.c-search-field-4)
search-field-4-group: inner block (.c-search-field-4__group)
search-field-4-text: label text, 15 characters (.c-search-field-4__text)
search-field-4-group-2: inner block (.c-search-field-4__group-2)
search-field-4-text-2: label text, 11 characters (.c-search-field-4__text-2)

Recipe

HTML · CSS

<div class="c-search-field-4-scope">
  <div class="c-search-field-4">
    <div class="c-search-field-4__group">
      <div class="c-search-field-4__text">lorem ipsum dol</div>
      <div class="c-search-field-4__group-2">
        <div class="c-search-field-4__text-2">lorem ipsum</div>
      </div>
    </div>
  </div>
</div>

.c-search-field-4-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-search-field-4 {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  color: #222222;
  border-radius: 32px;
  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;
}

.c-search-field-4::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-search-field-4::after {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 278px;
  height: 66px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: -1;
  border-radius: 32px;
}

.c-search-field-4__group {
  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-search-field-4__text {
  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-search-field-4__group-2 {
  display: block;
  box-sizing: border-box;
}

.c-search-field-4__text-2 {
  display: block;
  box-sizing: border-box;
  overflow-x: clip;
  overflow-y: clip;
  color: #6C6C6C;
  line-height: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-search-field-4:hover {
  background-color: #EBEBEB;
}

.c-search-field-4:hover::before {
  right: 4px;
  background-color: #FFFFFF;
}

.c-search-field-4:hover::after {
  left: -70px;
}

.c-search-field-4:focus {
  box-shadow: #222222 0px 0px 0px 2px;
}

States

hover (search-field-4-hover): background-color #EBEBEB, ::before right 4px, ::before background-color #FFFFFF, ::after left -70px
focus: box-shadow #222222 0px 0px 0px 2px

Tab

Verification: verified against the live page at desktop.

Anatomy

tab-active: the component root, a <button> (.c-tab-active), 7-character label

Recipe

HTML · CSS

<div class="c-tab-active-scope">
  <button class="c-tab-active" type="button">lorem i</button>
</div>

.c-tab-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-tab-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-tab-active:focus {
  background-color: #F7F7F7;
  border-radius: 4px;
  box-shadow: #222222 0px 0px 0px 2px, #FFFFFFCC 0px 0px 0px 4px;
  outline: none;
}

States

focus (tab-active-focus): background-color #F7F7F7, border-radius 4px, box-shadow #222222 0px 0px 0px 2px, #FFFFFFCC 0px 0px 0px 4px, outline none

Tab

Verification: flagged, the render matched 96% of the original pixels, below the 96% required on focus after 2 correction attempts.

Anatomy

tab: the component root, a <button> (.c-tab), 12-character label

Recipe

HTML · CSS

<div class="c-tab-scope">
  <button class="c-tab" type="button">lorem ipsum</button>
</div>

.c-tab-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-tab {
  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-tab:hover {
  color: #222222;
}

.c-tab:focus {
  background-color: #F7F7F7;
  color: #222222;
  border-radius: 4px;
  box-shadow: #222222 0px 0px 0px 2px, #FFFFFFCC 0px 0px 0px 4px;
  outline: none;
}

States

hover (tab-hover): color #222222
focus (tab-focus): background-color #F7F7F7, color #222222, border-radius 4px, box-shadow #222222 0px 0px 0px 2px, #FFFFFFCC 0px 0px 0px 4px, outline none

Verification: flagged, the original element could not be found again.

Anatomy

footer-setting-button: the component root, a <button> (.c-footer-setting-button)
footer-setting-button-group: inner flex row (.c-footer-setting-button__group)
footer-setting-button-icon: icon placeholder, 16px (.c-footer-setting-button__icon)
footer-setting-button-text: label text, 12 characters (.c-footer-setting-button__text)

Recipe

HTML · CSS

<div class="c-footer-setting-button-scope">
  <button class="c-footer-setting-button" type="button">
    <span class="c-footer-setting-button__group">
      <span class="c-footer-setting-button__icon" aria-hidden="true"></span>
      <span class="c-footer-setting-button__text">lorem ipsum</span>
    </span>
  </button>
</div>

.c-footer-setting-button-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-footer-setting-button {
  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-footer-setting-button__group {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  vertical-align: top;
}

.c-footer-setting-button__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-footer-setting-button:hover {
  background-color: #EBEBEB;
}

.c-footer-setting-button:focus {
  box-shadow: #222222 0px 0px 0px 2px;
  outline: none;
}

States

hover (footer-setting-button-hover): background-color #EBEBEB
focus: box-shadow #222222 0px 0px 0px 2px, outline none

Verification: flagged, the original element could not be found again.

Anatomy

footer-setting-button-2: the component root, a <button> (.c-footer-setting-button-2)
footer-setting-button-2-text: label text, 0 characters (.c-footer-setting-button-2__text)
footer-setting-button-2-text-2: label text, 1 characters (.c-footer-setting-button-2__text-2, 2 instances)

Recipe

HTML · CSS

<div class="c-footer-setting-button-2-scope">
  <button class="c-footer-setting-button-2" type="button">
    <div class="c-footer-setting-button-2__text">
      <span class="c-footer-setting-button-2__text-2">l</span>
      <span class="c-footer-setting-button-2__text-2">lor</span>
    </div>
  </button>
</div>

.c-footer-setting-button-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-footer-setting-button-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-footer-setting-button-2__text {
  display: flex;
  gap: 8px;
  box-sizing: border-box;
}

.c-footer-setting-button-2:hover {
  background-color: #EBEBEB;
}

.c-footer-setting-button-2:focus {
  box-shadow: #222222 0px 0px 0px 2px;
  outline: none;
}

States

hover (footer-setting-button-2-hover): background-color #EBEBEB
focus: box-shadow #222222 0px 0px 0px 2px, outline none

Button, ghost (5)

Verification: verified against the live page at desktop.

Anatomy

button-ghost-5: the component root, a <button> (.c-button-ghost-5)
button-ghost-5-group: inner flex row (.c-button-ghost-5__group)
button-ghost-5-icon: icon placeholder, 24px (.c-button-ghost-5__icon)

Recipe

HTML · CSS

<div class="c-button-ghost-5-scope">
  <button class="c-button-ghost-5" type="button">
    <span class="c-button-ghost-5__group">
      <span class="c-button-ghost-5__icon" aria-hidden="true"></span>
    </span>
  </button>
</div>

.c-button-ghost-5-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-ghost-5 {
  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-button-ghost-5::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-button-ghost-5__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-button-ghost-5__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  background-color: currentcolor;
}

.c-button-ghost-5:hover::before {
  background-color: #EBEBEB;
}

.c-button-ghost-5:focus {
  outline: none;
}

.c-button-ghost-5: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

Button, ghost (6)

Verification: verified against the live page at desktop.

Anatomy

button-ghost-6: the component root, a <button> (.c-button-ghost-6)
button-ghost-6-group: inner flex row (.c-button-ghost-6__group)
button-ghost-6-icon: icon placeholder, 16px (.c-button-ghost-6__icon)

Recipe

HTML · CSS

<div class="c-button-ghost-6-scope">
  <button class="c-button-ghost-6" type="button">
    <span class="c-button-ghost-6__group">
      <span class="c-button-ghost-6__icon" aria-hidden="true"></span>
    </span>
  </button>
</div>

.c-button-ghost-6-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-ghost-6 {
  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-button-ghost-6::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-button-ghost-6__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-button-ghost-6__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  background-color: currentcolor;
}

.c-button-ghost-6:hover::before {
  background-color: #EBEBEB;
}

.c-button-ghost-6:focus {
  outline: none;
}

.c-button-ghost-6: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

Button, ghost (7)

Verification: verified against the live page at desktop.

Anatomy

button-ghost-7: the component root, a <button> (.c-button-ghost-7)
button-ghost-7-label: label text, 9 characters (.c-button-ghost-7__label)
button-ghost-7-icon: icon placeholder, 12px (.c-button-ghost-7__icon)

Recipe

HTML · CSS

<div class="c-button-ghost-7-scope">
  <button class="c-button-ghost-7" type="button">
    <span class="c-button-ghost-7__label">lorem ips</span>
    <span class="c-button-ghost-7__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-ghost-7-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-7 {
  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-ghost-7__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  background-color: currentcolor;
}

.c-button-ghost-7: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-ghost-7-focus): background-color #F7F7F7, box-shadow #222222 0px 0px 0px 2px, #FFFFFFCC 0px 0px 0px 4px, outline none, text-decoration-line underline

Header (inner)

Verification: flagged, the header-inner-group y did not reproduce the measured 0px after 2 correction attempts.

Variant observed on https://www.airbnb.com/homes.

Anatomy

header-inner: the component root, a <header> (.c-header-inner)
header-inner-logo: link (.c-header-inner__logo)
header-inner-logo-icon: icon placeholder, 102x32px (.c-header-inner__logo-icon)
header-inner-group: inner group (.c-header-inner__group)
header-inner-group-2: inner flex column (.c-header-inner__group-2)
header-inner-group-3: inner block (.c-header-inner__group-3, 3 instances)
header-inner-inner: inner flex row (.c-header-inner__inner)
header-inner-inner-2: inner flex row (.c-header-inner__inner-2)
header-inner-inner-3: inner flex row (.c-header-inner__inner-3)
header-inner-text: label text, 17 characters (.c-header-inner__text)
header-inner-group-4: inner block (.c-header-inner__group-4)
header-inner-group-5: inner block (.c-header-inner__group-5)
header-inner-group-6: inner flex row (.c-header-inner__group-6)
header-inner-group-7: inner block (.c-header-inner__group-7), content not captured
header-inner-group-8: inner block (.c-header-inner__group-8)
header-inner-nav: inner flex row (.c-header-inner__nav)
header-inner-group-9: inner flex row (.c-header-inner__group-9)
header-inner-cta: the button-secondary button, 13-character label (.c-header-inner__cta)
header-inner-group-10: inner block (.c-header-inner__group-10)
header-inner-cta-2: the button-ghost-5 button (.c-header-inner__cta-2, 2 instances)
header-inner-group-11: inner flex row (.c-header-inner__group-11, 2 instances)
header-inner-icon: icon placeholder, 24px (.c-header-inner__icon)
header-inner-group-12: inner block (.c-header-inner__group-12)
header-inner-icon-2: icon placeholder, 16px (.c-header-inner__icon-2)

Recipe

HTML · CSS

<div class="c-header-inner-scope">
  <header class="c-header-inner">
    <a class="c-header-inner__logo" href="#">
      <span class="c-header-inner__logo-icon" aria-hidden="true"></span>
    </a>
    <div class="c-header-inner__group">
      <div class="c-header-inner__group-2">
        <div class="c-header-inner__group-3">
          <div class="c-header-inner__inner"></div>
          <div class="c-header-inner__inner-2">
            <div class="c-header-inner__inner-3">
              <span class="c-header-inner__text">lorem ipsum dolor</span>
              <div class="c-header-inner__group-4"></div>
              <div class="c-header-inner__group-5">
                <div class="c-header-inner__group-6">
                  <div class="c-header-inner__group-7"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="c-header-inner__group-8"></div>
    </div>
    <div class="c-header-inner__group-3">
      <nav class="c-header-inner__nav">
        <div class="c-header-inner__group-9">
          <button class="c-header-inner__cta" type="button">lorem ipsum d</button>
          <div class="c-header-inner__group-10">
            <button class="c-header-inner__cta-2" type="button">
              <span class="c-header-inner__group-11">
                <span class="c-header-inner__icon" aria-hidden="true"></span>
              </span>
            </button>
          </div>
        </div>
        <div class="c-header-inner__group-3">
          <div class="c-header-inner__group-12">
            <button class="c-header-inner__cta-2" type="button">
              <span class="c-header-inner__group-11">
                <span class="c-header-inner__icon-2" aria-hidden="true"></span>
              </span>
            </button>
          </div>
        </div>
      </nav>
    </div>
  </header>
</div>

.c-header-inner-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-inner {
  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-inner__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-inner__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-inner__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-inner__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-inner__group-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  z-index: 1;
  transform: matrix(1, 0, 0, 1, 0, -67.8259);
  margin-top: 8px;
}

.c-header-inner__group-3 {
  display: block;
  box-sizing: border-box;
}

.c-header-inner__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-inner__inner-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  position: absolute;
  left: 50%;
  transform: matrix(1, 0, 0, 1, -664.5, 0);
}

.c-header-inner__inner-3 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
  position: relative;
  border-radius: 40px;
  cursor: pointer;
  transition: box-shadow 0.175s cubic-bezier(0.2, 0, 0, 1);
}

.c-header-inner__text {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow-x: clip;
  overflow-y: clip;
  white-space: nowrap;
}

.c-header-inner__group-4 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -1;
  background-color: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 11.0852% 105.801%;
  box-shadow: #00000014 0px 1px 2px 0px, #0000000D 0px 4px 12px 0px;
  transform: matrix(1.2816, 0, 0, 1, 0, 0);
}

.c-header-inner__group-5 {
  display: block;
  box-sizing: border-box;
  padding-top: 7px;
  padding-right: 7px;
  padding-bottom: 7px;
}

.c-header-inner__group-6 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: 10px;
  background-color: #DA1249;
  color: #FFFFFF;
  border-radius: 83.784%;
  transform: matrix(1.11159, 0, 0, 1, 50.4599, 0);
}

.c-header-inner__group-7 {
  display: block;
  box-sizing: border-box;
  transform: matrix(0.966537, 0, 0, 1, 0, 0);
}

.c-header-inner__group-8 {
  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, 1.29475, 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-inner__group-8::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, 1, 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-inner__nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  height: 80px;
  position: relative;
}

.c-header-inner__group-9 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
  gap: 12px;
  box-sizing: border-box;
  margin-right: 12px;
}

.c-header-inner__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-inner__group-10 {
  display: block;
  box-sizing: border-box;
  position: relative;
  vertical-align: middle;
  margin-top: auto;
  margin-bottom: auto;
}

.c-header-inner__cta-2 {
  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-inner__cta-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-header-inner__group-11 {
  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-inner__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  background-color: currentcolor;
}

.c-header-inner__group-12 {
  display: inline;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner__icon-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  background-color: currentcolor;
}

.c-header-inner__logo:focus {
  outline: none;
}

.c-header-inner__logo:focus::before {
  box-shadow: #222222 0px 0px 0px 2px;
}

.c-header-inner__cta:hover {
  background-color: #F7F7F7;
}

.c-header-inner__cta:focus {
  box-shadow: #222222 0px 0px 0px 2px;
  outline: none;
}

.c-header-inner__cta-2:hover::before {
  background-color: #EBEBEB;
}

.c-header-inner__cta-2:focus {
  outline: none;
}

.c-header-inner__cta-2:focus::before {
  box-shadow: #FFFFFF 0px 0px 0px 2px, #222222 0px 0px 0px 4px;
}

States

header-inner-logo focus: outline none, ::before box-shadow #222222 0px 0px 0px 2px
header-inner-cta hover (header-inner-cta-hover): background-color #F7F7F7
header-inner-cta focus: box-shadow #222222 0px 0px 0px 2px, outline none
header-inner-cta-2 hover: ::before background-color #EBEBEB
header-inner-cta-2 focus: outline none, ::before box-shadow #FFFFFF 0px 0px 0px 2px, #222222 0px 0px 0px 4px

Button, primary (2)

Verification: verified against the live page at desktop.

Anatomy

button-primary-2: the component root, a <button> (.c-button-primary-2)

Recipe

HTML · CSS

<div class="c-button-primary-2-scope">
  <button class="c-button-primary-2" type="button"></button>
</div>

.c-button-primary-2-scope {
  background-color: #FFFFFF;
  color: #222222;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-primary-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  min-width: 112px;
  padding: 14px 24px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: transparent;
  background-image: linear-gradient(to right, #E61E4D 0%, #E31C5F 50%, #D70466 100%);
  color: #FFFFFF;
  border: 0;
  border-radius: 999px;
  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-duration: 0.2s, 0.25s, 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: box-shadow, transform, border-color, color;
}

.c-button-primary-2: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 (3)

Verification: flagged, the render matched 63% of the original pixels, below the 97% required after 2 correction attempts.

Anatomy

button-secondary-3: the component root, a <button> (.c-button-secondary-3)
button-secondary-3-group: inner flex row (.c-button-secondary-3__group)
button-secondary-3-icon: icon placeholder, 16px (.c-button-secondary-3__icon)
button-secondary-3-label: label text, 15 characters (.c-button-secondary-3__label)

Recipe

HTML · CSS

<div class="c-button-secondary-3-scope">
  <button class="c-button-secondary-3" type="button">
    <span class="c-button-secondary-3__group">
      <span class="c-button-secondary-3__icon" aria-hidden="true"></span>
      <span class="c-button-secondary-3__label">lorem ipsum dol</span>
    </span>
  </button>
</div>

.c-button-secondary-3-scope {
  background-color: #FFFFFF;
  color: #222222;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-secondary-3 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  min-width: 75px;
  padding: 8px 16px;
  position: relative;
  background-color: #F2F2F2;
  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: 12px;
  font-weight: 500;
  line-height: 16px;
  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-secondary-3__group {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  vertical-align: top;
}

.c-button-secondary-3__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-secondary-3:hover {
  background-color: #EBEBEB;
}

.c-button-secondary-3:focus {
  box-shadow: #FFFFFF 0px 0px 0px 2px, #222222 0px 0px 0px 4px;
  outline: none;
}

States

hover (button-secondary-3-hover): background-color #EBEBEB
focus: box-shadow #FFFFFF 0px 0px 0px 2px, #222222 0px 0px 0px 4px, outline none

Button, secondary (4)

Verification: verified against the live page at desktop.

Anatomy

button-secondary-4: the component root, a <button> (.c-button-secondary-4), 21-character label

Recipe

HTML · CSS

<div class="c-button-secondary-4-scope">
  <button class="c-button-secondary-4" type="button">lorem ipsum dolor sit</button>
</div>

.c-button-secondary-4-scope {
  background-color: #FFFFFF;
  color: #222222;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-secondary-4 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  min-width: 112px;
  padding: 14px 24px;
  position: relative;
  background-color: #F2F2F2;
  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: 16px;
  font-weight: 500;
  line-height: 20px;
  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-secondary-4:hover {
  background-color: #EBEBEB;
}

.c-button-secondary-4:focus {
  box-shadow: #FFFFFF 0px 0px 0px 2px, #222222 0px 0px 0px 4px;
  outline: none;
}

States

hover (button-secondary-4-hover): background-color #EBEBEB
focus: box-shadow #FFFFFF 0px 0px 0px 2px, #222222 0px 0px 0px 4px, outline none

Button, ghost (8)

Verification: flagged, the render matched 95% of the original pixels, below the 97% required on focus after 2 correction attempts.

Anatomy

button-ghost-8: the component root, a <button> (.c-button-ghost-8)
button-ghost-8-group: inner flex row (.c-button-ghost-8__group)
button-ghost-8-group-2: inner group (.c-button-ghost-8__group-2)
button-ghost-8-icon: icon placeholder, 16px (.c-button-ghost-8__icon)
button-ghost-8-label: label text, 5 characters (.c-button-ghost-8__label)

Recipe

HTML · CSS

<div class="c-button-ghost-8-scope">
  <button class="c-button-ghost-8" type="button">
    <div class="c-button-ghost-8__group">
      <span class="c-button-ghost-8__group-2">
        <span class="c-button-ghost-8__icon" aria-hidden="true"></span>
      </span>
      <span class="c-button-ghost-8__label">lorem</span>
    </div>
  </button>
</div>

.c-button-ghost-8-scope {
  background-color: #FFFFFF;
  color: #222222;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-ghost-8 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 8px;
  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-decoration-line: underline;
  text-decoration-color: #222222;
  text-align: center;
  white-space: nowrap;
  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-ghost-8__group {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.c-button-ghost-8__group-2 {
  display: block;
  box-sizing: border-box;
  margin-right: 8px;
}

.c-button-ghost-8__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  background-color: currentcolor;
}

.c-button-ghost-8:hover {
  background-color: #F7F7F7;
  color: #000000;
  text-decoration-color: #000000;
}

.c-button-ghost-8:focus {
  background-color: #F7F7F7;
  box-shadow: #222222 0px 0px 0px 2px, #FFFFFFCC 0px 0px 0px 4px;
  outline: none;
}

States

hover (button-ghost-8-hover): background-color #F7F7F7, color #000000, text-decoration-color #000000
focus (button-ghost-8-focus): background-color #F7F7F7, box-shadow #222222 0px 0px 0px 2px, #FFFFFFCC 0px 0px 0px 4px, outline none

Button, ghost (9)

Verification: verified against the live page at desktop.

Anatomy

button-ghost-9: the component root, a <button> (.c-button-ghost-9)
button-ghost-9-group: inner flex row (.c-button-ghost-9__group)
button-ghost-9-group-2: inner group (.c-button-ghost-9__group-2)
button-ghost-9-icon: icon placeholder, 16px (.c-button-ghost-9__icon)
button-ghost-9-label: label text, 19 characters (.c-button-ghost-9__label)

Recipe

HTML · CSS

<div class="c-button-ghost-9-scope">
  <button class="c-button-ghost-9" type="button">
    <span class="c-button-ghost-9__group">
      <span class="c-button-ghost-9__group-2">
        <span class="c-button-ghost-9__icon" aria-hidden="true"></span>
      </span>
      <span class="c-button-ghost-9__label">lorem ipsum dolor s</span>
    </span>
  </button>
</div>

.c-button-ghost-9-scope {
  background-color: #FFFFFF;
  color: #222222;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-ghost-9 {
  display: inline-block;
  align-self: center;
  order: 1;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #222222;
  border: 0;
  border-radius: 4px;
  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-decoration-line: underline;
  text-decoration-color: #222222;
  text-align: center;
  transition-duration: 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);
  transition-property: text-decoration-thickness, box-shadow, background-color;
}

.c-button-ghost-9__group {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  color: #6C6C6C;
  font-size: 14px;
  line-height: 18px;
}

.c-button-ghost-9__group-2 {
  display: block;
  box-sizing: border-box;
  margin-right: 16px;
}

.c-button-ghost-9__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-9:focus {
  background-color: #3F3F3F;
  color: #FFFFFF;
  box-shadow: #3F3F3F 0px 0px 0px 2px;
  outline: none;
  text-decoration-color: #FFFFFF;
}

States

focus (button-ghost-9-focus): background-color #3F3F3F, color #FFFFFF, box-shadow #3F3F3F 0px 0px 0px 2px, outline none, text-decoration-color #FFFFFF

Input (4)

Verification: flagged, the render matched 94% of the original pixels, below the 97% required on focus after 2 correction attempts.

Anatomy

input-4: the component root, a <button> (.c-input-4)
input-4-label: label text, 8 characters (.c-input-4__label)
input-4-group: inner block (.c-input-4__group)
input-4-image: image placeholder, 48px (.c-input-4__image)
input-4-label-2: label text, 8 characters (.c-input-4__label-2)

Recipe

HTML · CSS

<div class="c-input-4-scope">
  <button class="c-input-4" type="button">
    <span class="c-input-4__label">lorem ip</span>
    <div class="c-input-4__group">
      <span class="c-input-4__image" aria-hidden="true"></span>
    </div>
    <div class="c-input-4__label-2">lorem ip</div>
  </button>
</div>

.c-input-4-scope {
  background-color: #FFFFFF;
  color: #222222;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-input-4 {
  display: inline-flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 48px;
  padding: 0px;
  position: relative;
  z-index: 1;
  background-color: transparent;
  color: #222222;
  border: 1px solid transparent;
  border-radius: 40px 4px 4px 40px;
  cursor: pointer;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
}

.c-input-4__label {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow-x: clip;
  overflow-y: clip;
  white-space: nowrap;
}

.c-input-4__group {
  display: block;
  box-sizing: border-box;
  height: 48px;
}

.c-input-4__image {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  margin-left: 8px;
}

.c-input-4__label-2 {
  display: block;
  flex-grow: 1;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: opacity 0.15s cubic-bezier(0, 0, 1, 1);
  padding-right: 16px;
}

.c-input-4: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

Input (5)

Verification: flagged, the render matched 94% of the original pixels, below the 97% required on focus after 2 correction attempts.

Anatomy

input-5: the component root, a <button> (.c-input-5)
input-5-label: label text, 20 characters (.c-input-5__label)
input-5-label-2: label text, 7 characters (.c-input-5__label-2)

Recipe

HTML · CSS

<div class="c-input-5-scope">
  <button class="c-input-5" type="button">
    <span class="c-input-5__label">lorem ipsum dolor si</span>
    <div class="c-input-5__label-2">lorem i</div>
  </button>
</div>

.c-input-5-scope {
  background-color: #FFFFFF;
  color: #222222;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-input-5 {
  display: inline-flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 48px;
  padding: 0px;
  position: relative;
  z-index: 1;
  background-color: transparent;
  color: #222222;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
}

.c-input-5__label {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow-x: clip;
  overflow-y: clip;
  white-space: nowrap;
}

.c-input-5__label-2 {
  display: block;
  flex-grow: 1;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: opacity 0.15s cubic-bezier(0, 0, 1, 1);
  padding-right: 16px;
  padding-left: 16px;
}

.c-input-5: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

Input (6)

Verification: flagged, the render matched 97% of the original pixels, below the 97% required on focus after 2 correction attempts.

Anatomy

input-6: the component root, a <button> (.c-input-6)
input-6-label: label text, 6 characters (.c-input-6__label)
input-6-group: inner block (.c-input-6__group)
input-6-label-2: label text, 10 characters (.c-input-6__label-2)

Recipe

HTML · CSS

<div class="c-input-6-scope">
  <button class="c-input-6" type="button">
    <span class="c-input-6__label">lorem</span>
    <div class="c-input-6__group"></div>
    <div class="c-input-6__label-2">lorem ipsu</div>
  </button>
</div>

.c-input-6-scope {
  background-color: #FFFFFF;
  color: #222222;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-input-6 {
  display: inline-flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 48px;
  padding: 0px;
  position: relative;
  z-index: 1;
  background-color: transparent;
  color: #222222;
  border: 1px solid transparent;
  border-radius: 4px 40px 40px 4px;
  cursor: pointer;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
}

.c-input-6__label {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow-x: clip;
  overflow-y: clip;
  white-space: nowrap;
}

.c-input-6__group {
  display: block;
  box-sizing: border-box;
  height: 48px;
}

.c-input-6__label-2 {
  display: block;
  flex-grow: 1;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: opacity 0.15s cubic-bezier(0, 0, 1, 1);
  padding-right: 16px;
  padding-left: 16px;
}

.c-input-6:focus {
  outline: none;
}

.c-input-6:focus::after {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 147px;
  height: 46px;
  position: absolute;
  top: 0px;
  right: -40px;
  bottom: 0px;
  left: 0px;
  box-shadow: #FFFFFF 0px 0px 0px 2px, #222222 0px 0px 0px 4px;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
}

States

focus: outline none, ::after content "", ::after display block, ::after box-sizing border-box, ::after width 147px, ::after height 46px, ::after position absolute, ::after top 0px, ::after right -40px, ::after bottom 0px, ::after left 0px, ::after box-shadow #FFFFFF 0px 0px 0px 2px, #222222 0px 0px 0px 4px, ::after border-top-right-radius 40px, ::after border-bottom-right-radius 40px

Card (5)

Verification: flagged, the card-5-group-9 y did not reproduce the measured 82px after 2 correction attempts.

Anatomy

Group: 6 instances in a 2-column grid; the recipe carries the values they all share
card-5: the component root, a <div> (.c-card-5)
card-5-group: inner block (.c-card-5__group)
card-5-group-2: inner flex column (.c-card-5__group-2)
card-5-group-3: inner block (.c-card-5__group-3, 2 instances)
card-5-group-4: inner flex row (.c-card-5__group-4), content not captured
card-5-group-5: inner flex row (.c-card-5__group-5)
card-5-group-6: inner flex row (.c-card-5__group-6), content not captured
card-5-group-7: inner block (.c-card-5__group-7, 2 instances), content not captured
card-5-text: label text, 11 characters (.c-card-5__text, 2 instances)
card-5-group-8: inner block (.c-card-5__group-8)
card-5-group-9: inner block (.c-card-5__group-9), content not captured
card-5-group-10: inner block (.c-card-5__group-10)
card-5-button: button (.c-card-5__button), content not captured

Recipe

HTML · CSS

<div class="c-card-5-scope">
  <div class="c-card-5">
    <div class="c-card-5__group">
      <div class="c-card-5__group-2">
        <div class="c-card-5__group-3">
          <div class="c-card-5__group-4"></div>
        </div>
        <div class="c-card-5__group-5">
          <div class="c-card-5__group-6"></div>
          <div class="c-card-5__group-7"></div>
          <div class="c-card-5__text">lorem ipsum</div>
          <div class="c-card-5__group-7"></div>
          <div class="c-card-5__text">lorem ipsum dolo</div>
        </div>
      </div>
      <div class="c-card-5__group-3">
        <div class="c-card-5__group-8">
          <div class="c-card-5__group-9"></div>
        </div>
        <div class="c-card-5__group-10">
          <button class="c-card-5__button" type="button"></button>
        </div>
      </div>
    </div>
  </div>
</div>

.c-card-5-scope {
  background-color: #FFFFFF;
  color: #222222;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-5 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  color: #222222;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  padding-right: 8px;
  padding-left: 8px;
}

.c-card-5__group {
  display: block;
  box-sizing: border-box;
  margin-bottom: 40px;
}

.c-card-5__group-2 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  margin-bottom: 4px;
}

.c-card-5__group-3 {
  display: block;
  box-sizing: border-box;
}

.c-card-5__group-4 {
  display: flex;
  flex-direction: row-reverse;
  justify-content: left;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
}

.c-card-5__group-5 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
}

.c-card-5__group-6 {
  display: flex;
  gap: 1px;
  box-sizing: border-box;
}

.c-card-5__group-7 {
  display: block;
  box-sizing: border-box;
  color: #6C6C6C;
  font-weight: 400;
  padding-right: 5px;
  padding-left: 5px;
}

.c-card-5__text {
  display: block;
  box-sizing: border-box;
  color: #6C6C6C;
  font-weight: 400;
}

.c-card-5__group-8 {
  display: block;
  box-sizing: border-box;
  line-height: 24px;
  white-space: pre-wrap;
}

.c-card-5__group-9 {
  box-sizing: border-box;
}

.c-card-5__group-10 {
  display: block;
  box-sizing: border-box;
  line-height: 24px;
  margin-top: 8px;
}

.c-card-5__button {
  display: inline-block;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #222222;
  border: 0;
  border-radius: 4px;
  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: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-decoration-line: underline;
  text-decoration-color: #222222;
  text-align: start;
  transition-duration: 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);
  transition-property: text-decoration-thickness, box-shadow, background-color;
}

States

No hover or focus change was observed.

Photo gallery

Verification: flagged, the photo-gallery-media y did not reproduce the measured 455px after 2 correction attempts.

Anatomy

photo-gallery: the component root, a <button> (.c-photo-gallery)
photo-gallery-group: inner block (.c-photo-gallery__group)
photo-gallery-media: image placeholder, 560x21px (.c-photo-gallery__media)

Recipe

HTML · CSS

<div class="c-photo-gallery-scope">
  <button class="c-photo-gallery" type="button">
    <div class="c-photo-gallery__group">
      <span class="c-photo-gallery__media" aria-hidden="true"></span>
    </div>
  </button>
</div>

.c-photo-gallery-scope {
  background-color: #2222221A;
  color: #222222;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-photo-gallery {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #222222;
  border: 0;
  cursor: pointer;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-decoration-line: underline;
  text-decoration-color: #222222;
  text-align: left;
}

.c-photo-gallery::after {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 560px;
  height: 476px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.c-photo-gallery__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
  vertical-align: bottom;
}

.c-photo-gallery__media {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 560px;
  height: 21px;
  background-color: currentcolor;
}

.c-photo-gallery:focus {
  outline: none;
}

.c-photo-gallery:focus::after {
  border: 2px solid #000000;
}

States

focus: outline none, ::after border 2px solid #000000

Photo gallery (2)

Verification: flagged, the photo-gallery-2-media y did not reproduce the measured 217px after 2 correction attempts.

Anatomy

photo-gallery-2: the component root, a <button> (.c-photo-gallery-2)
photo-gallery-2-group: inner block (.c-photo-gallery-2__group)
photo-gallery-2-media: image placeholder, 272x21px (.c-photo-gallery-2__media)

Recipe

HTML · CSS

<div class="c-photo-gallery-2-scope">
  <button class="c-photo-gallery-2" type="button">
    <div class="c-photo-gallery-2__group">
      <span class="c-photo-gallery-2__media" aria-hidden="true"></span>
    </div>
  </button>
</div>

.c-photo-gallery-2-scope {
  background-color: #2222221A;
  color: #222222;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-photo-gallery-2 {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #222222;
  border: 0;
  cursor: pointer;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-decoration-line: underline;
  text-decoration-color: #222222;
  text-align: left;
}

.c-photo-gallery-2::after {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 272px;
  height: 238px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.c-photo-gallery-2__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
  vertical-align: bottom;
}

.c-photo-gallery-2__media {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 272px;
  height: 21px;
  background-color: currentcolor;
}

.c-photo-gallery-2:focus {
  outline: none;
}

.c-photo-gallery-2:focus::after {
  border: 2px solid #000000;
}

States

focus: outline none, ::after border 2px solid #000000

Calendar

Verification: flagged, the calendar-row height did not reproduce the measured 42px after 2 correction attempts.

Anatomy

calendar: the component root, a <table> (.c-calendar)
calendar-body: inner group (.c-calendar__body), content not captured
calendar-row: inner group (.c-calendar__row, 3 instances), content not captured
calendar-cell: inner group (.c-calendar__cell, 2 instances)
calendar-cell-2: inner group (.c-calendar__cell-2, 11 instances)
calendar-text: label text, 1 characters (.c-calendar__text, 10 instances)
calendar-cell-3: inner group (.c-calendar__cell-3)
calendar-text-2: label text, 1 characters (.c-calendar__text-2, 2 instances)
calendar-cell-4: inner group (.c-calendar__cell-4)
calendar-text-3: label text, 1 characters (.c-calendar__text-3)
calendar-text-4: label text, 28 characters (.c-calendar__text-4)
calendar-cell-5: inner group (.c-calendar__cell-5)
calendar-text-5: label text, 2 characters (.c-calendar__text-5, 2 instances)
calendar-cell-6: inner group (.c-calendar__cell-6)
calendar-text-6: label text, 2 characters (.c-calendar__text-6)
calendar-cell-7: inner group (.c-calendar__cell-7)

Recipe

HTML · CSS

<div class="c-calendar-scope">
  <table class="c-calendar">
    <tbody class="c-calendar__body">
      <tr class="c-calendar__row">
        <td class="c-calendar__cell"></td>
        <td class="c-calendar__cell"></td>
        <td class="c-calendar__cell-2">
          <div class="c-calendar__text">l</div>
        </td>
        <td class="c-calendar__cell-2">
          <div class="c-calendar__text">l</div>
        </td>
        <td class="c-calendar__cell-2">
          <div class="c-calendar__text">l</div>
        </td>
        <td class="c-calendar__cell-3">
          <div class="c-calendar__text-2">l</div>
        </td>
        <td class="c-calendar__cell-4">
          <div class="c-calendar__text-3">l</div>
          <span class="c-calendar__text-4">lorem ipsum dolor sit amet c</span>
        </td>
      </tr>
      <tr class="c-calendar__row">
        <td class="c-calendar__cell-5">
          <div class="c-calendar__text-2">l</div>
        </td>
        <td class="c-calendar__cell-2">
          <div class="c-calendar__text">l</div>
        </td>
        <td class="c-calendar__cell-2">
          <div class="c-calendar__text">l</div>
        </td>
        <td class="c-calendar__cell-2">
          <div class="c-calendar__text">l</div>
        </td>
        <td class="c-calendar__cell-2">
          <div class="c-calendar__text">lo</div>
        </td>
        <td class="c-calendar__cell-2">
          <div class="c-calendar__text-5">lo</div>
        </td>
        <td class="c-calendar__cell-6">
          <div class="c-calendar__text-6">lo</div>
        </td>
      </tr>
      <tr class="c-calendar__row">
        <td class="c-calendar__cell-7">
          <div class="c-calendar__text">lo</div>
        </td>
        <td class="c-calendar__cell-2">
          <div class="c-calendar__text">lo</div>
        </td>
        <td class="c-calendar__cell-2">
          <div class="c-calendar__text">lo</div>
        </td>
        <td class="c-calendar__cell-2">
          <div class="c-calendar__text-5">lo</div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

.c-calendar-scope {
  background-color: #FFFFFF;
  color: #222222;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-calendar {
  display: table;
  border-spacing: 0px 2px;
  box-sizing: border-box;
  color: #222222;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
}

.c-calendar__body {
  display: table-row-group;
  box-sizing: border-box;
  vertical-align: middle;
}

.c-calendar__row {
  display: table-row;
  box-sizing: border-box;
  vertical-align: middle;
}

.c-calendar__cell {
  display: table-cell;
  box-sizing: border-box;
  padding: 1px;
  vertical-align: middle;
}

.c-calendar__cell-2 {
  display: table-cell;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  padding: 0px;
  position: relative;
  vertical-align: middle;
  background-color: #FFFFFF;
  cursor: pointer;
  text-align: center;
}

.c-calendar__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  position: relative;
  border: 1px solid #FFFFFF;
  border-radius: 100%;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  margin-right: 1px;
  margin-left: 1px;
}

.c-calendar__cell-3 {
  display: table-cell;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  padding: 0px;
  position: relative;
  vertical-align: middle;
  background-color: #F7F7F7;
  cursor: pointer;
  text-align: center;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}

.c-calendar__text-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  position: relative;
  background-color: #222222;
  color: #FFFFFF;
  border: 1px solid #222222;
  border-radius: 100%;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  margin-right: 1px;
  margin-left: 1px;
}

.c-calendar__cell-4 {
  display: table-cell;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  padding: 0px;
  position: relative;
  vertical-align: middle;
  background-color: #F7F7F7;
  cursor: pointer;
  text-align: center;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.c-calendar__text-3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  position: relative;
  border: 1px solid #F7F7F7;
  border-radius: 100%;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  margin-right: 1px;
  margin-left: 1px;
}

.c-calendar__text-4 {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow-x: clip;
  overflow-y: clip;
  white-space: nowrap;
}

.c-calendar__cell-5 {
  display: table-cell;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  padding: 0px;
  position: relative;
  vertical-align: middle;
  background-color: #F7F7F7;
  border-radius: 4px 50% 50% 4px;
  cursor: pointer;
  text-align: center;
}

.c-calendar__text-5 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  position: relative;
  color: #6C6C6C;
  border: 1px solid #FFFFFF;
  border-radius: 100%;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  margin-right: 1px;
  margin-left: 1px;
}

.c-calendar__cell-6 {
  display: table-cell;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  padding: 0px;
  position: relative;
  vertical-align: middle;
  background-color: #FFFFFF;
  cursor: default;
  text-align: center;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.c-calendar__text-6 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  position: relative;
  color: #8C8C8C;
  border: 1px solid #FFFFFF;
  border-radius: 100%;
  font-size: 14px;
  line-height: 18px;
  text-decoration-line: line-through;
  text-decoration-color: #8C8C8C;
  margin-right: 1px;
  margin-left: 1px;
}

.c-calendar__cell-7 {
  display: table-cell;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  padding: 0px;
  position: relative;
  vertical-align: middle;
  background-color: #FFFFFF;
  cursor: pointer;
  text-align: center;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

States

No hover or focus change was observed.

Calendar (2)

Verification: flagged, the calendar-2-row height did not reproduce the measured 42px after 2 correction attempts.

Anatomy

calendar-2: the component root, a <table> (.c-calendar-2)
calendar-2-body: inner group (.c-calendar-2__body), content not captured
calendar-2-row: inner group (.c-calendar-2__row, 3 instances), content not captured
calendar-2-cell: inner group (.c-calendar-2__cell, 5 instances)
calendar-2-cell-2: inner group (.c-calendar-2__cell-2, 11 instances)
calendar-2-text: label text, 1 characters (.c-calendar-2__text, 15 instances)
calendar-2-cell-3: inner group (.c-calendar-2__cell-3, 2 instances)
calendar-2-cell-4: inner group (.c-calendar-2__cell-4, 2 instances)

Recipe

HTML · CSS

<div class="c-calendar-2-scope">
  <table class="c-calendar-2">
    <tbody class="c-calendar-2__body">
      <tr class="c-calendar-2__row">
        <td class="c-calendar-2__cell"></td>
        <td class="c-calendar-2__cell"></td>
        <td class="c-calendar-2__cell"></td>
        <td class="c-calendar-2__cell"></td>
        <td class="c-calendar-2__cell"></td>
        <td class="c-calendar-2__cell-2">
          <div class="c-calendar-2__text">l</div>
        </td>
        <td class="c-calendar-2__cell-3">
          <div class="c-calendar-2__text">l</div>
        </td>
      </tr>
      <tr class="c-calendar-2__row">
        <td class="c-calendar-2__cell-4">
          <div class="c-calendar-2__text">l</div>
        </td>
        <td class="c-calendar-2__cell-2">
          <div class="c-calendar-2__text">l</div>
        </td>
        <td class="c-calendar-2__cell-2">
          <div class="c-calendar-2__text">l</div>
        </td>
        <td class="c-calendar-2__cell-2">
          <div class="c-calendar-2__text">l</div>
        </td>
        <td class="c-calendar-2__cell-2">
          <div class="c-calendar-2__text">l</div>
        </td>
        <td class="c-calendar-2__cell-2">
          <div class="c-calendar-2__text">l</div>
        </td>
        <td class="c-calendar-2__cell-3">
          <div class="c-calendar-2__text">l</div>
        </td>
      </tr>
      <tr class="c-calendar-2__row">
        <td class="c-calendar-2__cell-4">
          <div class="c-calendar-2__text">lo</div>
        </td>
        <td class="c-calendar-2__cell-2">
          <div class="c-calendar-2__text">lo</div>
        </td>
        <td class="c-calendar-2__cell-2">
          <div class="c-calendar-2__text">lo</div>
        </td>
        <td class="c-calendar-2__cell-2">
          <div class="c-calendar-2__text">lo</div>
        </td>
        <td class="c-calendar-2__cell-2">
          <div class="c-calendar-2__text">lo</div>
        </td>
        <td class="c-calendar-2__cell-2">
          <div class="c-calendar-2__text">lo</div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

.c-calendar-2-scope {
  background-color: #FFFFFF;
  color: #222222;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-calendar-2 {
  display: table;
  border-spacing: 0px 2px;
  box-sizing: border-box;
  color: #222222;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
}

.c-calendar-2__body {
  display: table-row-group;
  box-sizing: border-box;
  vertical-align: middle;
}

.c-calendar-2__row {
  display: table-row;
  box-sizing: border-box;
  vertical-align: middle;
}

.c-calendar-2__cell {
  display: table-cell;
  box-sizing: border-box;
  padding: 1px;
  vertical-align: middle;
}

.c-calendar-2__cell-2 {
  display: table-cell;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  padding: 0px;
  position: relative;
  vertical-align: middle;
  background-color: #FFFFFF;
  cursor: pointer;
  text-align: center;
}

.c-calendar-2__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  position: relative;
  border: 1px solid #FFFFFF;
  border-radius: 100%;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  margin-right: 1px;
  margin-left: 1px;
}

.c-calendar-2__cell-3 {
  display: table-cell;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  padding: 0px;
  position: relative;
  vertical-align: middle;
  background-color: #FFFFFF;
  cursor: pointer;
  text-align: center;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.c-calendar-2__cell-4 {
  display: table-cell;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  padding: 0px;
  position: relative;
  vertical-align: middle;
  background-color: #FFFFFF;
  cursor: pointer;
  text-align: center;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

States

No hover or focus change was observed.

Tabs (2)

Verification: flagged, the tab-2-media y did not reproduce the measured 20px after 2 correction attempts.

Anatomy

tab-2: the component root, a <button> (.c-tab-2)
tab-2-group: inner flex row (.c-tab-2__group)
tab-2-group-2: inner block (.c-tab-2__group-2)
tab-2-media: image placeholder, 20x18px (.c-tab-2__media)
tab-2-group-3: inner flex row (.c-tab-2__group-3)
tab-2-text: label text, 14 characters (.c-tab-2__text)
tab-2-text-2: label text, 3 characters (.c-tab-2__text-2)

Recipe

HTML · CSS

<div class="c-tab-2-scope">
  <button class="c-tab-2" type="button">
    <span class="c-tab-2__group">
      <div class="c-tab-2__group-2">
        <span class="c-tab-2__media" aria-hidden="true"></span>
      </div>
      <span class="c-tab-2__group-3">
        <span class="c-tab-2__text">lorem ipsum do</span>
        <span class="c-tab-2__text-2">lor</span>
      </span>
    </span>
  </button>
</div>

.c-tab-2-scope {
  background-color: #FFFFFF;
  color: #222222;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-tab-2 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 56px;
  min-width: 67px;
  max-width: 100%;
  min-height: 40px;
  padding: 12px 18px 12px 14px;
  position: relative;
  background-color: transparent;
  color: #222222;
  border: 1px solid #F2F2F2;
  border-radius: 16px;
  box-shadow: #00000012 0px 4px 20px 0px;
  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: 18px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  appearance: button;
  transition-duration: 0.2s, 0.1s, 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: box-shadow, transform, border-color, background-color;
}

.c-tab-2__group {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}

.c-tab-2__group-2 {
  display: block;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  position: relative;
  vertical-align: bottom;
}

.c-tab-2__media {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 18px;
  background-color: currentcolor;
}

.c-tab-2__group-3 {
  display: flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
}

.c-tab-2__text {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
}

.c-tab-2__text-2 {
  display: block;
  box-sizing: border-box;
  color: #8C8C8C;
}

.c-tab-2:hover {
  border: 1px solid #C1C1C1;
}

.c-tab-2:focus {
  border: 1px solid #8C8C8C;
  box-shadow: none;
  outline: none;
}

States

hover: border 1px solid #C1C1C1
focus: border 1px solid #8C8C8C, box-shadow none, outline none

Tabs (3)

Verification: flagged, the tab-3-media y did not reproduce the measured 20px after 2 correction attempts.

Anatomy

tab-3: the component root, a <button> (.c-tab-3)
tab-3-group: inner flex row (.c-tab-3__group)
tab-3-group-2: inner block (.c-tab-3__group-2)
tab-3-media: image placeholder, 20x18px (.c-tab-3__media)
tab-3-group-3: inner flex row (.c-tab-3__group-3)
tab-3-text: label text, 13 characters (.c-tab-3__text)
tab-3-text-2: label text, 3 characters (.c-tab-3__text-2)

Recipe

HTML · CSS

<div class="c-tab-3-scope">
  <button class="c-tab-3" type="button">
    <span class="c-tab-3__group">
      <div class="c-tab-3__group-2">
        <span class="c-tab-3__media" aria-hidden="true"></span>
      </div>
      <span class="c-tab-3__group-3">
        <span class="c-tab-3__text">lorem ipsum d</span>
        <span class="c-tab-3__text-2">lor</span>
      </span>
    </span>
  </button>
</div>

.c-tab-3-scope {
  background-color: #FFFFFF;
  color: #222222;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-tab-3 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 56px;
  min-width: 67px;
  max-width: 100%;
  min-height: 40px;
  padding: 12px 18px 12px 14px;
  position: relative;
  background-color: transparent;
  color: #222222;
  border: 1px solid #F2F2F2;
  border-radius: 16px;
  box-shadow: #00000012 0px 4px 20px 0px;
  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: 18px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  appearance: button;
  transition-duration: 0.2s, 0.1s, 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: box-shadow, transform, border-color, background-color;
}

.c-tab-3__group {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}

.c-tab-3__group-2 {
  display: block;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  position: relative;
  vertical-align: bottom;
}

.c-tab-3__media {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 18px;
  background-color: currentcolor;
}

.c-tab-3__group-3 {
  display: flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
}

.c-tab-3__text {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
}

.c-tab-3__text-2 {
  display: block;
  box-sizing: border-box;
  color: #8C8C8C;
}

.c-tab-3:hover {
  border: 1px solid #C1C1C1;
}

.c-tab-3:focus {
  border: 1px solid #8C8C8C;
  box-shadow: none;
  outline: none;
}

States

hover: border 1px solid #C1C1C1
focus: border 1px solid #8C8C8C, box-shadow none, outline none

Tabs (4)

Verification: flagged, the tab-4-media y did not reproduce the measured 20px after 2 correction attempts.

Anatomy

tab-4: the component root, a <button> (.c-tab-4)
tab-4-group: inner flex row (.c-tab-4__group)
tab-4-group-2: inner block (.c-tab-4__group-2)
tab-4-media: image placeholder, 20x18px (.c-tab-4__media)
tab-4-group-3: inner flex row (.c-tab-4__group-3)
tab-4-text: label text, 13 characters (.c-tab-4__text)
tab-4-text-2: label text, 2 characters (.c-tab-4__text-2)

Recipe

HTML · CSS

<div class="c-tab-4-scope">
  <button class="c-tab-4" type="button">
    <span class="c-tab-4__group">
      <div class="c-tab-4__group-2">
        <span class="c-tab-4__media" aria-hidden="true"></span>
      </div>
      <span class="c-tab-4__group-3">
        <span class="c-tab-4__text">lorem ipsum d</span>
        <span class="c-tab-4__text-2">lo</span>
      </span>
    </span>
  </button>
</div>

.c-tab-4-scope {
  background-color: #FFFFFF;
  color: #222222;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-tab-4 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 56px;
  min-width: 67px;
  max-width: 100%;
  min-height: 40px;
  padding: 12px 18px 12px 14px;
  position: relative;
  background-color: transparent;
  color: #222222;
  border: 1px solid #F2F2F2;
  border-radius: 16px;
  box-shadow: #00000012 0px 4px 20px 0px;
  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: 18px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  appearance: button;
  transition-duration: 0.2s, 0.1s, 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: box-shadow, transform, border-color, background-color;
}

.c-tab-4__group {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}

.c-tab-4__group-2 {
  display: block;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  position: relative;
  vertical-align: bottom;
}

.c-tab-4__media {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 18px;
  background-color: currentcolor;
}

.c-tab-4__group-3 {
  display: flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
}

.c-tab-4__text {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
}

.c-tab-4__text-2 {
  display: block;
  box-sizing: border-box;
  color: #8C8C8C;
}

.c-tab-4:hover {
  border: 1px solid #C1C1C1;
}

.c-tab-4:focus {
  border: 1px solid #8C8C8C;
  box-shadow: none;
  outline: none;
}

States

hover: border 1px solid #C1C1C1
focus: border 1px solid #8C8C8C, box-shadow none, outline none

Rating summary

Verification: flagged, the rating-summary-list width did not reproduce the measured 138px after 2 correction attempts.

Anatomy

Group: 6 instances in a 7-column grid; the recipe carries the values they all share
rating-summary: the component root, a <div> (.c-rating-summary)
rating-summary-group: inner block (.c-rating-summary__group)
rating-summary-group-2: inner block (.c-rating-summary__group-2)
rating-summary-title: heading, 0 characters (.c-rating-summary__title)
rating-summary-text: label text, 14 characters (.c-rating-summary__text)
rating-summary-list: inner group (.c-rating-summary__list)
rating-summary-item: inner group (.c-rating-summary__item, 5 instances), content not captured

Recipe

HTML · CSS

<div class="c-rating-summary-scope">
  <div class="c-rating-summary">
    <div class="c-rating-summary__group">
      <div class="c-rating-summary__group-2">
        <h3 class="c-rating-summary__title">
          <div class="c-rating-summary__text">lorem ipsum do</div>
        </h3>
        <ol class="c-rating-summary__list">
          <li class="c-rating-summary__item"></li>
          <li class="c-rating-summary__item"></li>
          <li class="c-rating-summary__item"></li>
          <li class="c-rating-summary__item"></li>
          <li class="c-rating-summary__item"></li>
        </ol>
      </div>
    </div>
  </div>
</div>

.c-rating-summary-scope {
  background-color: #FFFFFF;
  color: #222222;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-rating-summary {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #222222;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-rating-summary__group {
  display: block;
  box-sizing: border-box;
}

.c-rating-summary__group-2 {
  box-sizing: border-box;
}

.c-rating-summary__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-rating-summary__text {
  display: block;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  margin-bottom: 8px;
}

.c-rating-summary__list {
  display: block;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  color: #6C6C6C;
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
  list-style-type: decimal;
}

.c-rating-summary__item {
  display: list-item;
  box-sizing: border-box;
  list-style-type: none;
}

States

No hover or focus change was observed.

Breadcrumbs

Verification: flagged, the breadcrumb-group y did not reproduce the measured 7px after 2 correction attempts.

Anatomy

breadcrumb: the component root, a <nav> (.c-breadcrumb)
breadcrumb-list: inner group (.c-breadcrumb__list)
breadcrumb-item: inner flex row (.c-breadcrumb__item, 3 instances)
breadcrumb-link: link, 6-character label (.c-breadcrumb__link, 2 instances)
breadcrumb-group: inner group (.c-breadcrumb__group, 2 instances)
breadcrumb-group-2: inner group (.c-breadcrumb__group-2, 2 instances), content not captured
breadcrumb-link-active: link (.c-breadcrumb__link-active)
breadcrumb-text: label text, 5 characters (.c-breadcrumb__text)

Recipe

HTML · CSS

<div class="c-breadcrumb-scope">
  <nav class="c-breadcrumb">
    <ol class="c-breadcrumb__list">
      <li class="c-breadcrumb__item">
        <a class="c-breadcrumb__link" href="#">lorem</a>
        <span class="c-breadcrumb__group">
          <span class="c-breadcrumb__group-2"></span>
        </span>
      </li>
      <li class="c-breadcrumb__item">
        <a class="c-breadcrumb__link" href="#">lorem</a>
        <span class="c-breadcrumb__group">
          <span class="c-breadcrumb__group-2"></span>
        </span>
      </li>
      <li class="c-breadcrumb__item">
        <a class="c-breadcrumb__link-active" href="#">
          <span class="c-breadcrumb__text">lorem</span>
        </a>
      </li>
    </ol>
  </nav>
</div>

.c-breadcrumb-scope {
  background-color: #F7F7F7;
  color: #222222;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-breadcrumb {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #222222;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-breadcrumb__list {
  display: block;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: decimal;
}

.c-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}

.c-breadcrumb__link {
  display: block;
  box-sizing: border-box;
  color: #222222;
  cursor: pointer;
  font-size: 14px;
  line-height: 18px;
  text-decoration-line: none;
}

.c-breadcrumb__group {
  display: block;
  box-sizing: border-box;
  margin-right: 8px;
  margin-left: 8px;
}

.c-breadcrumb__group-2 {
  display: inline;
  box-sizing: border-box;
  white-space: pre-wrap;
}

.c-breadcrumb__link-active {
  display: block;
  box-sizing: border-box;
  color: #222222;
  cursor: pointer;
  font-size: 14px;
  line-height: 18px;
  text-decoration-line: none;
}

.c-breadcrumb__text {
  display: inline;
  box-sizing: border-box;
}

States

No hover or focus change was observed.

Header (inner, 2)

Verification: verified against the live page at desktop.

Variant observed on https://www.airbnb.com/rooms/882493816552038952.

Anatomy

header-inner-2: the component root, a <nav> (.c-header-inner-2)
header-inner-2-group: inner flex row (.c-header-inner-2__group)
header-inner-2-button: button, 13-character label (.c-header-inner-2__button)
header-inner-2-group-2: inner block (.c-header-inner-2__group-2)
header-inner-2-menu-toggle: button (.c-header-inner-2__menu-toggle, 2 instances)
header-inner-2-group-3: inner flex row (.c-header-inner-2__group-3, 2 instances)
header-inner-2-logo: icon placeholder, 24px (.c-header-inner-2__logo)
header-inner-2-group-4: inner block (.c-header-inner-2__group-4)
header-inner-2-group-5: inner block (.c-header-inner-2__group-5)
header-inner-2-icon: icon placeholder, 16px (.c-header-inner-2__icon)

Recipe

HTML · CSS

<div class="c-header-inner-2-scope">
  <nav class="c-header-inner-2">
    <div class="c-header-inner-2__group">
      <button class="c-header-inner-2__button" type="button">lorem ipsum d</button>
      <div class="c-header-inner-2__group-2">
        <button class="c-header-inner-2__menu-toggle" type="button">
          <span class="c-header-inner-2__group-3">
            <span class="c-header-inner-2__logo" aria-hidden="true"></span>
          </span>
        </button>
      </div>
    </div>
    <div class="c-header-inner-2__group-4">
      <div class="c-header-inner-2__group-5">
        <button class="c-header-inner-2__menu-toggle" type="button">
          <span class="c-header-inner-2__group-3">
            <span class="c-header-inner-2__icon" aria-hidden="true"></span>
          </span>
        </button>
      </div>
    </div>
  </nav>
</div>

.c-header-inner-2-scope {
  background-color: #FFFFFF;
  color: #222222;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-header-inner-2 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 80px;
  position: relative;
  color: #222222;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-header-inner-2__group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
  gap: 12px;
  box-sizing: border-box;
  margin-right: 12px;
}

.c-header-inner-2__button {
  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-inner-2__group-2 {
  display: block;
  box-sizing: border-box;
  position: relative;
  vertical-align: middle;
  margin-top: auto;
  margin-bottom: auto;
}

.c-header-inner-2__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: 16px;
  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-inner-2__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-inner-2__group-3 {
  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-inner-2__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  background-color: currentcolor;
}

.c-header-inner-2__group-4 {
  display: block;
  box-sizing: border-box;
}

.c-header-inner-2__group-5 {
  display: inline;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  background-color: currentcolor;
}

.c-header-inner-2__button:hover {
  background-color: #F7F7F7;
}

.c-header-inner-2__button:focus {
  box-shadow: #222222 0px 0px 0px 2px;
  outline: none;
}

.c-header-inner-2__menu-toggle:hover::before {
  background-color: #EBEBEB;
}

.c-header-inner-2__menu-toggle:focus {
  outline: none;
}

.c-header-inner-2__menu-toggle:focus::before {
  box-shadow: #FFFFFF 0px 0px 0px 2px, #222222 0px 0px 0px 4px;
}

States

header-inner-2-button hover (header-inner-2-button-hover): background-color #F7F7F7
header-inner-2-button focus: box-shadow #222222 0px 0px 0px 2px, outline none
header-inner-2-menu-toggle hover: ::before background-color #EBEBEB
header-inner-2-menu-toggle focus: outline none, ::before box-shadow #FFFFFF 0px 0px 0px 2px, #222222 0px 0px 0px 4px

Verification: desktop flagged, the footer-inner height did not reproduce the measured 625px after 2 correction attempts; mobile flagged, the footer-inner-mobile-inner height did not reproduce the measured 1310px after 2 correction attempts.

Variant observed on https://www.airbnb.com/rooms/882493816552038952.

Anatomy

footer-inner: the component root, a <footer> (.c-footer-inner)
footer-inner-inner: inner block (.c-footer-inner__inner)
footer-inner-group: inner block (.c-footer-inner__group)
footer-inner-group-2: inner group (.c-footer-inner__group-2)
footer-inner-heading: heading, 11 characters (.c-footer-inner__heading)
footer-inner-columns: inner grid (.c-footer-inner__columns)
footer-inner-column: inner group (.c-footer-inner__column, 3 instances)
footer-inner-column-heading: heading, 7 characters (.c-footer-inner__column-heading, 3 instances)
footer-inner-list: inner grid (.c-footer-inner__list, 3 instances)
footer-inner-item: inner group (.c-footer-inner__item, 26 instances)
footer-inner-link: link, 11-character label (.c-footer-inner__link, 26 instances)
footer-inner-group-3: inner block (.c-footer-inner__group-3)
footer-inner-text: label text, 14 characters (.c-footer-inner__text)
footer-inner-group-4: inner group (.c-footer-inner__group-4)
footer-inner-columns-2: inner flex row (.c-footer-inner__columns-2)
footer-inner-group-5: inner block (.c-footer-inner__group-5)
footer-inner-group-6: inner block (.c-footer-inner__group-6)
footer-inner-text-2: label text, 19 characters (.c-footer-inner__text-2)
footer-inner-group-7: inner block (.c-footer-inner__group-7), content not captured
footer-inner-columns-3: inner flex row (.c-footer-inner__columns-3)
footer-inner-group-8: inner block (.c-footer-inner__group-8)
footer-inner-group-9: inner flex row (.c-footer-inner__group-9), content not captured
footer-inner-group-10: inner flex row (.c-footer-inner__group-10)
footer-inner-list-2: inner flex row (.c-footer-inner__list-2), content not captured

Desktop recipe

HTML · CSS

<div class="c-footer-inner-scope">
  <footer class="c-footer-inner">
    <div class="c-footer-inner__inner">
      <div class="c-footer-inner__group">
        <span class="c-footer-inner__group-2">
          <h2 class="c-footer-inner__heading">lorem ipsum</h2>
        </span>
        <div class="c-footer-inner__columns">
          <section class="c-footer-inner__column">
            <h3 class="c-footer-inner__column-heading">lorem i</h3>
            <ul class="c-footer-inner__list">
              <li class="c-footer-inner__item">
                <a class="c-footer-inner__link" href="#">lorem ipsum</a>
              </li>
              <li class="c-footer-inner__item">
                <a class="c-footer-inner__link" href="#">lorem ipsum dolor sit amet c</a>
              </li>
              <li class="c-footer-inner__item">
                <a class="c-footer-inner__link" href="#">lorem ip</a>
              </li>
              <li class="c-footer-inner__item">
                <a class="c-footer-inner__link" href="#">lorem ipsum dolo</a>
              </li>
              <li class="c-footer-inner__item">
                <a class="c-footer-inner__link" href="#">lorem ipsum dolor s</a>
              </li>
              <li class="c-footer-inner__item">
                <a class="c-footer-inner__link" href="#">lorem ipsum dolor</a>
              </li>
              <li class="c-footer-inner__item">
                <a class="c-footer-inner__link" href="#">lorem ipsum dolor si</a>
              </li>
              <li class="c-footer-inner__item">
                <a class="c-footer-inner__link" href="#">lorem ipsum dolor sit amet</a>
              </li>
            </ul>
          </section>
          <section class="c-footer-inner__column">
            <h3 class="c-footer-inner__column-heading">lorem i</h3>
            <ul class="c-footer-inner__list">
              <li class="c-footer-inner__item">
                <a class="c-footer-inner__link" href="#">lorem ipsum dolo</a>
              </li>
              <li class="c-footer-inner__item">
                <a class="c-footer-inner__link" href="#">lorem ipsum dolor sit</a>
              </li>
              <li class="c-footer-inner__item">
                <a class="c-footer-inner__link" href="#">lorem ipsum dolor s</a>
              </li>
              <li class="c-footer-inner__item">
                <a class="c-footer-inner__link" href="#">lorem ipsum dolor</a>
              </li>
              <li class="c-footer-inner__item">
                <a class="c-footer-inner__link" href="#">lorem ipsum dolor s</a>
              </li>
              <li class="c-footer-inner__item">
                <a class="c-footer-inner__link" href="#">lorem ipsum dolor</a>
              </li>
              <li class="c-footer-inner__item">
                <a class="c-footer-inner__link" href="#">lorem ipsum dol</a>
              </li>
              <li class="c-footer-inner__item">
                <a class="c-footer-inner__link" href="#">lorem ipsum dolor s</a>
              </li>
              <li class="c-footer-inner__item">
                <a class="c-footer-inner__link" href="#">lorem ipsum dolor sit amet</a>
              </li>
              <li class="c-footer-inner__item">
                <a class="c-footer-inner__link" href="#">lorem ipsum dolor sit ame</a>
              </li>
              <li class="c-footer-inner__item">
                <a class="c-footer-inner__link" href="#">lorem ipsum do</a>
              </li>
              <li class="c-footer-inner__item">
                <a class="c-footer-inner__link" href="#">lorem ipsum</a>
              </li>
            </ul>
          </section>
          <section class="c-footer-inner__column">
            <h3 class="c-footer-inner__column-heading">lorem</h3>
            <ul class="c-footer-inner__list">
              <li class="c-footer-inner__item">
                <a class="c-footer-inner__link" href="#">lorem ipsum dolor s</a>
              </li>
              <li class="c-footer-inner__item">
                <a class="c-footer-inner__link" href="#">lorem ip</a>
              </li>
              <li class="c-footer-inner__item">
                <a class="c-footer-inner__link" href="#">lorem i</a>
              </li>
              <li class="c-footer-inner__item">
                <a class="c-footer-inner__link" href="#">lorem ips</a>
              </li>
              <li class="c-footer-inner__item">
                <a class="c-footer-inner__link" href="#">lorem ipsu</a>
              </li>
              <li class="c-footer-inner__item">
                <a class="c-footer-inner__link" href="#">lorem ipsum dolor sit amet</a>
              </li>
            </ul>
          </section>
        </div>
        <div class="c-footer-inner__group-3">
          <span class="c-footer-inner__text">lorem ipsum do</span>
          <section class="c-footer-inner__group-4">
            <div class="c-footer-inner__columns-2">
              <div class="c-footer-inner__group-5">
                <div class="c-footer-inner__group-6">
                  <div class="c-footer-inner__text-2">lorem ipsum dolor s</div>
                  <div class="c-footer-inner__group-7"></div>
                </div>
              </div>
              <div class="c-footer-inner__columns-3">
                <div class="c-footer-inner__group-8">
                  <div class="c-footer-inner__group-9"></div>
                </div>
                <div class="c-footer-inner__group-10">
                  <ul class="c-footer-inner__list-2"></ul>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  </footer>
</div>

.c-footer-inner-scope {
  background-color: #FFFFFF;
  color: #222222;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-footer-inner {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  background-color: #F7F7F7;
  color: #222222;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-footer-inner__inner {
  display: block;
  box-sizing: border-box;
  max-width: 1920px;
  padding-right: 48px;
  padding-left: 48px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-inner__group {
  display: block;
  box-sizing: border-box;
}

.c-footer-inner__group-2 {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow-x: clip;
  overflow-y: clip;
  white-space: nowrap;
}

.c-footer-inner__heading {
  display: block;
  box-sizing: border-box;
  margin: 0px 0px 15px;
  font-size: 24px;
  font-weight: 700;
}

.c-footer-inner__columns {
  display: grid;
  column-gap: 16px;
  grid-template-columns: repeat(12, minmax(0px, 1fr));
  box-sizing: border-box;
  padding-top: 48px;
  padding-bottom: 48px;
}

.c-footer-inner__column {
  display: block;
  box-sizing: border-box;
}

.c-footer-inner__column-heading {
  display: block;
  box-sizing: border-box;
  margin: 0px 0px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
}

.c-footer-inner__list {
  display: grid;
  gap: 16px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-inner__item {
  display: list-item;
  box-sizing: border-box;
}

.c-footer-inner__link {
  display: inline;
  box-sizing: border-box;
  position: relative;
  color: #222222;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 18px;
  text-decoration-line: none;
  transition-duration: 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);
  transition-property: text-decoration-thickness, box-shadow, background-color;
}

.c-footer-inner__group-3 {
  display: block;
  box-sizing: border-box;
  padding-top: 24px;
  padding-bottom: 24px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #EBEBEB;
}

.c-footer-inner__text {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow-x: clip;
  overflow-y: clip;
  white-space: nowrap;
}

.c-footer-inner__group-4 {
  display: block;
  box-sizing: border-box;
}

.c-footer-inner__columns-2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.c-footer-inner__group-5 {
  display: block;
  box-sizing: border-box;
  text-align: left;
}

.c-footer-inner__group-6 {
  display: block;
  box-sizing: border-box;
  padding: 4px;
  margin: -4px;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-footer-inner__text-2 {
  display: inline-block;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 18px;
}

.c-footer-inner__group-7 {
  display: inline-block;
  box-sizing: border-box;
}

.c-footer-inner__columns-3 {
  display: flex;
  box-sizing: border-box;
}

.c-footer-inner__group-8 {
  display: block;
  box-sizing: border-box;
  margin-left: -8px;
}

.c-footer-inner__group-9 {
  display: flex;
  box-sizing: border-box;
}

.c-footer-inner__group-10 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  margin-left: 4px;
}

.c-footer-inner__list-2 {
  display: flex;
  gap: 20px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px 0px 0px 8px;
  line-height: 0px;
  list-style-type: none;
}

.c-footer-inner__link:hover {
  text-decoration-line: underline;
}

.c-footer-inner__link:focus {
  background-color: #3F3F3F;
  color: #FFFFFF;
  box-shadow: #3F3F3F 0px 0px 0px 2px;
  outline: none;
  text-decoration-line: underline;
  text-decoration-color: #FFFFFF;
}

Mobile anatomy

footer-inner-mobile: the component root, a <footer> (.c-footer-inner-mobile)
footer-inner-mobile-inner: inner block (.c-footer-inner-mobile__inner)
footer-inner-mobile-group: inner block (.c-footer-inner-mobile__group, 4 instances), content not captured
footer-inner-mobile-group-2: inner group (.c-footer-inner-mobile__group-2)
footer-inner-mobile-heading: heading, 11 characters (.c-footer-inner-mobile__heading)
footer-inner-mobile-columns: inner grid (.c-footer-inner-mobile__columns)
footer-inner-mobile-column: inner group (.c-footer-inner-mobile__column)
footer-inner-mobile-column-heading: heading, 7 characters (.c-footer-inner-mobile__column-heading)
footer-inner-mobile-list: inner grid (.c-footer-inner-mobile__list, 3 instances)
footer-inner-mobile-item: inner group (.c-footer-inner-mobile__item, 27 instances), content not captured
footer-inner-mobile-link: link, 11-character label (.c-footer-inner-mobile__link, 26 instances)
footer-inner-mobile-column-2: inner group (.c-footer-inner-mobile__column-2, 2 instances)
footer-inner-mobile-heading-2: heading, 7 characters (.c-footer-inner-mobile__heading-2, 2 instances)
footer-inner-mobile-group-3: inner block (.c-footer-inner-mobile__group-3)
footer-inner-mobile-text: label text, 14 characters (.c-footer-inner-mobile__text)
footer-inner-mobile-group-4: inner group (.c-footer-inner-mobile__group-4)
footer-inner-mobile-group-5: inner block (.c-footer-inner-mobile__group-5)
footer-inner-mobile-columns-2: inner flex row (.c-footer-inner-mobile__columns-2)
footer-inner-mobile-group-6: inner group (.c-footer-inner-mobile__group-6), content not captured
footer-inner-mobile-group-7: inner group (.c-footer-inner-mobile__group-7), content not captured
footer-inner-mobile-group-8: inner block (.c-footer-inner-mobile__group-8)
footer-inner-mobile-list-2: inner flex row (.c-footer-inner-mobile__list-2)
footer-inner-mobile-item-2: inner group (.c-footer-inner-mobile__item-2, 2 instances), content not captured
footer-inner-mobile-text-2: label text, 19 characters (.c-footer-inner-mobile__text-2)

Mobile recipe

HTML · CSS

<div class="c-footer-inner-mobile-scope">
  <footer class="c-footer-inner-mobile">
    <div class="c-footer-inner-mobile__inner">
      <div class="c-footer-inner-mobile__group">
        <span class="c-footer-inner-mobile__group-2">
          <h2 class="c-footer-inner-mobile__heading">lorem ipsum</h2>
        </span>
        <div class="c-footer-inner-mobile__columns">
          <section class="c-footer-inner-mobile__column">
            <h3 class="c-footer-inner-mobile__column-heading">lorem i</h3>
            <ul class="c-footer-inner-mobile__list">
              <li class="c-footer-inner-mobile__item">
                <a class="c-footer-inner-mobile__link" href="#">lorem ipsum</a>
              </li>
              <li class="c-footer-inner-mobile__item">
                <a class="c-footer-inner-mobile__link" href="#">lorem ipsum dolor sit amet c</a>
              </li>
              <li class="c-footer-inner-mobile__item">
                <a class="c-footer-inner-mobile__link" href="#">lorem ip</a>
              </li>
              <li class="c-footer-inner-mobile__item">
                <a class="c-footer-inner-mobile__link" href="#">lorem ipsum dolo</a>
              </li>
              <li class="c-footer-inner-mobile__item">
                <a class="c-footer-inner-mobile__link" href="#">lorem ipsum dolor s</a>
              </li>
              <li class="c-footer-inner-mobile__item">
                <a class="c-footer-inner-mobile__link" href="#">lorem ipsum dolor</a>
              </li>
              <li class="c-footer-inner-mobile__item">
                <a class="c-footer-inner-mobile__link" href="#">lorem ipsum dolor si</a>
              </li>
              <li class="c-footer-inner-mobile__item">
                <a class="c-footer-inner-mobile__link" href="#">lorem ipsum dolor sit amet</a>
              </li>
            </ul>
          </section>
          <section class="c-footer-inner-mobile__column-2">
            <h3 class="c-footer-inner-mobile__heading-2">lorem i</h3>
            <ul class="c-footer-inner-mobile__list">
              <li class="c-footer-inner-mobile__item">
                <a class="c-footer-inner-mobile__link" href="#">lorem ipsum dolo</a>
              </li>
              <li class="c-footer-inner-mobile__item">
                <a class="c-footer-inner-mobile__link" href="#">lorem ipsum dolor sit</a>
              </li>
              <li class="c-footer-inner-mobile__item">
                <a class="c-footer-inner-mobile__link" href="#">lorem ipsum dolor s</a>
              </li>
              <li class="c-footer-inner-mobile__item">
                <a class="c-footer-inner-mobile__link" href="#">lorem ipsum dolor</a>
              </li>
              <li class="c-footer-inner-mobile__item">
                <a class="c-footer-inner-mobile__link" href="#">lorem ipsum dolor s</a>
              </li>
              <li class="c-footer-inner-mobile__item">
                <a class="c-footer-inner-mobile__link" href="#">lorem ipsum dolor</a>
              </li>
              <li class="c-footer-inner-mobile__item">
                <a class="c-footer-inner-mobile__link" href="#">lorem ipsum dol</a>
              </li>
              <li class="c-footer-inner-mobile__item">
                <a class="c-footer-inner-mobile__link" href="#">lorem ipsum dolor s</a>
              </li>
              <li class="c-footer-inner-mobile__item">
                <a class="c-footer-inner-mobile__link" href="#">lorem ipsum dolor sit amet</a>
              </li>
              <li class="c-footer-inner-mobile__item">
                <a class="c-footer-inner-mobile__link" href="#">lorem ipsum dolor sit ame</a>
              </li>
              <li class="c-footer-inner-mobile__item">
                <a class="c-footer-inner-mobile__link" href="#">lorem ipsum do</a>
              </li>
              <li class="c-footer-inner-mobile__item">
                <a class="c-footer-inner-mobile__link" href="#">lorem ipsum</a>
              </li>
            </ul>
          </section>
          <section class="c-footer-inner-mobile__column-2">
            <h3 class="c-footer-inner-mobile__heading-2">lorem</h3>
            <ul class="c-footer-inner-mobile__list">
              <li class="c-footer-inner-mobile__item">
                <a class="c-footer-inner-mobile__link" href="#">lorem ipsum dolor s</a>
              </li>
              <li class="c-footer-inner-mobile__item">
                <a class="c-footer-inner-mobile__link" href="#">lorem ip</a>
              </li>
              <li class="c-footer-inner-mobile__item">
                <a class="c-footer-inner-mobile__link" href="#">lorem i</a>
              </li>
              <li class="c-footer-inner-mobile__item">
                <a class="c-footer-inner-mobile__link" href="#">lorem ips</a>
              </li>
              <li class="c-footer-inner-mobile__item">
                <a class="c-footer-inner-mobile__link" href="#">lorem ipsu</a>
              </li>
              <li class="c-footer-inner-mobile__item">
                <a class="c-footer-inner-mobile__link" href="#">lorem ipsum dolor sit amet</a>
              </li>
            </ul>
          </section>
        </div>
        <div class="c-footer-inner-mobile__group-3">
          <span class="c-footer-inner-mobile__text">lorem ipsum do</span>
          <section class="c-footer-inner-mobile__group-4">
            <div class="c-footer-inner-mobile__group">
              <div class="c-footer-inner-mobile__group-5">
                <div class="c-footer-inner-mobile__columns-2">
                  <span class="c-footer-inner-mobile__group-6"></span>
                  <span class="c-footer-inner-mobile__group-7"></span>
                </div>
              </div>
              <div class="c-footer-inner-mobile__group-8">
                <ul class="c-footer-inner-mobile__list-2">
                  <li class="c-footer-inner-mobile__item-2"></li>
                  <li class="c-footer-inner-mobile__item-2"></li>
                  <li class="c-footer-inner-mobile__item"></li>
                </ul>
              </div>
              <div class="c-footer-inner-mobile__group">
                <div class="c-footer-inner-mobile__text-2">lorem ipsum dolor s</div>
                <div class="c-footer-inner-mobile__group"></div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  </footer>
</div>

.c-footer-inner-mobile-scope {
  background-color: #FFFFFF;
  color: #222222;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-footer-inner-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  background-color: #F7F7F7;
  color: #222222;
  font-family: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-footer-inner-mobile__inner {
  display: block;
  box-sizing: border-box;
  max-width: 1920px;
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-inner-mobile__group {
  display: block;
  box-sizing: border-box;
}

.c-footer-inner-mobile__group-2 {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow-x: clip;
  overflow-y: clip;
  white-space: nowrap;
}

.c-footer-inner-mobile__heading {
  display: block;
  box-sizing: border-box;
  margin: 0px 0px 15px;
  font-size: 24px;
  font-weight: 700;
}

.c-footer-inner-mobile__columns {
  display: grid;
  column-gap: 16px;
  grid-template-columns: repeat(4, minmax(0px, 1fr));
  box-sizing: border-box;
}

.c-footer-inner-mobile__column {
  display: block;
  box-sizing: border-box;
  padding-top: 24px;
  padding-bottom: 24px;
}

.c-footer-inner-mobile__column-heading {
  display: block;
  box-sizing: border-box;
  margin: 0px 0px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
}

.c-footer-inner-mobile__list {
  display: grid;
  gap: 16px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-inner-mobile__item {
  display: list-item;
  box-sizing: border-box;
}

.c-footer-inner-mobile__link {
  display: inline;
  box-sizing: border-box;
  position: relative;
  color: #222222;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 18px;
  text-decoration-line: none;
  transition-duration: 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);
  transition-property: text-decoration-thickness, box-shadow, background-color;
}

.c-footer-inner-mobile__column-2 {
  display: block;
  box-sizing: border-box;
  padding-top: 24px;
  padding-bottom: 24px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #DDDDDD;
}

.c-footer-inner-mobile__heading-2 {
  display: block;
  box-sizing: border-box;
  margin: 0px 0px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
}

.c-footer-inner-mobile__group-3 {
  display: block;
  box-sizing: border-box;
  padding-top: 24px;
  padding-bottom: 24px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #EBEBEB;
}

.c-footer-inner-mobile__text {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow-x: clip;
  overflow-y: clip;
  white-space: nowrap;
}

.c-footer-inner-mobile__group-4 {
  display: block;
  box-sizing: border-box;
}

.c-footer-inner-mobile__group-5 {
  display: block;
  box-sizing: border-box;
  margin-bottom: 8px;
  margin-left: -8px;
}

.c-footer-inner-mobile__columns-2 {
  display: flex;
  box-sizing: border-box;
}

.c-footer-inner-mobile__group-6 {
  display: block;
  box-sizing: border-box;
  margin-right: 4px;
}

.c-footer-inner-mobile__group-7 {
  display: block;
  box-sizing: border-box;
}

.c-footer-inner-mobile__group-8 {
  display: block;
  box-sizing: border-box;
  padding-top: 8px;
  padding-bottom: 8px;
  margin-bottom: 12px;
  margin-left: -8px;
}

.c-footer-inner-mobile__list-2 {
  display: flex;
  gap: 20px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px 0px 0px 8px;
  line-height: 0px;
  list-style-type: none;
}

.c-footer-inner-mobile__item-2 {
  display: list-item;
  box-sizing: border-box;
  margin-right: 4px;
}

.c-footer-inner-mobile__text-2 {
  display: inline-block;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 18px;
  margin-bottom: 4px;
}

.c-footer-inner-mobile__link:hover {
  text-decoration-line: underline;
}

.c-footer-inner-mobile__link:focus {
  background-color: #3F3F3F;
  color: #FFFFFF;
  box-shadow: #3F3F3F 0px 0px 0px 2px;
  outline: none;
  text-decoration-line: underline;
  text-decoration-color: #FFFFFF;
}

States

footer-inner-link hover: text-decoration-line underline
footer-inner-link focus (footer-inner-link-focus): background-color #3F3F3F, color #FFFFFF, box-shadow #3F3F3F 0px 0px 0px 2px, outline none, text-decoration-line underline, text-decoration-color #FFFFFF
mobile, footer-inner-mobile-link hover: text-decoration-line underline
mobile, footer-inner-mobile-link focus (footer-inner-mobile-link-focus): background-color #3F3F3F, color #FFFFFF, box-shadow #3F3F3F 0px 0px 0px 2px, outline none, text-decoration-line underline, text-decoration-color #FFFFFF

Card (9)

Verification: flagged, the original element could not be found again.

Anatomy

Group: 6 instances in a 17-column grid, 12px gap; the recipe carries the values they all share
card-9: the component root, a <div> (.c-card-9)
card-9-group: inner block (.c-card-9__group)
card-9-link: link (.c-card-9__link)
card-9-group-2: inner flex column (.c-card-9__group-2)
card-9-group-3: inner block (.c-card-9__group-3)
card-9-group-4: inner block (.c-card-9__group-4), content not captured
card-9-group-5: inner grid (.c-card-9__group-5), content not captured
card-9-group-6: inner grid (.c-card-9__group-6)
card-9-group-7: inner group (.c-card-9__group-7), content not captured
card-9-text: label text, 15 characters (.c-card-9__text)
card-9-text-2: label text, 14 characters (.c-card-9__text-2), content not captured
card-9-group-8: inner flex row (.c-card-9__group-8), content not captured

Recipe

HTML · CSS

<div class="c-card-9-scope">
  <div class="c-card-9">
    <div class="c-card-9__group">
      <a class="c-card-9__link" href="#"></a>
      <div class="c-card-9__group-2">
        <div class="c-card-9__group-3">
          <div class="c-card-9__group-4"></div>
          <div class="c-card-9__group-5"></div>
        </div>
        <div class="c-card-9__group-6">
          <span class="c-card-9__group-7"></span>
          <div class="c-card-9__text">lorem ipsum dol</div>
          <div class="c-card-9__text-2">lorem ipsum do</div>
          <div class="c-card-9__group-8"></div>
        </div>
      </div>
    </div>
  </div>
</div>

.c-card-9-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-9 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  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-9__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  border-radius: 20px;
}

.c-card-9__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-9__group-2 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 100%;
  gap: 8px;
  box-sizing: border-box;
}

.c-card-9__group-3 {
  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-9__group-4 {
  display: block;
  box-sizing: border-box;
}

.c-card-9__group-5 {
  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-9__group-6 {
  display: grid;
  gap: 2px;
  grid-template-columns: minmax(0px, 1fr);
  box-sizing: border-box;
  margin-right: 4px;
  margin-left: 4px;
}

.c-card-9__group-7 {
  display: block;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 16px;
}

.c-card-9__text {
  display: block;
  box-sizing: border-box;
  color: #6C6C6C;
  font-size: 12px;
  line-height: 16px;
}

.c-card-9__text-2 {
  box-sizing: border-box;
  color: #6C6C6C;
  font-size: 12px;
  line-height: 16px;
}

.c-card-9__group-8 {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  color: #6C6C6C;
  font-size: 12px;
  line-height: 16px;
}

States

No hover or focus change was observed.

Card (10)

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-10: the component root, a <div> (.c-card-10)
card-10-group: inner block (.c-card-10__group)
card-10-link: link (.c-card-10__link)
card-10-group-2: inner flex column (.c-card-10__group-2)
card-10-group-3: inner block (.c-card-10__group-3)
card-10-group-4: inner block (.c-card-10__group-4), content not captured
card-10-group-5: inner grid (.c-card-10__group-5), content not captured
card-10-group-6: inner grid (.c-card-10__group-6)
card-10-group-7: inner group (.c-card-10__group-7), content not captured
card-10-text: label text, 13 characters (.c-card-10__text)
card-10-group-8: inner flex row (.c-card-10__group-8), content not captured

Recipe

HTML · CSS

<div class="c-card-10-scope">
  <div class="c-card-10">
    <div class="c-card-10__group">
      <a class="c-card-10__link" href="#"></a>
      <div class="c-card-10__group-2">
        <div class="c-card-10__group-3">
          <div class="c-card-10__group-4"></div>
          <div class="c-card-10__group-5"></div>
        </div>
        <div class="c-card-10__group-6">
          <span class="c-card-10__group-7"></span>
          <div class="c-card-10__text">lorem ipsum d</div>
          <div class="c-card-10__group-8"></div>
        </div>
      </div>
    </div>
  </div>
</div>

.c-card-10-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-10 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  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-10__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  border-radius: 20px;
}

.c-card-10__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-10__group-2 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 100%;
  gap: 8px;
  box-sizing: border-box;
}

.c-card-10__group-3 {
  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-10__group-4 {
  display: block;
  box-sizing: border-box;
}

.c-card-10__group-5 {
  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-10__group-6 {
  display: grid;
  gap: 2px;
  grid-template-columns: minmax(0px, 1fr);
  box-sizing: border-box;
  margin-right: 4px;
  margin-left: 4px;
}

.c-card-10__group-7 {
  display: block;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 16px;
}

.c-card-10__text {
  display: block;
  box-sizing: border-box;
  color: #6C6C6C;
  font-size: 12px;
  line-height: 16px;
}

.c-card-10__group-8 {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  color: #6C6C6C;
  font-size: 12px;
  line-height: 16px;
}

States

No hover or focus change was observed.

Section carousel

Verification: flagged, the render came out 4 px narrower than the original (instance 1) after 2 correction attempts.

Anatomy

Group: 5 instances in a 1-column grid; the recipe carries the values they all share
section-carousel: the component root, a <div> (.c-section-carousel)

Recipe

HTML · CSS

<div class="c-section-carousel-scope">
  <div class="c-section-carousel"></div>
</div>

.c-section-carousel-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-section-carousel {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  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-section-carousel::before {
  content: "";
  display: flex;
  box-sizing: border-box;
}

.c-section-carousel::after {
  content: "";
  display: flex;
  box-sizing: border-box;
}

States

No hover or focus change was observed.

Icon button

Verification: verified against the live page at desktop.

Anatomy

icon-button: the component root, a <button> (.c-icon-button)
icon-button-group: inner flex row (.c-icon-button__group)
icon-button-icon: icon placeholder, 24px (.c-icon-button__icon)

Recipe

HTML · CSS

<div class="c-icon-button-scope">
  <button class="c-icon-button" type="button">
    <span class="c-icon-button__group">
      <span class="c-icon-button__icon" aria-hidden="true"></span>
    </span>
  </button>
</div>

.c-icon-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-icon-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-icon-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-icon-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-icon-button__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  background-color: currentcolor;
}

.c-icon-button:hover::before {
  background-color: #EBEBEB;
}

.c-icon-button:focus {
  outline: none;
}

.c-icon-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

Icon button (2)

Verification: verified against the live page at desktop.

Anatomy

icon-button-2: the component root, a <button> (.c-icon-button-2)
icon-button-2-group: inner flex row (.c-icon-button-2__group)
icon-button-2-icon: icon placeholder, 16px (.c-icon-button-2__icon)

Recipe

HTML · CSS

<div class="c-icon-button-2-scope">
  <button class="c-icon-button-2" type="button">
    <span class="c-icon-button-2__group">
      <span class="c-icon-button-2__icon" aria-hidden="true"></span>
    </span>
  </button>
</div>

.c-icon-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-icon-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-icon-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-icon-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-icon-button-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  background-color: currentcolor;
}

.c-icon-button-2:hover::before {
  background-color: #EBEBEB;
}

.c-icon-button-2:focus {
  outline: none;
}

.c-icon-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

Nav

Verification: flagged, the nav-group y did not reproduce the measured 20px after 2 correction attempts.

Anatomy

nav: the component root, a <nav> (.c-nav)
nav-group: inner flex row (.c-nav__group)
nav-button: button (.c-nav__button)
nav-text: label text, 13 characters (.c-nav__text)
nav-group-2: inner block (.c-nav__group-2)
nav-button-2: button (.c-nav__button-2, 2 instances)
nav-group-3: inner flex row (.c-nav__group-3, 2 instances), content not captured
nav-group-4: inner block (.c-nav__group-4)
nav-group-5: inner block (.c-nav__group-5)

Recipe

HTML · CSS

<div class="c-nav-scope">
  <nav class="c-nav">
    <div class="c-nav__group">
      <button class="c-nav__button" type="button">
        <span class="c-nav__text">lorem ipsum d</span>
      </button>
      <div class="c-nav__group-2">
        <button class="c-nav__button-2" type="button">
          <span class="c-nav__group-3"></span>
        </button>
      </div>
    </div>
    <div class="c-nav__group-4">
      <div class="c-nav__group-5">
        <button class="c-nav__button-2" type="button">
          <span class="c-nav__group-3"></span>
        </button>
      </div>
    </div>
  </nav>
</div>

.c-nav-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-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 80px;
  position: relative;
  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__group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
  gap: 12px;
  box-sizing: border-box;
  margin-right: 12px;
}

.c-nav__button {
  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-nav__text {
  display: inline-block;
  box-sizing: border-box;
  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1);
}

.c-nav__group-2 {
  display: block;
  box-sizing: border-box;
  position: relative;
  vertical-align: middle;
  margin-top: auto;
  margin-bottom: auto;
}

.c-nav__button-2 {
  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-nav__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-nav__group-3 {
  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-nav__group-4 {
  display: block;
  box-sizing: border-box;
}

.c-nav__group-5 {
  display: inline;
  box-sizing: border-box;
  position: relative;
}

States

No hover or focus change was observed.

Header (inner, 3)

Verification: flagged, the header-inner-3-group y did not reproduce the measured 0px after 2 correction attempts.

Variant observed on https://www.airbnb.com/experiences.

Anatomy

header-inner-3: the component root, a <header> (.c-header-inner-3)
header-inner-3-logo: link (.c-header-inner-3__logo)
header-inner-3-logo-icon: icon placeholder, 102x32px (.c-header-inner-3__logo-icon)
header-inner-3-group: inner group (.c-header-inner-3__group)
header-inner-3-group-2: inner flex column (.c-header-inner-3__group-2)
header-inner-3-group-3: inner block (.c-header-inner-3__group-3, 6 instances), content not captured
header-inner-3-group-4: inner block (.c-header-inner-3__group-4)
header-inner-3-group-5: inner grid (.c-header-inner-3__group-5)
header-inner-3-link: link (.c-header-inner-3__link)
header-inner-3-group-6: inner group (.c-header-inner-3__group-6, 4 instances)
header-inner-3-group-7: inner group (.c-header-inner-3__group-7, 4 instances), content not captured
header-inner-3-text: label text, 3 characters (.c-header-inner-3__text)
header-inner-3-text-2: label text, 3 characters (.c-header-inner-3__text-2, 4 instances)
header-inner-3-link-2: link (.c-header-inner-3__link-2)
header-inner-3-text-3: label text, 5 characters (.c-header-inner-3__text-3)
header-inner-3-link-3: link (.c-header-inner-3__link-3)
header-inner-3-text-4: label text, 11 characters (.c-header-inner-3__text-4)
header-inner-3-link-4: link (.c-header-inner-3__link-4)
header-inner-3-text-5: label text, 8 characters (.c-header-inner-3__text-5)
header-inner-3-inner: inner flex row (.c-header-inner-3__inner)
header-inner-3-group-8: inner block (.c-header-inner-3__group-8)
header-inner-3-group-9: inner block (.c-header-inner-3__group-9)
header-inner-3-group-10: inner grid (.c-header-inner-3__group-10)
header-inner-3-group-11: inner flex row (.c-header-inner-3__group-11, 3 instances)
header-inner-3-group-12: inner block (.c-header-inner-3__group-12)
header-inner-3-text-6: label text, 5 characters (.c-header-inner-3__text-6, 3 instances)
header-inner-3-group-13: inner block (.c-header-inner-3__group-13, 2 instances)
header-inner-3-group-14: inner block (.c-header-inner-3__group-14)
header-inner-3-group-15: inner block (.c-header-inner-3__group-15)
header-inner-3-group-16: inner block (.c-header-inner-3__group-16)
header-inner-3-group-17: inner flex row (.c-header-inner-3__group-17)
header-inner-3-group-18: inner block (.c-header-inner-3__group-18)
header-inner-3-nav: inner flex row (.c-header-inner-3__nav)
header-inner-3-group-19: inner flex row (.c-header-inner-3__group-19)
header-inner-3-cta: the button-secondary button, 13-character label (.c-header-inner-3__cta)
header-inner-3-group-20: inner block (.c-header-inner-3__group-20)
header-inner-3-menu-toggle: button (.c-header-inner-3__menu-toggle, 2 instances)
header-inner-3-group-21: inner flex row (.c-header-inner-3__group-21, 2 instances)
header-inner-3-icon: icon placeholder, 24px (.c-header-inner-3__icon)
header-inner-3-group-22: inner block (.c-header-inner-3__group-22)
header-inner-3-icon-2: icon placeholder, 16px (.c-header-inner-3__icon-2)

Recipe

HTML · CSS

<div class="c-header-inner-3-scope">
  <header class="c-header-inner-3">
    <a class="c-header-inner-3__logo" href="#">
      <span class="c-header-inner-3__logo-icon" aria-hidden="true"></span>
    </a>
    <div class="c-header-inner-3__group">
      <div class="c-header-inner-3__group-2">
        <div class="c-header-inner-3__group-3">
          <div class="c-header-inner-3__group-4">
            <div class="c-header-inner-3__group-5">
              <a class="c-header-inner-3__link" href="#">
                <span class="c-header-inner-3__group-6">
                  <span class="c-header-inner-3__group-7"></span>
                </span>
                <span class="c-header-inner-3__text">lor</span>
                <span class="c-header-inner-3__text-2">lor</span>
              </a>
              <a class="c-header-inner-3__link-2" href="#">
                <span class="c-header-inner-3__group-6">
                  <span class="c-header-inner-3__group-7"></span>
                </span>
                <span class="c-header-inner-3__text-3">lorem</span>
                <span class="c-header-inner-3__text-2">lorem</span>
              </a>
              <a class="c-header-inner-3__link-3" href="#">
                <span class="c-header-inner-3__group-6">
                  <span class="c-header-inner-3__group-7"></span>
                </span>
                <span class="c-header-inner-3__text-4">lorem ipsum</span>
                <span class="c-header-inner-3__text-2">lorem ipsum</span>
              </a>
              <a class="c-header-inner-3__link-4" href="#">
                <span class="c-header-inner-3__group-6">
                  <span class="c-header-inner-3__group-7"></span>
                </span>
                <span class="c-header-inner-3__text-5">lorem ip</span>
                <span class="c-header-inner-3__text-2">lorem ip</span>
              </a>
            </div>
          </div>
          <div class="c-header-inner-3__inner">
            <div class="c-header-inner-3__group-8">
              <div class="c-header-inner-3__group-9"></div>
            </div>
            <div class="c-header-inner-3__group-10">
              <div class="c-header-inner-3__group-11">
                <div class="c-header-inner-3__group-12">
                  <div class="c-header-inner-3__text-6">lorem</div>
                  <div class="c-header-inner-3__group-3"></div>
                </div>
              </div>
              <div class="c-header-inner-3__group-13"></div>
              <div class="c-header-inner-3__group-11">
                <div class="c-header-inner-3__group-14">
                  <div class="c-header-inner-3__text-6">lore</div>
                  <div class="c-header-inner-3__group-3"></div>
                </div>
              </div>
              <div class="c-header-inner-3__group-13"></div>
              <div class="c-header-inner-3__group-11">
                <div class="c-header-inner-3__group-15">
                  <div class="c-header-inner-3__text-6">lor</div>
                  <div class="c-header-inner-3__group-3"></div>
                </div>
              </div>
            </div>
            <div class="c-header-inner-3__group-16">
              <div class="c-header-inner-3__group-17">
                <div class="c-header-inner-3__group-3"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="c-header-inner-3__group-18"></div>
    </div>
    <nav class="c-header-inner-3__nav">
      <div class="c-header-inner-3__group-19">
        <button class="c-header-inner-3__cta" type="button">lorem ipsum d</button>
        <div class="c-header-inner-3__group-20">
          <button class="c-header-inner-3__menu-toggle" type="button">
            <span class="c-header-inner-3__group-21">
              <span class="c-header-inner-3__icon" aria-hidden="true"></span>
            </span>
          </button>
        </div>
      </div>
      <div class="c-header-inner-3__group-3">
        <div class="c-header-inner-3__group-22">
          <button class="c-header-inner-3__menu-toggle" type="button">
            <span class="c-header-inner-3__group-21">
              <span class="c-header-inner-3__icon-2" aria-hidden="true"></span>
            </span>
          </button>
        </div>
      </div>
    </nav>
  </header>
</div>

.c-header-inner-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-header-inner-3 {
  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-inner-3__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-inner-3__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-inner-3__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-inner-3__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-inner-3__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-inner-3__group-3 {
  display: block;
  box-sizing: border-box;
}

.c-header-inner-3__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-inner-3__group-5 {
  display: grid;
  justify-content: center;
  gap: 35px;
  grid-auto-flow: column;
  box-sizing: border-box;
  position: relative;
  margin-top: 8px;
}

.c-header-inner-3__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-inner-3__group-6 {
  display: block;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner-3__group-7 {
  display: block;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
}

.c-header-inner-3__text {
  display: block;
  box-sizing: border-box;
  color: #6C6C6C;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  margin-left: 8px;
}

.c-header-inner-3__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-inner-3__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-inner-3__text-3 {
  display: block;
  box-sizing: border-box;
  color: #6C6C6C;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  margin-left: 16px;
}

.c-header-inner-3__link-3 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  color: #222222;
  cursor: pointer;
  text-decoration-line: none;
  margin-bottom: 12px;
}

.c-header-inner-3__text-4 {
  display: block;
  box-sizing: border-box;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  margin-left: 8px;
}

.c-header-inner-3__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-inner-3__text-5 {
  display: block;
  box-sizing: border-box;
  color: #6C6C6C;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  margin-left: 12px;
}

.c-header-inner-3__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-inner-3__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-inner-3__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-inner-3__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-inner-3__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-inner-3__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-inner-3__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-inner-3__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-inner-3__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-inner-3__group-13 {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 32px;
  background-color: #DDDDDD;
}

.c-header-inner-3__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-inner-3__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-inner-3__group-16 {
  display: block;
  box-sizing: border-box;
  padding: 10px;
  position: absolute;
  right: 0px;
  z-index: 2;
}

.c-header-inner-3__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-inner-3__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-inner-3__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-inner-3__nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  height: 80px;
  position: relative;
}

.c-header-inner-3__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-inner-3__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-inner-3__group-20 {
  display: block;
  box-sizing: border-box;
  position: relative;
  vertical-align: middle;
  margin-top: auto;
  margin-bottom: auto;
}

.c-header-inner-3__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-inner-3__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-inner-3__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-inner-3__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  background-color: currentcolor;
}

.c-header-inner-3__group-22 {
  display: inline;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner-3__icon-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  background-color: currentcolor;
}

.c-header-inner-3__logo:focus {
  outline: none;
}

.c-header-inner-3__logo:focus::before {
  box-shadow: #222222 0px 0px 0px 2px;
}

.c-header-inner-3__link:focus {
  border-radius: 8px;
  outline: 2px solid #222222;
  outline-offset: 4px;
}

.c-header-inner-3__link-2:focus {
  border-radius: 8px;
  outline: 2px solid #222222;
  outline-offset: 4px;
}

.c-header-inner-3__link-3:focus {
  border-radius: 8px;
  outline: 2px solid #222222;
  outline-offset: 4px;
}

.c-header-inner-3__link-4:focus {
  border-radius: 8px;
  outline: 2px solid #222222;
  outline-offset: 4px;
}

.c-header-inner-3__cta:hover {
  background-color: #F7F7F7;
}

.c-header-inner-3__cta:focus {
  box-shadow: #222222 0px 0px 0px 2px;
  outline: none;
}

.c-header-inner-3__menu-toggle:hover::before {
  background-color: #EBEBEB;
}

.c-header-inner-3__menu-toggle:focus {
  outline: none;
}

.c-header-inner-3__menu-toggle:focus::before {
  box-shadow: #FFFFFF 0px 0px 0px 2px, #222222 0px 0px 0px 4px;
}

States

header-inner-3-logo focus: outline none, ::before box-shadow #222222 0px 0px 0px 2px
header-inner-3-link focus (header-inner-3-link-focus): border-radius 8px, outline 2px solid #222222, outline-offset 4px
header-inner-3-link-2 focus (header-inner-3-link-2-focus): border-radius 8px, outline 2px solid #222222, outline-offset 4px
header-inner-3-link-3 focus (header-inner-3-link-3-focus): border-radius 8px, outline 2px solid #222222, outline-offset 4px
header-inner-3-link-4 focus (header-inner-3-link-4-focus): border-radius 8px, outline 2px solid #222222, outline-offset 4px
header-inner-3-cta hover (header-inner-3-cta-hover): background-color #F7F7F7
header-inner-3-cta focus: box-shadow #222222 0px 0px 0px 2px, outline none
header-inner-3-menu-toggle hover: ::before background-color #EBEBEB
header-inner-3-menu-toggle focus: outline none, ::before box-shadow #FFFFFF 0px 0px 0px 2px, #222222 0px 0px 0px 4px

Do's and Don'ts

Do

Use one typeface. Set all text in Airbnb Cereal VF and build hierarchy with the existing weights (400 / 500 / 600 / 700) via tokens like title-md, button and caption-strong.
Keep coral rare. Reserve primary-active (#DA1249) for the single primary action. It is the solid fill of button-primary-group and the search button, always with on-primary text.
Size controls to the observed heights. button-primary and button-primary-2 are 48px, as is button-secondary-4. The nav CTA button-secondary is 40px. Circular icon buttons (icon-button, button-ghost-5) are 40px.
Match radius to button variant. The search CTA (button-primary) uses 50px. The nav CTA pill (button-secondary) uses 20px. The large grey button (button-secondary-4) uses 12px. Text-level ghost buttons use 8px (button-ghost-7) or 4px (button-ghost-9).
Round content cards at 20px. Put image cards on rounded.4xl (20px) with a hairline (#DDDDDD) placeholder fill behind the photo, as card-2-group-2 does. Run them in carousels on a 12px gap (header-inner-2-gap).
Pair ink with grey in captions. Card captions follow ink for the title and body-muted (#6C6C6C) for meta, at 13px/500 and 12px/400.
Use the observed shadow tiers for floating surfaces. Apply color(srgb 0 0 0 / 0.02) 0px 0px 0px 1px, color(srgb 0 0 0 / 0.1) 0px 8px 24px 0px on the search pill and #00000014 0px 1px 2px 0px, #0000000D 0px 4px 12px 0px on the condensed search bar.
Always show the double focus ring. Use #FFFFFF 0px 0px 0px 2px, #222222 0px 0px 0px 4px so focus stays visible over photos.

Don't

Don't call the system flat. Floating search and tab surfaces carry measured shadows.
Don't shadow or outline listing cards. The photo edge is the card.
Don't introduce a second typeface. Don't push headings beyond display-lg (26px) either.
Don't use primary (#FF385C) for large fills, body text or section backgrounds. It belongs to the logo.
Don't outline secondary controls. Use surface-soft (#F2F2F2) fills with an #EBEBEB hover instead.
Don't apply negative tracking outside title-lg and title-md.
Don't use pure black for text. ink-black (#000000) appears only as a hover text color. Body and headings stay on ink (#222222).
Don't square off corners. Even footer links focus on a 4px radius (rounded.xs).

Responsive Behavior

Capture scope

This analysis is two-viewport: one desktop and one mobile capture. No intermediate breakpoints were observed, so no breakpoint values are stated.

What changes on mobile

Header collapses. The centered category tabs and the three-segment search pill (Where / When / Who) become a single Start your search pill at the top.
Carousels keep their direction. Cards and category chips stay horizontally scrolling rows rather than wrapping into a grid. Content becomes one column of stacked carousels.
Navigation moves to the bottom. A fixed bottom tab bar (Explore, Wishlists, Log in) replaces the top-right host CTA and menu. It overlays content with a subtle shadow.
Footer stacks. The multi-column footer stacks into single-column groups separated by 1px #DDDDDD top borders (footer-inner-mobile-column-2). The inspiration link grid reduces to two columns. The footer grows to 1310px tall (footer-inner-mobile, flagged: the footer-inner-mobile-inner height did not reproduce the measured 1310px after 2 correction attempts).

Touch targets

Measured control sizes already suit touch:

48px for primary and large buttons (button-primary, button-primary-2, button-secondary-4) and for the form fields input-4, input-5 and input-6.
40px for circular icon buttons and toggles (icon-button, header-inner-2-menu-toggle).

Text-level controls such as nav-link and button-ghost-9 are only 18px tall. Keep them inside a larger tappable area on mobile.

Iteration Guide

Reference tokens, never raw hex. Use ink, body-muted, surface-soft, primary-active and the rest by name. The only sanctioned non-token color is the #EBEBEB hover fill, so add a token before reusing it widely.
Keep coral to one action per view. primary-active (#DA1249) goes on the search or booking action only, and primary (#FF385C) on the logo. Any new coral surface needs a strong reason.
New text styles must fit the existing ladder. Use the 11px–26px sizes with weights 400 / 500 / 600 / 700 and the line-height pattern (tight for titles, 1.45–1.5 for reading). Only title-lg and title-md carry negative tracking.
Content tiles take rounded.4xl (20px) and no shadow. Floating chrome (search, tabs, menus) takes one of the measured shadow tiers plus a 1px hairline. Do not invent darker shadows; nothing exceeds 0.12 alpha.
Pick button variants from the recipes. Use the 48px full pill (button-primary-2, 14px/24px padding), the 40px nav pill (button-secondary, 11px/12px padding), the 48px grey button-secondary-4, or the 40px circular icon-button on surface-soft. Extend these rather than creating new shapes.
Every interactive element gets a box-shadow focus ring. Use #FFFFFF 0px 0px 0px 2px, #222222 0px 0px 0px 4px on fills and photos, #222222 0px 0px 0px 2px on transparent pills, and the focus-ring (#3F3F3F) fill treatment on footer links.
Treat flagged recipes as approximations. Re-measure the headers, cards, footers and calendars against the live site before shipping pixel-exact work.

Known Gaps

Layout scaffolding. No container max-width, page margin, base spacing step or section padding was verified. Layout numbers are limited to button paddings and the 12px header gap.
Most structural recipes are flagged. Headers, cards, footers, calendars, search fields, category tabs and the photo gallery did not reproduce exactly, mostly because the original element could not be found again or a child offset did not match. Treat their values as close but not exact.
Hover is only partly captured. Hover fills were measured for some controls (#F7F7F7, #EBEBEB). Card hover behavior, image carousel dot interactions and wishlist heart toggling were not captured.
Animation is not documented. No motion, transition timing or carousel scroll animation was recorded.
Gradients are unverified. The token description mentions gradient surfaces for primary-active, but no gradient value was measured. Render coral as a flat fill until verified.
Auth-walled and transactional surfaces were not reached. This covers login, wishlists, the booking and checkout flow, messaging and host dashboards. Five public pages were captured successfully: home, services, homes, experiences and one listing detail page.
Responsive coverage is two-viewport only. There are no tablet captures and no breakpoint values. The mobile bottom tab bar and the mobile search pill have no recipes with numbers.
No backdrop blur was measured. The translucency of the heart buttons over photos seen in screenshots is unverified.

Extracted from Airbnb’s public website, not official brand guidelines.

More like this

Browse all

Travel, Transport & Logistics

Uber

Uber's design language combines clean minimalism with vibrant illustrations to create an approachable yet professional transportation platform. The stark black-and-white foundation provides clarity and readability, while colorful hero illustrations add warmth and human connection. Typography relies on the custom UberMove family for brand consistency, with generous spacing creating breathing room throughout the interface.

Commerce & Retail · E-commerce Store

IKEA

IKEA's global homepage uses a bold, flat design system anchored by the iconic IKEA Yellow (#ffdb00) as the primary action surface and IKEA Blue (#0058a3) as the brand logo accent. The entire typographic system is built on a single custom typeface — Noto IKEA — spanning weights 400 and 700 across a tightly defined scale from 14px body text to 51px display headings. Elevation is conveyed entirely through color contrast and layout structure rather than shadows. The layout uses a max-width container of 90rem with a 1.5rem desktop grid gap, and a consistent 8px border-radius token applied to interactive elements. The off-white background (#fffefb) provides warmth against the stark #111111 text, creating a high-contrast, accessible reading experience.

Software & SaaS · Productivity & Notes

Notion

Notion's marketing homepage pairs a deep navy (#02093a) hero section with a light (#f6f5f4) body, using a custom typeface (NotionInter) across all text roles. The design employs a 12-column grid with 28px gutters, a dual-radius language (8px for cards, 9999px for pills), and a multi-layer progressive shadow system for floating UI elements. Brand blue (#2537b1) drives CTAs and accent highlights, while a semantic gray-scale ladder (gray-200 through gray-900) structures all text and surface hierarchy.

Developer & Infrastructure · Developer Tools & IDEs

Railway

Railway's design system is a dark-first developer platform UI anchored in deep near-black navy surfaces (#13111c, #0b0b0f), high-contrast off-white text (#f7f7f8), and a distinctive purple brand accent (#853bce / #553f83). The hero uses IBM Plex Serif for editorial weight, while Inter handles all UI copy and JetBrains Mono / SF Mono serve code contexts. Elevation is achieved through inset white-glow borders (rgba(255,255,255,0.2) 1.5px inset) rather than drop shadows, giving the UI a glass-panel aesthetic. The spacing system is 4px-based with a strong 8/12/16/24/32 rhythm. Border radii are tight (4px dominant) with selective 8px and 16px for cards and hero containers.

Business & Professional Services

Shopify

Shopify's marketing homepage uses a dramatic full-bleed video hero with a near-black (#02090a) background that contrasts sharply with the white navigation bar above. The primary brand accent is a vivid mint green (#36f4a4) used sparingly for highlights and interactive states. Typography is split between NeueHaasGrotesk for display/editorial headings and Inter-Variable for UI body copy. CTAs use fully-rounded pill shapes (border-radius: 9999px). The overall system is confident, high-contrast, and aspirational — built to convert visitors into merchants.

Finance & Fintech

Stripe

Stripe's marketing homepage uses a tightly controlled design system (HDS — Stripe Design System) built around the variable font "sohne-var" at light weights (300–400), a deep navy-to-indigo brand palette anchored by #533afd (Stripe Indigo), and a signature full-bleed spectral gradient hero. Components are low-radius (4–6px), flat-to-minimal-shadow, and structured around an 8px base spacing grid. The overall tone is authoritative yet approachable — financial infrastructure communicated through confident typography and restrained color use.

Airbnb Design System

Button15

Card10

Extra39

Header10

Footer6

Input7

Overview

Colors

Brand & Accent

Surface

Text

Hairlines & Borders

Component & State Colors

Typography

Font Family

Hierarchy

Principles

Note on Font Substitutes

Layout

Spacing System

Grid & Container

Whitespace Philosophy

Measured Layout

Elevation & Depth

Shapes

Border Radius Scale

Geometry character

Components

Button, primary

Button, secondary

Button, secondary (2)

Button, ghost

Button, ghost (2)

Card

Card (2)

Card (3)

Wishlist button

Nav link

Nav link

Carousel arrow

Carousel arrow (2)

Menu button

Menu button (2)

Header (landing)

Footer (landing)

Button, ghost (3)

Button, ghost (4)

Input (2)

Card (4)

Carousel section

Search field (3)

Search field (4)

Tab

Tab

Footer setting button

Footer setting button (2)

Button, ghost (5)

Button, ghost (6)

Button, ghost (7)

Header (inner)

Button, primary (2)

Button, secondary (3)