Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Away
RetailAway embodies a premium travel aesthetic through stark geometric contrasts and monochromatic sophistication. The midnight navy (#012169) commands authority against crisp whites and warm off-whites, while razor-sharp zero-radius corners create an architectural precision that speaks to thoughtful engineering.
Design Identity
Signature Color
Away Midnight Navy
#012169
Premium travel authority - the deep confidence of departure gates at midnight and first-class reliability
Visual Identity
Zero border radius on ALL interactive elements - buttons, inputs, and cards maintain surgical rectangular precision that cuts against the warm, lived-in travel photography
Component Style
Brutally geometric with 0px border radius everywhere. Clean 1-2px borders in light grays (#e2e1e1), minimal shadows reserved for elevated states only. Everything feels architecturally precise yet approachable through generous padding.
Spacing Philosophy
Breathing room hierarchy: tight 8-12px internal component spacing, comfortable 15-24px between related elements, with expansive whitespace around hero content to create premium travel lounge atmosphere
Design Principles
- Border radius is always 0px - no exceptions
- Typography uses only Graphik at 14px, 16px, 18px, and 56px scales
- Navy (#012169) reserves for primary actions and key messaging
- Warm off-white (#f7f4f2) backgrounds over pure white for premium warmth
- Shadows appear only on elevated modals and popovers, never on base components
Target Audience
Design-conscious frequent travelers who value functional luxury over flashy features - professionals who see luggage as an extension of their personal brand
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 | 24px | |
| h1 | 56px | 400 | 47.6px | |
| h2 | 16px | 500 | 16px | |
| h3 | 14px | 500 | 15.4px | |
| h5 | 18px | 400 | 21.6px | |
| p | 14px | 400 | 19.6px | |
| a | 16px | 400 | 24px | |
| button | 16px | 400 | 18px | |
| input | 32px | 400 | 38.4px | |
| nav | 16px | 400 | 24px |
Color Palette
#000000#111111#666666#b8b8b8#f7f4f2#ffffff#f7f4f1#e4f5fd#012169#25b900#ea1e42#0038ff
