Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Kiwi.com
TravelKiwi.com presents a friendly yet professional travel experience through its signature teal-green palette that evokes trust and adventure. The approachable Circular typeface combined with soft, rounded corners creates a welcoming atmosphere for budget-conscious travelers seeking reliable booking experiences.
Design Identity
Signature Color
Kiwi Teal
#008f7b
Travel adventure meets financial trust - sophisticated enough for booking decisions, vibrant enough for wanderlust inspiration
Visual Identity
The distinctive teal-green color system combined with consistently rounded 8px corners and the friendly Circular typeface creates an instantly recognizable travel-optimized interface that balances professionalism with approachability.
Component Style
Gently rounded 8px corners with subtle shadows dominate the interface. Buttons feel substantial with generous padding (16px vertical), while cards use soft drop shadows for depth. Form elements have clean borders that activate with teal highlights, creating a cohesive and touchable experience.
Spacing Philosophy
Moderate spacing with 16px as the base unit creates breathing room without feeling sparse. The layout favors horizontal expansion over vertical density, with generous button padding (28px horizontal) that makes CTAs feel substantial and trustworthy.
Design Principles
- Border radius consistently uses 8px for primary components
- Typography scales between 15px and 20px with clear weight hierarchy (400/500/700)
- Teal (#008f7b) serves as the primary accent with 6 shade variations
- Button padding follows 16px vertical, 28px horizontal for primary actions
- Shadows are subtle with maximum 20px blur for elevation
Target Audience
Price-conscious leisure travelers aged 25-45 who value simplicity and transparency in booking while seeking adventure and authentic experiences
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 | 15px | 400 | 22.5px | |
| h1 | 20px | 700 | 28px | |
| h2 | 15px | 400 | 22.5px | |
| h3 | 20px | 700 | 28px | |
| h4 | 15px | 700 | 20px | |
| p | 15px | 400 | 20px | |
| a | 15px | 500 | 20px | |
| button | 15px | 500 | 15px | |
| input | 16px | 500 | 44px | |
| nav | 15px | 400 | 22.5px |
Color Palette
#e1f4f3#d6f0ec#bfe8e2#008f7b#007565#006153#007061#005c4f#004239#94a8be#0070c8#4f5e71
