The visual approach
Airbnb's design system works from a foundation most marketplaces avoid: warmth over neutrality. The primary color #FF385C is a warm pink-red that sits closer to hospitality branding than SaaS. It appears sparingly—in CTAs, in the heart favorite button, in active states—which lets the photography carry the browse experience while the brand holds the conversion moments.
The typography stack leads with Circular, a geometric sans-serif set at weights that create hierarchy through boldness rather than size jumps. Display text runs at 56px/800, H1 at 36px/700, H2 at 32px/600, then body at 16px/400. The system avoids the trap of over-scaling headings; even the largest text stays readable rather than showy. Secondary text uses #717171 instead of a lighter weight, which means hierarchy remains legible on the #F7F7F7 surface backgrounds that separate content zones without needing borders.
The spacing scale—4, 8, 12, 16, 24, 32, 48, 64, 96—lands in a middle density. Cards get 24px internal padding, carousels use 16px gaps, and section breaks take 64px or 96px depending on content weight. Border radius follows a four-step progression: 8px for inputs, 12px for cards, 24px for larger surfaces, and 9999px for pills and avatar containers. The component vocabulary listed in the brief is deliberately narrow: nav, hero, form, card, cta. No modals in the core patterns, no drawers, no steppers. The UI pushes users forward through pages rather than layering interactions.
What works
The property card hover state does more than the typical shadow lift. The card elevates from 0 2px 8px rgba(0,0,0,0.12) to 0 8px 24px rgba(0,0,0,0.18) over 250ms ease-out, but the image inside scales to 1.05× over 400ms ease-out within a clipped container. The timing mismatch—shadow faster, image slower—makes the card feel like it has physical weight. The user perceives lift before zoom, which reads as depth rather than a flat transform.
The heart favorite button uses a scale bounce on click: 1.15 → 0.9 → 1.0 over 300ms with cubic-bezier(.68, -0.55, .265, 1.55). The negative second control point creates overshoot, and the button fills with a red-to-pink gradient simultaneously. It is one of the few interactions in the system that uses easing this aggressive, which makes favoriting feel like a commit rather than a toggle.
Horizontal carousels scroll with momentum and snap-to-card alignment. When a carousel enters the viewport, cards reveal with an 80ms stagger—each slides up 8px with opacity transitioning from 0 to 1 over 400ms using cubic-bezier(.2, .8, .2, 1). That ease curve is slower to start and faster to finish, which makes the entrance feel like settling rather than popping. Navigation arrows fade in only on hover, so the row stays clean until the user signals intent.
The fixed header gains box-shadow: 0 1px 2px rgba(0,0,0,0.08) once the user scrolls past 16px, transitioning over 200ms ease-out. The threshold is low enough that the shadow appears before the content underneath would collide, which prevents the header from ever feeling like it is floating unattached.
What a builder can borrow
The elevation strategy is portable. Define two or three shadow tokens—resting, hover, and scroll—and transition between them with different durations depending on the trigger. A 250ms hover feels responsive; a 200ms scroll-triggered shadow feels linked to momentum.
The stagger timing of 80ms per card is worth testing in any grid or carousel. It is fast enough that a row of four cards finishes animating in 320ms, but slow enough that the user perceives sequence. Anything under 60ms reads as simultaneous; anything over 120ms starts to feel like a queue.
Using a non-neutral primary color requires discipline. Airbnb applies #FF385C only to interactive elements and confirmation states, never to decorative surfaces or icons. That restraint lets the color signal action without competing with listing photography.
The spacing scale of 4, 8, 12, 16, 24, 32, 48, 64, 96 works across mobile and desktop because the jumps are proportional enough to feel related but distinct enough to create clear hierarchy. A builder can adopt this exact scale or use the 1.5× ratio between adjacent steps as a template.
The minimal component vocabulary—nav, hero, form, card, cta—is the hardest pattern to borrow because it requires saying no to drawers, modals, steppers, and tabs. But the payoff is a system where every screen feels like the same product, even when the content varies by geography, density, or user intent.