Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Airbnb
TravelAirbnb creates a sense of wanderlust and belonging through its warm coral-pink signature color that radiates hospitality and adventure. The custom Airbnb Cereal typography feels approachable yet sophisticated, while generous rounded corners and soft shadows create an inviting, home-like digital environment that mirrors the brand's mission of making anyone feel at home anywhere.
Design Identity
Signature Color
Airbnb Coral
#ff385c
Warm hospitality and wanderlust - the color of adventure that feels like home
Visual Identity
The distinctive search pill interface with its segmented input fields and the prominent coral-pink circular search button creates an instantly recognizable booking experience that no other platform replicates.
Component Style
Generously rounded components with 8-24px border radius feel soft and welcoming. Cards use subtle layered shadows (0 6px 20px rgba(0,0,0,0.2)) rather than harsh borders, creating depth without aggression. Everything feels touchable and inviting.
Spacing Philosophy
Breathing room philosophy - the large search interface dominates the hero area with ample whitespace around it, while property cards maintain comfortable 16px gaps. The layout prioritizes visual comfort over information density.
Design Principles
- Border radius follows 4px increments from 4px to 32px for consistent softness
- Shadows create depth hierarchy: subtle 0 2px 4px for cards, dramatic 0 8px 28px for modals
- Typography uses minimal weight variation: 400 for body, 500 for emphasis, 700 only for large headings
- The coral brand color appears sparingly but powerfully on key CTAs
- Grid layouts maintain consistent 8px base spacing unit
Target Audience
Experience-seeking travelers aged 25-45 who value authentic, local experiences over standardized hotel stays and are comfortable with peer-to-peer sharing economy
Mood
Design descriptions are AI-generated based on visual analysis and may not fully reflect the brand's official design guidelines.
Design System
Typography Scale
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| body | 14px | 400 | 20.02px | |
| h1 | 28px | 700 | 40.04px | |
| h2 | 14px | 400 | 20.02px | |
| h3 | 14px | 500 | 18px | |
| a | 14px | 400 | 20.02px | |
| button | 14px | 400 | 20.02px | |
| input | 14px | 500 | 18px | |
| nav | 14px | 400 | 20.02px | |
| header | 14px | 400 | 20.02px | |
| footer | 14px | 400 | 20.02px |
Color Palette
#ffffff#f7f7f7#fff8f6#ff385c#460479#92174d#222222#000000#dddddd#c13515#b32505#b0b0b0
