Airbnb Coral Marketplace
Design an Airbnb-inspired warm marketplace landing page. Ideal for marketplaces, viagens, plataformas de hospedagem, e-commerce experiencial. AI-ready template.
Use case: Marketplaces, Viagens, Plataformas de hospedagem, E-commerce experiencial
Historical Context
Airbnb's design system didn't emerge from a rebrand exercise or a design trends mood board. It came from operational pain. By 2016, the product had grown into a sprawling mess of inconsistent patterns across web, iOS, and Android — different teams shipping different interpretations of the same components. The DLS (Design Language System) was their first serious attempt at unification, but Coral represents the maturation of that thinking into something far more ambitious. Coral is fundamentally a marketplace design system, which means it has to solve problems most design systems never face: trust between strangers, complex multi-party flows, and the tension between host and guest experiences that share the same interface. The system had to encode hospitality — warmth, approachability, clarity — without sacrificing the transactional efficiency a booking platform demands. What makes Coral genuinely interesting is how it treats illustration, photography, and motion as first-class citizens rather than decorative afterthoughts. The rounded forms, the Cereal typeface, the deliberate softness — these aren't aesthetic choices, they're trust-building mechanisms. Every visual decision serves the goal of making strangers comfortable enough to sleep in each other's homes.
When to Use
Reach for Coral's patterns when you're building any platform where trust is the product. Peer-to-peer marketplaces, hospitality platforms, travel booking flows, or any service where users transact with strangers. The system excels at balancing warmth with utility — if your product needs to feel human and approachable while handling complex multi-step transactions, this is your reference. Skip it if you're building enterprise tooling or data-heavy dashboards; Coral's generosity with whitespace and illustration won't survive information density requirements.
Design Principles
- Trust through visual warmth — rounded corners, soft illustration, and generous spacing aren't decoration, they're psychological safety mechanisms for peer-to-peer transactions
- Dual-persona architecture — every component must work for both sides of the marketplace without feeling like a compromise for either party
- Progressive disclosure of complexity — booking flows hide enormous transactional depth behind deceptively simple surfaces, revealing complexity only when the user needs it
- Photography as interface — real images of real spaces do more trust-building work than any UI pattern; the system treats content imagery as a structural element, not a fill
- Locality without fragmentation — the system flexes across cultures, languages, and currencies while maintaining a single coherent identity that feels native everywhere
Technical Specs
Colors
Primary
Secondary
Effects
Canvas branco puro com Rausch Red (#ff385c) como acento singular icônico. Texto near-black quente (#222222) — nunca preto puro. Cereal VF variable font com terminais arredondados quentes, pesos 500-700. Sombras three-layer: ring (0.02) + soft blur (0.04) + primary lift (0.1). Radius generoso: 8px botões, 14px badges, 20px cards, 32px large, 50% circular. Controles circulares (50%) para carrosséis. Fotografia como conteúdo primário. Letter-spacing negativo (-0.18px a -0.44px) em headings para intimidade.
Light/Dark
✓ Full / ✗ Not Recommended
Related
Last synced: 4/1/2026