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 ink on white, #666666 secondary, 1px #cccccc hairlines), so a pink #f1c9d8, olive #585d47 or navy #20284c band reads as an event; the full captured set spans slate, sage, tan, campaign purple, ocean blue and a red #cf1920 that is only ever the SALE label. Three signatures carry it: the workhorse is Graphik with a Lyon Display SERIF reserved purely for tiny eyebrows; the display is LIGHT weight 400 at 56px with a line-height BELOW the font size and -4% tracking, while every small label is UPPERCASE with POSITIVE tracking (+0.7 to 0.8px); and the primary radius is an 80px pill (9999px is the single most-used radius) where even border-radius animates over 0.5s. Inputs stay squared at 0px with a blue #0038ff focus border and a rgba(0,56,255,.1) ring. Surfaces are near-flat with soft shadows only when floating; the atmosphere is photography and video rather than any CSS gradient, of which there are none. Motion is a fast .2 to .3s ease on colour and transform, with a seasonal starBlink sparkle field among the keyframes.
⚠ site only
Browse Away in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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'scolor-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,#111111ink,#666666muted) 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: 80pxpill (9999px is the single most-used radius, 128×), andborder-radiusitself animates (0.5s ease).
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.
| 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 |
| 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 |
| 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.
Graphik, ui-sans-serif, system-ui (workhorse, 3497 uses). Lyon Display (serif) is reserved for small eyebrows only. GTStandard-M appears once.#111111.| 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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.