{"id":"c2325884-4391-4688-85cd-e143f5107517","name":"Airbnb","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/c2325884-4391-4688-85cd-e143f5107517","originalSiteUrl":"https://www.airbnb.com","capturedAt":"2026-04-28T23:16:17.659Z","colors":[{"name":"Rausch Coral","hex":"#ff385c","role":"Brand logo fill, active nav underline, search button icon background, carousel dot active state — the single chromatic signature that makes the interface recognizable","group":"brand","cssVariable":"--color-rausch-coral"},{"name":"Rausch Deep","hex":"#e00b41","role":"Hover state darkening of Rausch Coral on interactive brand elements","group":"brand","cssVariable":"--color-rausch-deep"},{"name":"Carbon","hex":"#222222","role":"Primary text, headings, borders, icon strokes — the dominant neutral forming almost all typographic content","group":"neutral","cssVariable":"--color-carbon"},{"name":"Slate","hex":"#6a6a6a","role":"Secondary text (metadata, subtext, secondary labels), secondary icon fill","group":"neutral","cssVariable":"--color-slate"},{"name":"Silver","hex":"#c1c1c1","role":"Disabled button text and icon strokes, inactive carousel navigation arrows","group":"neutral","cssVariable":"--color-silver"},{"name":"Stone","hex":"#b0b0b0","role":"Skeleton/loading placeholder backgrounds","group":"neutral","cssVariable":"--color-stone"},{"name":"Pebble","hex":"#dddddd","role":"Card image placeholder backgrounds, tertiary borders, disabled borders","group":"neutral","cssVariable":"--color-pebble"},{"name":"Mist","hex":"#ebebeb","role":"Subtle dividers and secondary section borders","group":"neutral","cssVariable":"--color-mist"},{"name":"Fog","hex":"#f7f7f7","role":"Page canvas, footer background, button hover/selected state background","group":"neutral","cssVariable":"--color-fog"},{"name":"Cloud","hex":"#ffffff","role":"Card surfaces, header background, modal/popover backgrounds, pill badge fills","group":"neutral","cssVariable":"--color-cloud"}],"typography":[{"role":"The sole typeface for every text element across the UI. Weight 400 handles body and metadata; 500 lifts labels and secondary headings; 600 marks section titles; 700 for price display and primary emphasis. The custom variable font brings tight optical metrics at display sizes that generic fonts cannot replicate — negative letter-spacing at -0.02em pulls large numerals together. The 'salt' feature set activates alternate letterforms that distinguish it from system sans-serifs.","sizes":"8px, 11px, 12px, 13px, 14px, 16px, 20px, 21px, 22px, 28px","family":"Airbnb Cereal VF","weight":"400, 500, 600, 700","lineHeight":"1.18–1.43","substitute":"Inter Variable","letterSpacing":"-0.02em at large sizes (20px+), -0.009em at mid sizes (14–16px), +0.04em at small caps/label contexts (11–12px)","fontFeatureSettings":"\"salt\""}],"spacing":{"radius":{"cards":"20px","pills":"32px","badges":"4px","inputs":"14px","buttons":"8px","searchBar":"20px","iconButtons":"50%"},"elementGap":"8px","sectionGap":"48px","cardPadding":"12px","pageMaxWidth":"1760px"},"radius":{"cards":"20px","pills":"32px","badges":"4px","inputs":"14px","buttons":"8px","searchBar":"20px","iconButtons":"50%"},"shadows":{"surfaces":[{"hex":"#f7f7f7","name":"Canvas","level":1,"purpose":"Page background and footer fill — the paper beneath everything"},{"hex":"#ffffff","name":"Card / Header","level":2,"purpose":"Listing card information areas, global header bar, search bar container, modal surfaces"},{"hex":"#dddddd","name":"Placeholder","level":3,"purpose":"Image loading skeleton within cards before photo loads"},{"hex":"#b0b0b0","name":"Loader","level":4,"purpose":"Animated skeleton pulse overlay on card image placeholders"}]},"guidelines":{"do":["Use #ff385c exclusively for the brand logo, the search trigger button background, and active/selected state indicators — never for decorative fills or text blocks.","Apply 20px border-radius to all listing cards and the main search bar container; use 8px for filter pill buttons and input fields; reserve 50% (circular) for icon-only buttons.","Set all typography in Airbnb Cereal VF (substitute: Inter Variable) with font-feature-settings: 'salt'; apply letter-spacing -0.02em at 20px+ sizes and +0.04em for small-caps labels at 11–12px.","Layer shadows as the three-value stack — rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px 0px, rgba(0,0,0,0.1) 0px 4px 8px 0px — on elevated containers like the search bar and modals only; listing cards use no shadow.","Maintain the surface hierarchy strictly: page canvas #f7f7f7 → card/header surface #ffffff → disabled/placeholder fills #dddddd → skeleton loaders #b0b0b0.","Keep section headings at 22px weight 600 with the inline arrow-link pattern; use 14px weight 400 #6a6a6a for all metadata (dates, host type, review counts).","Use 12px as the base gap for intra-card elements and 48px for vertical section rhythm between listing rows."],"dont":["Never use #ff385c for body text, headings, or decorative strokes — its appearance outside logo/search-button/active-states breaks the signature scarcity of the brand color.","Don't add heavy drop shadows to listing cards — cards use no shadow; the #dddddd placeholder color and 20px radius carry the visual weight without elevation.","Never set headings above weight 700 or below weight 500; Airbnb Cereal VF at weight 800+ is not in the design system and breaks the measured typographic rhythm.","Don't use border-radius values other than 4px, 8px, 14px, 20px, 32px, or 50% — mixing arbitrary radii (e.g. 6px, 12px, 24px) disrupts the deliberate radius vocabulary.","Never place text directly on card photography without a scrim or badge surface — overlay content uses #ffffff or semi-transparent white containers, not raw text on image.","Don't use the blue gradient (rgb(45,60,91) → rgb(128,157,192)) as a UI surface — it is specific to the hero CTA card animation and not part of the repeatable component palette.","Never omit the 'salt' font feature setting on Airbnb Cereal VF — without it, the alternate letterforms revert to generic shapes that undermine brand distinctiveness."]}}