Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Expedia
TravelExpedia employs a security-first design language that balances digital trust with travel excitement through its signature royal blue and warm yellow palette. The brand projects reliability through clean layouts and subtle shadows while maintaining accessibility with high contrast and clear hierarchies, creating a sense of confident exploration.
Design Identity
Signature Color
Expedia Trust Blue
#1668e3
Reliable travel guidance and secure booking confidence
Visual Identity
Centered white modal dialogs with generous padding and subtle rounded corners (16px) floating over light gray backgrounds, creating a sense of focused security verification without feeling intimidating.
Component Style
Soft rounded corners (8-16px) with clean white backgrounds and subtle gray borders. Buttons feel substantial with moderate padding and gentle hover states. Interactive elements use the signature blue with yellow accents for primary actions, creating warmth within a trustworthy framework.
Spacing Philosophy
Generous 24-48px page margins create breathing room, while modal content uses tight internal spacing to maintain focus. The rhythm alternates between expansive outer margins and compact component groupings.
Design Principles
- Border radius scales from 8px for containers to 16px for dialogs
- Typography uses only Centra No2 at 14px, 16px, and 20px sizes
- Primary actions always use #1668e3 blue with #fddb32 yellow for emphasis
- Page margins never go below 24px on mobile, 48px on desktop
- Interactive states use subtle opacity overlays rather than hard color changes
Target Audience
Cautious travelers who prioritize security and reliability over flashy features, including families and business travelers who need confidence in their booking decisions
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 | 16px | 400 | normal | |
| h1 | 36px | 400 | 40px | |
| h2 | 14px | 500 | 18px | |
| h3 | 18.72px | 700 | normal | |
| h4 | 28px | 500 | 32px | |
| h6 | 16px | 500 | 20px | |
| p | 14px | 400 | 18px | |
| a | 14px | 400 | 18px | |
| button | 14px | 500 | 18px | |
| input | 16px | 400 | 20px |
Color Palette
#caccd2#1668e3#ffffff#eff3f7#191e3b#0c0e1c#dfe0e4#676a7d#4d5167#c8dff9#ecf4fd#fddb32
