# Away — Marketing Site Design Spec

> Source: awaytravel.com (live DOM, computed styles), 2026-07-26 (desktop 1512px).
> Coverage: home page (Shopify storefront). No login surface (site only). 9 of the page's stylesheets are cross-origin (Shopify apps / OneTrust) — brand states read from the same-origin theme; §4 hover on the primary CTA is recorded from the theme's `color-btn-scheme-*` rules rather than an inline match.
> Reality check: hint ("clean travel editorial, colour-blocked") is accurate. The chrome is clean editorial monochrome (white canvas, `#111111` ink, `#666666` muted) and ALL the colour is blocked into full-bleed product/campaign bands — a broad captured set: pink `#f1c9d8`, slate `#516676`, olive `#585d47`, navy `#20284c`, sage `#7fa087`, tan `#d7ceb9`, cream `#f7f4f1`, campaign purple `#6a5276`, blue `#204773`, and two reds `#cf1920`/`#d31b3b`. The signatures the hint misses: the workhorse is **Graphik** with a **serif (Lyon Display) reserved only for small eyebrows**, the display sits at weight 400 with line-height BELOW font size (56/49.84, -4% tracking), the primary radius token is a **`--button-radius: 80px` pill** (9999px is the single most-used radius, 128×), and **`border-radius` itself animates** (0.5s ease).

## 1. Visual Theme & Atmosphere

Clean travel-editorial commerce — a white gallery where crisp Graphik typography and full-bleed product photography do the work, and colour arrives only in blocked campaign bands and the luggage itself. The chrome is strictly monochrome (`#111111` on white, `#666666` for secondary), so a pink, olive or navy band reads as an event. Type is confident and tight: a light 56px display that lets its line-height fall below the font size, tiny uppercase Graphik labels with positive tracking, and a serif eyebrow used sparingly for warmth. Controls are fully-rounded pills; structure is 1px `#cccccc` hairlines with almost no shadow. It deliberately avoids gradients, glows and decorative flourish. Feels: clean, editorial, roomy, considered.

## 2. Color Palette & Roles

### Text & neutrals
| Token | Hex | Role / usage |
|---|---|---|
| ink | `#111111` | Primary text (3386 uses) |
| muted | `#666666` | Secondary text, country picker |
| grey-b8 | `#b8b8b8` | Disabled / faint |
| border | `#cccccc` | Default hairline (18×) |
| border-alt | `#e2e1e1` · `#d8d8d8` | Softer dividers |
| light-grey | `#d8d8dc` | Button label on dark |
| white | `#ffffff` | Canvas, cards, pill CTAs |

### Colour-block bands (campaign / product surfaces)
| Token | Hex | Role / usage |
|---|---|---|
| blush | `#f1c9d8` | Pink campaign band |
| slate | `#516676` | Slate-blue band |
| olive | `#585d47` | Olive band |
| navy | `#20284c` | Deep navy band |
| sage | `#7fa087` | Sage-green band |
| tan | `#d7ceb9` | Warm tan band |
| cream | `#f7f4f1` | Soft off-white section fill |
| campaign-purple | `#6a5276` | Announcement bar |
| ocean | `#204773` | Blue band |
| sale-red | `#cf1920` / `#d31b3b` | "SALE" label + red band |

### Focus accent
| Token | Hex | Role / usage |
|---|---|---|
| focus-blue | `#0038ff` | Input focus border (+ ring `rgba(0,56,255,.1)`) |
| swatch-focus | `#275dc5` | Swatch focus-visible ring |

Rule: chrome stays monochrome; saturated colour appears only in full-bleed bands, product imagery and the red SALE label — never as chrome or a link.

## 3. Typography Rules

- Stack: `Graphik, ui-sans-serif, system-ui` (workhorse, 3497 uses). **Lyon Display** (serif) is reserved for small eyebrows only. `GTStandard-M` appears once.
- Body: 15px / 19.5px / 400 / `#111111`.
- Preview substitutes: **Inter** for Graphik, **Newsreader** for Lyon Display (both licensed) — noted here so the spec never implies the real faces.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 56 / 49.84 | 400 | -2.24px (-4%) |
| Section label (h2) | 16 / 16 | 500 | +0.8px, UPPERCASE |
| Sub label (h3) | 14 / 15.4 | 500 | +0.7px, UPPERCASE |
| Eyebrow (serif) | 18 / 21.6 | 400 | +0.18px (Lyon Display) |
| Nav | 16 / 24 | 400 | normal (rendered uppercase) |
| Body | 15 / 19.5 | 400 | normal |
| Button | 16 / 18 | 500 | +0.8px, UPPERCASE |

Patterns: display is LIGHT (400) with a line-height below the font size and strong -4% tracking; every small label goes UPPERCASE with POSITIVE tracking (+0.7–0.8px). The only serif is the eyebrow.

## 4. Component Stylings

### Buttons
- **Primary pill (hero CTA)**: bg `#ffffff`, text `#111111`, radius 80px (`--button-radius`), h 50px, 16/500 UPPERCASE +0.8px, 1px border (matches fill). On dark/photo bands.
- **Category pill**: transparent, text `#111111`, radius 80px, h 32px, uppercase +0.8px.
- **Consent / solid (modal)**: bg `#111111`, text white, radius small/0px; outline variant 1px `#111111`.
- **Country picker / text link**: transparent, text `#666666`, radius 0px, h 40px.

### Inputs
- h 45px, bg white, 1px `#cccccc` border, radius 0px (squared). Focus: border `#0038ff` + ring `rgba(0,56,255,.1)`.

### States
| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary pill | white fill / ink | inverts to ink text on scheme fill (`color-btn-scheme-*`) | double ring `#fff 0 0 0 2px, #111 …` | — | opacity / `#b8b8b8` |
| Input | 1px `#cccccc` | — | border `#0038ff` + ring `rgba(0,56,255,.1)` | — | — |
| Swatch | — | — | ring `#275dc5` (focus-visible) | selected outline | — |

### Cards / panels
- White fill, 1px `#cccccc`/`#e2e1e1` hairline, small radius (2–5px) or squared; soft shadows only when floating (`rgba(0,0,0,.24) 0 1px 2px`).

## 5. Layout Principles

- Fluid page margin: `--pagemargin: min(max(15px, 3.125vw), 45px)`; base spacing `--space-md: 15px`.
- Full-bleed photographic/video heroes with text bottom-left; alternating colour-block bands and `#f7f4f1` cream sections.
- Nav: black "AWAY" box wordmark left, centered uppercase category links, red "SALE"; utility icons (wishlist/search/account/cart) right; purple campaign announcement bar above with prev/next arrows.
- Swiper carousels for product collages.

## 6. Depth & Elevation

- Radius scale: **9999px** (dominant, 128×) and **80px** (`--button-radius`) pills · 50% (round icons) · 2px / 5px (cards) · 90px / 28px (large media). Squared 0px on inputs and utility text.
- Borders: 1px `#cccccc` (default), `#e2e1e1`/`#d8d8d8`/`#b8b8b8`, plus 1px `#111111` / `#ffffff` on inverse buttons.
- Elevation: near-flat. Real shadows are soft (`rgba(0,0,0,.24) 0 1px 2px`, `rgba(0,0,0,.07) 0 4px 3px`); the `#fff/#111` double box-shadow is the keyboard focus ring.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| color, background, border, opacity, box-shadow | ~.2–.3s | ease | links, buttons (dominant, 157×) |
| all | 0.3s / 0.2s | ease / ease-in-out | general chrome |
| transform | 0.2s | ease / cubic-bezier(0.4,0,0.2,1) | hovers, carousels |
| **border-radius** | 0.5s | ease | shape morphs |
| width, height | 0.5s | ease | expanding panels |

House tokens: `--transition-fast: .2s ease`, `--transition-medium: .3s ease`. Keyframes observed: `shopify-rotator`/`shopify-dash`/`spin`/`pulse` (loaders), `twinkleA`/`twinkleB` + `starBlink1..5` (seasonal sparkle field), `cartDrawerAtc…SwipeIn/Out` (add-to-cart drawer swipes), `collage-fade-in-up`, `swiper-preloader-spin`. No animation library detected (Swiper carousel present). Ships **2 `prefers-reduced-motion` blocks**.

## 8. Backgrounds, Effects & WebGL

Photography-led, not effect-led — **0 CSS gradients, 0 canvas/WebGL, 0 grain**. 22 raster layers and **6 background videos** carry the atmosphere; backdrop-filter is used lightly (`blur(2px)`). Colour comes entirely from imagery and flat blocked bands.

## 9. Do's and Don'ts

### Do
- Keep chrome monochrome: `#111111` on white, `#666666` secondary, 1px `#cccccc` hairlines.
- Confine saturated colour to full-bleed campaign bands, product imagery and the red SALE label.
- Use Graphik as the workhorse; reserve the Lyon Display serif for small eyebrows only.
- Set the display LIGHT (400) at -4% tracking with line-height below font size.
- Make small labels UPPERCASE with positive tracking (+0.7–0.8px).
- Use 80px / full pills for buttons; square (0px) inputs and text links.
- Let full-bleed photography and video be the background — no gradients.

### Don't
- Don't use band colours as chrome, links, or button fills.
- Don't bold the display or drop the serif into body/UI text.
- Don't add CSS gradients, glows, or heavy shadows — the page is flat and photographic.
- Don't tighten small uppercase labels — they open, not close.
- Don't introduce a third type family or a chrome accent colour.

## 10. Responsive Behavior

- Breakpoints (from stylesheets): 375, 390, 500, 640, 650, 679, 750, 768/769, 1023/1024, 1280, 1440, 1536, 1920px — a dense device-targeted Shopify ladder (min & max pairs).
- Fluid page margin and type; nav collapses to a hamburger + drawer; grids collapse to single/two-column; carousels swipe on touch.
- No dark theme (`darkSchemeBlocks` 0). **5 container queries** and **2 reduced-motion blocks**.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` · Text `#111111` · Muted `#666666` · Border `#cccccc` · Bands `#f1c9d8`/`#585d47`/`#20284c`/`#cf1920`
- Font: `Graphik` (body 15px/400) + `Lyon Display` serif eyebrows · Radius: 80px/full pills, 2–5px cards, 0px inputs · Control height: 45–50px
- Focus: input border `#0038ff` + ring `rgba(0,56,255,.1)` · Button hover: scheme fill inversion

<away_design_language>
Use the Away design language: clean travel-editorial commerce. White `#ffffff` canvas, `#111111` ink, `#666666` secondary, 1px `#cccccc` hairlines — chrome stays strictly monochrome. ALL colour is blocked into full-bleed campaign/product bands: blush `#f1c9d8`, olive `#585d47`, navy `#20284c`, slate `#516676`, sage `#7fa087`, tan `#d7ceb9`, cream `#f7f4f1`, campaign purple `#6a5276`, ocean `#204773`, and red `#cf1920` (the SALE label). Type is Graphik (workhorse) with a Lyon Display SERIF reserved only for small eyebrows; the display is LIGHT weight 400 at 56px with line-height BELOW the font size and -4% tracking, while every small label is UPPERCASE with POSITIVE tracking (+0.7–0.8px). Buttons are fully-rounded pills (`--button-radius: 80px`; 9999px is the most-used radius) — a white pill with ink text on photo bands — while inputs are SQUARE (0px) with a `#0038ff` focus border and `rgba(0,56,255,.1)` ring. Surfaces are near-flat: soft shadows only when floating, structure from hairlines. Motion is a fast `.2–.3s ease` on colour/transform, and even `border-radius` animates (0.5s); atmosphere is full-bleed photography and video, with zero CSS gradients or glows. Feels: clean, editorial, roomy, considered. Avoid: band colours as chrome or links, a bold display, the serif in body text, tightened uppercase labels, CSS gradients or heavy shadows, and a third type family.
</away_design_language>