Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Agoda
TravelAgoda presents a travel-optimized interface with crystalline blue gradients that evoke oceanic wanderlust and digital confidence. The design balances aspirational imagery with functional clarity, using rounded corners and soft shadows to create an approachable yet sophisticated booking experience.
Design Identity
Signature Color
Agoda Ocean Blue
#2196F3
wanderlust and travel freedom - the color of endless horizons and digital trust
Visual Identity
Hero imagery dominates the viewport with gradient overlays and floating white content cards that create depth and visual breathing room - instantly recognizable by the immersive backdrop approach
Component Style
Soft rounded corners (8-12px radius) with subtle drop shadows create floating card aesthetics. Input fields have clean borders with generous padding, while the primary CTA uses a bold gradient treatment that stands out against the scenic backdrop.
Spacing Philosophy
Generous vertical rhythm with 40-60px gaps between major sections creates visual breathing room, while tight 12-16px internal component padding maintains information density within functional areas.
Design Principles
- Border radius consistently 8-12px for approachable feel
- Hero imagery always spans full viewport width
- White content cards float over backgrounds with subtle shadows
- Typography never exceeds 3 weights: 400, 500, 700
- Primary actions use gradient treatments for prominence
Target Audience
Leisure travelers and vacation planners who value visual inspiration alongside functional booking tools - people who research destinations as much as prices
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 | 13px | 400 | 18.5714px | |
| h1 | 24px | 700 | 31.2px | |
| h2 | 20px | 400 | 26px | |
| h3 | 16px | 600 | 20.33px | |
| h6 | 16px | 400 | 16px | |
| p | 16px | 400 | 20.33px | |
| a | 14px | 376 | 16px | |
| button | 13px | 500 | 18.5714px | |
| input | 13px | 400 | 18.5714px | |
| nav | 13px | 400 | 18.5714px |
Color Palette
#0d1118#000000#ffffff#352a06#04070a#edf0f9#322343#98471c#252c38#6f3a9f#6b7388#00622f
