{"id":"c2325884-4391-4688-85cd-e143f5107517","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","licenseNote":"Public design-reference facts mirrored from Refero for agent context. Keep source attribution visible and verify rights before reusing media, logos, or brand assets.","name":"Airbnb","summary":"Vacation photos pinned to a white corkboard — bright photography contained in rounded frames against a near-white surface, with a single coral pin holding everything together.","description":"Airbnb's interface is a warm, airy marketplace built on near-white surfaces and a single coral-red brand heartbeat. The #f7f7f7 canvas with #ffffff card surfaces creates a barely-there depth — paper stacked on paper — where photography does all the visual heavy lifting. The custom Airbnb Cereal VF variable font runs at weights 400–700 across a compact, tight scale with negative letter-spacing at larger sizes, giving the UI a quiet confidence without needing decorative elements. The singular #ff385c coral-red appears exclusively on brand touchpoints (logo, active states, the search button), making it feel like a signature rather than a system color. Card images bleed edge-to-edge with 20px rounded corners — the only generous radius in an otherwise compact, information-dense layout.","industry":"ecommerce","colorScheme":"light","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"},{"name":"Rausch Deep","hex":"#e00b41","role":"Hover state darkening of Rausch Coral on interactive brand elements","group":"brand"},{"name":"Carbon","hex":"#222222","role":"Primary text, headings, borders, icon strokes — the dominant neutral forming almost all typographic content","group":"neutral"},{"name":"Slate","hex":"#6a6a6a","role":"Secondary text (metadata, subtext, secondary labels), secondary icon fill","group":"neutral"},{"name":"Silver","hex":"#c1c1c1","role":"Disabled button text and icon strokes, inactive carousel navigation arrows","group":"neutral"},{"name":"Stone","hex":"#b0b0b0","role":"Skeleton/loading placeholder backgrounds","group":"neutral"},{"name":"Pebble","hex":"#dddddd","role":"Card image placeholder backgrounds, tertiary borders, disabled borders","group":"neutral"},{"name":"Mist","hex":"#ebebeb","role":"Subtle dividers and secondary section borders","group":"neutral"},{"name":"Fog","hex":"#f7f7f7","role":"Page canvas, footer background, button hover/selected state background","group":"neutral"},{"name":"Cloud","hex":"#ffffff","role":"Card surfaces, header background, modal/popover backgrounds, pill badge fills","group":"neutral"}],"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\""}],"typeScale":[{"role":"caption","size":11,"lineHeight":1.29,"letterSpacing":0.44},{"role":"body","size":14,"lineHeight":1.43,"letterSpacing":-0.13},{"role":"heading-sm","size":20,"lineHeight":1.25,"letterSpacing":-0.18},{"role":"heading","size":22,"lineHeight":1.23,"letterSpacing":-0.2},{"role":"display","size":28,"lineHeight":1.18,"letterSpacing":-0.56}],"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."]},"components":[{"name":"Primary Search Bar","role":""},{"name":"Listing Card","role":""},{"name":"Navigation Tab Bar","role":""},{"name":"Listing Card","role":"Primary browsable content unit in scrollable horizontal carousels"},{"name":"Guest Favorite Badge","role":"Trust signal overlaid on listing card images"},{"name":"Primary Search Bar","role":"Main search interface in the header"},{"name":"Circular Icon Button — Default","role":"Carousel navigation arrows, save/wishlist toggles"},{"name":"Rounded Pill Button — Secondary","role":"Filter category tabs (Popular, Beach, Cities, Historic)"},{"name":"Ghost Text Button — Nav Link","role":"Top navigation links: Homes, Experiences, Services"},{"name":"Become a Host Button","role":"Tertiary CTA in global header navigation"},{"name":"Section Header with Arrow Link","role":"Section title + 'See all' inline link"},{"name":"Star Rating Indicator","role":"Listing quality signal below card image"},{"name":"Global Header","role":"Sticky top bar containing logo, nav, and search"},{"name":"Carousel Scroll Container","role":"Horizontal scrollable listing row per section"}],"customSections":[{"title":"Agent Prompt Guide","content":"**Quick Color Reference**\n- Text primary: #222222\n- Text secondary: #6a6a6a\n- Background (canvas): #f7f7f7\n- Surface (cards, header): #ffffff\n- Border / divider: #ebebeb\n- Brand accent: #ff385c\n- primary action: no distinct CTA color\n\n**Example Component Prompts**\n\n1. **Listing Card**: White (#ffffff) info area below a full-bleed photo placeholder (#dddddd), 20px border-radius, no shadow. Below image: listing title at 14px Airbnb Cereal VF weight 600 #222222; host type + dates at 12px weight 400 #6a6a6a; price at 14px weight 600 #222222. Star icon + rating at 12px weight 600 #222222 with review count at 12px #6a6a6a. 'Guest Favorite' badge: absolute top-left, white background, 4px radius, 11px weight 600 #222222, letter-spacing +0.04em, shadow drop-shadow(rgba(0,0,0,0.25) 0px 2px 6px).\n\n2. **Search Bar**: White (#ffffff) pill, 20px radius, shadow rgba(0,0,0,0.02) 0px 0px 0px 1px + rgba(0,0,0,0.04) 0px 2px 6px + rgba(0,0,0,0.1) 0px 4px 8px. Three inline segments (Where / When / Who) with 12px vertical padding, label 12px weight 600 #222222, placeholder 14px weight 400 #6a6a6a, separated by 1px #ebebeb dividers. Right-end: 40px circle #ff385c background with white search icon.\n\n3. **Section Header**: Text 22px Airbnb Cereal VF weight 600 #222222, letter-spacing -0.2px, followed immediately by a →  arrow icon in #222222. Bottom margin 12px before the card carousel. Subtext (optional) 14px weight 400 #6a6a6a directly below heading.\n\n4. **Filter Pill Button**: 8px border-radius, 1px solid #222222 border, transparent background (hover: #f7f7f7). Text 14px Airbnb Cereal VF weight 500 #222222. Padding 10px all sides. Selected state: background #222222, text #ffffff.\n\n5. **Carousel Arrow Button**: 40px diameter circle, 50% radius. Active: white (#ffffff) background, #222222 chevron icon, shadow rgba(0,0,0,0.02) 0px 0px 0px 1px + rgba(0,0,0,0.16) 0px 2px 4px. Disabled: #f7f7f7 background, #c1c1c1 icon, no shadow."},{"title":"Motion Philosophy","content":"Transitions run at 0.25s ease for most interactive state changes (hover backgrounds, shadow lifts), with 0.1s for immediate snap feedback (button presses). The homepage hero card stack uses a custom spring curve — linear(0 0%, 0.238367 8.33%... 1 100%) — for the stacked card fan animation, giving it a physical bounce that distinguishes it from the otherwise utilitarian transition vocabulary. Transform is the primary transitioned property (141 instances), reinforcing that the design moves things rather than fades them. The backdrop-filter: blur(32px) is used on overlay surfaces (e.g. sticky compact search on scroll)."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777418061730-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777418061730-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/c2325884-4391-4688-85cd-e143f5107517-1777581450106-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/c2325884-4391-4688-85cd-e143f5107517-1777581450106-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/c2325884-4391-4688-85cd-e143f5107517-1777581450106-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/c2325884-4391-4688-85cd-e143f5107517-1777581450106-preview-detail-poster.jpg"},"similarStyleIds":["194faa2f-2f69-4bbf-9e29-290f28fa8ca2","d28732de-1b7a-4d37-b7aa-edfa7caf428b","8ff3bfb4-6f5e-4e07-83be-56e62ce80d2f","6d3c5056-dbb9-413b-9e9d-37183cfb97f8","355d4b38-1a53-4544-911e-0f5073ab836b","71717c5a-324a-40ed-8a09-9a35df74f1d3","a0392801-aa0f-4c0c-81e1-4e1684eb832a","e30d2fb6-e3d6-4e0a-9395-6d196d5e7c7d","c8c22958-ec50-47f1-aedc-a131d7aeb442","3ddaa1f6-bebc-44e3-a6df-b653179f3fd9","6db1057d-3457-4173-9184-df160415f060","f73ce3e0-4452-4b21-b36f-6fde27de2cd6","b8ce0a90-40c6-4518-940c-8c97ccf9c1a0","fece962d-a580-4365-8afd-c9905a2502b1","ef73c742-1c3b-48b9-a174-de365ecc4691","36752f78-1c43-471b-b125-e82152ad23dd","a48ef430-8c6a-42d8-8c53-ab7bb43cf33b","b5fdba21-fd4d-427e-b551-1e22c51e42db","066625ba-0d8d-472e-8240-4026ed7bb94e","7fdcf5eb-4d65-49a2-b887-60119bca4edc"],"exports":{"designMdUrl":"/references/refero/c2325884-4391-4688-85cd-e143f5107517/design.md","tokensJsonUrl":"/references/refero/c2325884-4391-4688-85cd-e143f5107517/tokens.json","tailwindV4Url":"/references/refero/c2325884-4391-4688-85cd-e143f5107517/tailwind-v4.css","cssVariablesUrl":"/references/refero/c2325884-4391-4688-85cd-e143f5107517/tailwind-v4.css"}}