---
version: alpha
name: Away
description: Dual-typeface travel retail where Lyon Display serif handles every dream-worthy headline and Graphik grotesk closes the sale — near-black on white, pill-radius tags, generous editorial whitespace, and photography doing the heavy lifting.

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#fbfbfb"             # near-white card fill, subtle section tint
  surface-warm: "#f5f4f2"        # warm off-white alternate bands

  # Ink / text
  ink: "#111111"                 # near-black headings, body, CTA fill
  ink-secondary: "#666666"       # supporting copy, captions, secondary nav
  ink-muted: "#9fa0a5"           # placeholder text, disabled labels (--color-gray-50)
  on-ink: "#ffffff"              # text / icons on the dark CTA and dark sections

  # Brand accent — Away's visual palette is luggage-forward (tans, greens, slates)
  # The site UI accent is near-black; product color expressions live in imagery
  primary: "#111111"             # CTA fill, active states
  on-primary: "#ffffff"          # text on primary CTA

  # Borders
  border: "#e2e1e1"              # card edges, dividers (rgb 226,225,225)
  border-strong: "#111111"       # active input, outlined button stroke
  border-light: "#cccccc"        # --color-border-light: lighter hairlines

  # Semantic / status
  error: "#ea1e42"               # --color-error: form validation
  error-alt: "#be2119"           # --atlas-text-negative: error text
  success: "#25b900"             # --color-utility-success
  positive: "#366d12"            # --atlas-text-positive: success text
  sale: "#d31b3b"                # --color-red-light: sale price label

  # Focus
  focus-ring: "#275dc5"          # was rgba(39,93,197) — Google format requires hex /* estimated opaque from rgb(39,93,197) */
  focus-tint: "#41a1e6"          # was rgba(65,161,230,0.2) — Google format requires hex /* estimated opaque from --atlas-focus-outline-color */

  # Shadow tints (opaque approximations)
  shadow-soft: "#000000"         # was rgba(0,0,0,0.24) — Google format requires hex
  shadow-ambient: "#000000"      # was rgba(0,0,0,0.07) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Lyon Display, Georgia, Times New Roman, serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 0.85
    letterSpacing: -2.24px
  display:
    fontFamily: "Lyon Display, Georgia, Times New Roman, serif"
    fontSize: 38px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -1px
  heading-editorial:
    fontFamily: "Lyon Display, Georgia, Times New Roman, serif"
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -1.04px
  heading-section:
    fontFamily: "Graphik, Nunito Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Graphik, Nunito Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body-large:
    fontFamily: "Graphik, Nunito Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  body:
    fontFamily: "Graphik, Nunito Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Graphik, Nunito Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: 0.7px
  nav-label:
    fontFamily: "Graphik, Nunito Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: 0.7px
  eyebrow:
    fontFamily: "Graphik, Nunito Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.6px
  caption:
    fontFamily: "Graphik, Nunito Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 60px
  5xl: 96px

rounded:
  none: 0px
  sm: 2px
  md: 5px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    borderColor: "{colors.border-strong}"
    padding: 12px 24px
  button-outline-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px
  button-ghost-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 16px

  card-product:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 0px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    borderColor: "{colors.border}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-strong}"

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  badge-sale:
    backgroundColor: "{colors.sale}"
    textColor: "{colors.on-primary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-label}"
    padding: 16px 24px

  tag:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.pill}"
    padding: 5px 12px
---

# Away Design System

## Overview

Away's site reads like a very well-edited travel magazine that happens to sell luggage. The dominant move is typographic: two licensed custom faces divide responsibility cleanly — **Lyon Display** (a beautiful optical serif with slight italics available) carries every aspirational headline and editorial moment, while **Graphik** (a clean geometric grotesk in Regular and Medium) handles the transactional layer — navigation, button labels, prices, form fields, product names. The canvas is effectively pure white (`{colors.background}`) with near-black ink (`{colors.ink}` at `#111111`), letting product photography — almost always featuring Away's own luggage in its full range of warm camel, midnight, sage, and terracotta colorways — supply the entire color story. The site's UI chrome stays deliberately achromatic so nothing competes with the bag itself.

What separates Away from other DTC retail brands is the editorial seriousness of its typographic scale. Lyon Display at 56px with a compressed 0.85 line-height and -2.24px tracking creates a luxury-magazine-grade hero treatment; the tight leading and negative tracking at large sizes communicate confidence rather than spaciousness. The complementary Graphik layer is all medium-weight, uppercase-tracked labels (`{typography.button-ui}` and `{typography.nav-label}` at 0.7px tracking), a choice that reads as utilitarian without being cold. The interplay between the serif headlines and the tracked grotesk labels is the brand's typographic handshake.

The shape language is minimalist with one notable accent: `{rounded.pill}` (9999px) is used liberally for filter chips, badges, and sale tags — a warm, approachable choice against the otherwise squared-off structure. Images get a subtle 2px radius. Buttons are kept square at `{rounded.none}`, reinforcing their purposeful, non-decorative role. Elevation is largely flat — the primary shadow pattern is a two-ring focus outline (white 2px + dark 4px box-shadow) rather than a drop shadow, which lands beautifully at high contrast.

**Key Characteristics:**
- **Dual-typeface editorial hierarchy** — Lyon Display serif for aspirational headlines, Graphik grotesk for transactional UI; the handoff between them is the brand voice
- Near-black `{colors.ink}` (`#111111`) canvas text with pure white `{colors.background}` — no chromatic UI accent; product photography provides all the color
- Lyon Display at 56px / 0.85 line-height / -2.24px tracking at hero scale — compressed, magazine-confident, not friendly-spacious
- Graphik Medium uppercase at 0.7px tracking for nav, buttons, and eyebrows — systematic, clean, not sterile
- `{rounded.pill}` used for tags, badges, and filter chips — the softness lives here, not in the button
- Buttons are square (`{rounded.none}`) and purposeful — CTAs close the sale; they don't charm
- Product image cards use a minimal 2px radius (`{rounded.sm}`) — barely perceptible, reduces hard-cornered tension
- Double-ring focus outline (white + dark) for high-contrast keyboard accessibility
- Flat elevation philosophy — box shadows appear only on modals/drawers; cards have no resting shadow
- Sale labels use `{colors.sale}` (`#d31b3b`) on pill-radius chips — the one chromatic moment in UI chrome
- 8–10px Tailwind-derived spacing base; generous section rhythm with major bands at `{spacing.5xl}` (96px)
- Photography-forward hero sections — typography sits below or inset on imagery, never competing

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The primary canvas. Pure white across the vast majority of the site.
- **Near-White** (`{colors.surface}`): Barely perceptible card fill and subtle section tint (`#fbfbfb`).
- **Warm Off-White** (`{colors.surface-warm}`): Alternate section bands, soft product-detail backgrounds.

### Ink / Text
- **Near-Black** (`{colors.ink}`): The dominant text and CTA fill. `#111111` — not pure black, just a hair softer.
- **Mid-Gray** (`{colors.ink-secondary}`): Supporting copy, secondary links, caption text.
- **Muted Gray** (`{colors.ink-muted}`): Placeholder text and disabled labels (`--color-gray-50`).

### Brand Accent
- **Near-Black CTA** (`{colors.primary}`): Away's UI accent is achromatic — near-black does the work a brand hue would do. CTAs, active states, focused borders. Product hues live exclusively in photography.

### Borders
- **Divider** (`{colors.border}`): Card edges and section dividers — `#e2e1e1`, warm-neutral rather than cool-gray.
- **Strong Border** (`{colors.border-strong}`): Active inputs, outlined buttons — near-black.
- **Light Hairline** (`{colors.border-light}`): Lighter structural rule (`--color-border-light`).

### Semantic
- **Error** (`{colors.error}`): Form validation (`--color-error`). **Error Text** (`{colors.error-alt}`): Negative state text label.
- **Sale** (`{colors.sale}`): Sale price badge — the only saturated UI color in the system. Reserved strictly for promotional labeling.
- **Success** (`{colors.success}` / `{colors.positive}`): Purchase confirmation and success text.
- **Focus Ring** (`{colors.focus-ring}`): The inner ring of Away's double-ring focus treatment.

### Shadow Tints
- `{colors.shadow-soft}` / `{colors.shadow-ambient}`: Opaque stand-ins for modal drop shadows (originals were `rgba(0,0,0,0.24)` and `rgba(0,0,0,0.07)`).

## Typography

### Font Family
- **Display / Editorial**: `Lyon Display`, with fallbacks `Georgia, Times New Roman, serif`. An optical text serif used exclusively for aspirational headlines and editorial moments. Ships as `LyonDisplay-Regular.woff2` and `LyonDisplay-RegularItalic.woff2`.
- **Primary UI / Body**: `Graphik`, with fallbacks `Nunito Sans, Helvetica Neue, Arial, sans-serif`. A geometric grotesk in two weights — Regular (400) for body text and Medium (500) for labels, buttons, and navigation. Ships self-hosted via Shopify (`Graphik-Regular.woff2`, `Graphik-Medium.woff2`).
- **Weight strategy**: Two-tier. Graphik 400 for reading, Graphik 500 for UI. Lyon Display 400 only — no bold variant used.
- **Transform / tracking**: Nav, buttons, and eyebrows use `text-transform: uppercase` with positive letter-spacing (0.6–0.7px). Body and editorial copy stay sentence-case with default tracking or negative tracking at large scale.

### Hierarchy

The full type scale lives in the `typography:` token block above. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 56px Lyon Display / 0.85 lh / -2.24px — magazine-grade hero headline |
| `display` | 38px Lyon Display / 1.1 lh / -1px — section openers, editorial callouts |
| `heading-editorial` | 26px Lyon Display / 1.0 lh / -1.04px — secondary editorial headlines |
| `heading-section` | 32px Graphik 500 / 1.2 lh — major Graphik section headings |
| `heading-sub` | 24px Graphik 400 / 1.3 lh — sub-section headings, feature copy |
| `body-large` | 18px Graphik 400 / 1.2 lh — feature body paragraphs, product descriptions |
| `body` | 16px Graphik 400 / 1.5 lh — standard body copy |
| `button-ui` | 14px Graphik 500 / uppercase / 0.7px — CTA and button text |
| `nav-label` | 14px Graphik 500 / uppercase / 0.7px — navigation links |
| `eyebrow` | 12px Graphik 500 / uppercase / 0.6px — section markers, badge labels |
| `caption` | 12px Graphik 400 / 1.2 lh — product metadata, helper text |

### Principles
- **The serif sets tone, the grotesk closes the sale**: Lyon Display is never used for CTAs, prices, or navigation — it exists only for headlines that make you want to pack a bag.
- **Uppercase tracking is the grotesk's personality**: Graphik Medium in all-caps at 0.7px tracking reads as purposeful and modern without feeling aggressive.
- **Negative tracking at scale**: Hero display type at -2.24px tracking creates the compressed confidence typical of luxury magazine covers. Body copy uses 0px tracking.
- **Single weight per role**: Lyon Display 400 only; Graphik alternates between 400 (reading) and 500 (UI). No bold (700) anywhere in the system.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. The primary base rhythm is 8px-derived (Tailwind-influenced), with common values at 4, 8, 16, 20, 24, 32px for component internals. Major section gaps run at `{spacing.4xl}` (60px) to `{spacing.5xl}` (96px) — generous breathing room that gives photography the stage it needs.

### Grid & Container
- Max content width: ~1440px, with 1280px as the practical inner-content stop
- Product grids: typically 3–4 columns on desktop, collapsing to 2 then 1 on mobile
- Hero: full-bleed photography with headline inset at lower-left or centred below the image fold
- Full-bleed editorial sections alternate with constrained product-grid bands

### Whitespace Philosophy
- **Photography-forward structure**: large sections of negative space frame the imagery; chrome recedes
- **Editorial breathing**: section padding at 60–96px lets each story chapter feel distinct
- **Product-grid precision**: consistent gutters between product tiles; cards never touch

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, optional `1px {colors.border}` | Default state — nearly the entire site |
| Hairline (Level 1) | `1px solid {colors.border}` | Card edges, section dividers |
| Subtle Drop (Level 2) | `rgba(0,0,0,0.24) 0px 1px 2px` (`{colors.shadow-soft}`) | Popovers, tooltips, small overlays |
| Card Shadow (Level 3) | `rgba(0,0,0,0.07) 0px 4px 3px, rgba(0,0,0,0.06) 0px 2px 2px` (`{colors.shadow-ambient}`) | Shopping drawers, modal sheets |
| Focus Ring | `0px 0px 0px 2px white, 0px 0px 0px 4px {colors.ink}` | Keyboard focus — double-ring high-contrast pattern |

**Shadow Philosophy**: Away is essentially flat. Products and photography do the visual work; elevation is reserved for transient UI (drawers, overlays). The standout interaction-design choice is the double-ring focus treatment — a white inner ring plus a near-black outer ring — which achieves WCAG-grade keyboard visibility without introducing a colored glow that would clash with the photography-heavy layout.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, input fields, content sections — the structural default |
| `sm` | 2px | Product photography cards — a barely-perceptible softening |
| `md` | 5px | Minor UI containers, nested groupings |
| `pill` | 9999px | Filter chips, badges, sale tags, color-swatch selectors |

The radius strategy is binary in character: nearly everything is square (`{rounded.none}`) and all tags/chips are fully rounded (`{rounded.pill}`). The intermediate values are minor utilities, not a graduated scale. Buttons are kept square as a deliberate brand signal — this is commerce, not confection.

## Components

The complete component spec lives in the `components:` token block above.

### Button Variants
- **`button-primary`** — Near-black (`{colors.primary}`) fill, white text, `{rounded.none}` radius, `12px 24px` padding, `{typography.button-ui}` uppercase tracking. The main CTA. No border; hover deepens to pure `{colors.ink}`.
- **`button-outline`** — White fill, near-black text, `1px {colors.border-strong}` outline, `{rounded.none}`. Secondary action; hover fills to near-black inverse.
- **`button-ghost`** — Bare uppercase link, no background, no border, `0px` padding. Tertiary inline action.

### Cards
- **`card`** — White surface, `{rounded.sm}` (2px), optional hairline `{colors.border}`, no resting shadow.
- **`card-product`** — Image-first layout with typography below; 2px radius matches image tile; no internal padding.

### Inputs
- **`input`** — White fill, `1px {colors.border}` at rest, `{rounded.none}`, `12px 16px` padding. On focus: border sharpens to `{colors.border-strong}` (near-black); no glow.

### Badges & Tags
- **`badge`** — `{rounded.pill}` chip in near-white fill; uppercase 12px Graphik 500 label. Used for feature callouts, collection markers.
- **`badge-sale`** — Same pill geometry in `{colors.sale}` (red fill); the only saturated color in UI chrome. Appears on product cards for sale items.
- **`tag`** — Pill-radius filter chips in the color-selector and category-filter row.

### Navigation
- **`nav-bar`** — White background, near-black wordmark, uppercase Graphik Medium nav links at 14px/0.7px tracking. Stays visible on scroll; transitions opacity on hero overlap.

## Do's and Don'ts

### Do
- Use Lyon Display for every editorial headline — it is the brand's aspiration voice; swap to Graphik only when the copy is transactional
- Keep buttons square (`{rounded.none}`) — the pill radius is reserved for tags and chips, not CTAs
- Use `{rounded.pill}` freely for filter chips, color swatches, and badge labels — that curvature signals interactivity and categorization
- Set all button and nav labels in Graphik Medium uppercase with 0.7px tracking (`{typography.button-ui}`)
- Apply negative tracking at display scale — `-2.24px` at `{typography.display-hero}`, `-1px` at `{typography.display}`
- Keep the canvas white (`{colors.background}`) and let product photography supply the color palette
- Use the double-ring focus treatment (white 2px inner + near-black 4px outer) for all focusable elements
- Reserve `{colors.sale}` exclusively for sale price labels — its rarity preserves the signal
- Use Lyon Display for editorial headings at 26–56px only; never for body, labels, buttons, or captions

### Don't
- Don't use Lyon Display for body copy, button labels, or navigation — the serif belongs to editorial moments only
- Don't add UI accent colors to buttons, icons, or text links — near-black is the only accent; product images provide all chromatic interest
- Don't round buttons or input fields — `{rounded.pill}` on a CTA flattens Away's editorial seriousness into generic friendly retail
- Don't introduce gradients on surfaces or overlays — the system is solid-tint only
- Don't apply positive tracking to Lyon Display headlines — the negative tracking is the luxury signal; positive tracking at display sizes softens the brand incorrectly
- Don't use resting card drop shadows — the site is flat; elevation is reserved for overlay/transient UI only
- Don't set nav labels or button copy in sentence case — uppercase tracked Graphik Medium is the UI voice
- Don't mix Graphik weights beyond Regular and Medium — Bold (700) is absent from the Away design system

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <390px | Single-column; hero headline scales down; nav collapses to burger |
| Mobile | 390–767px | Single-column product grid; full-bleed hero photography; compact spacing |
| Tablet | 768–1023px | Two-column product grids begin; hero text inset shifts layout |
| Desktop | 1024–1279px | Full horizontal nav; 3–4 column product grids; section layout unlocks |
| Large Desktop | ≥1280px | Max container ~1440px; photography can go full-bleed edge-to-edge |

### Touch Targets
- Primary buttons use `12px 24px` padding — comfortable tap height
- Nav links carry Graphik Medium 14px at adequate touch height via container padding
- Color swatch selectors are pill-radius circular chips with 40px+ tap radius
- Product cards: entire card is tappable, not just the CTA

### Collapsing Strategy
- **Navigation**: full horizontal bar → hamburger drawer on mobile; wordmark stays center
- **Product grids**: 4-col → 3-col → 2-col → 1-col as viewport narrows
- **Hero typography**: Lyon Display headline scale steps from 56px → ~32px on mobile; tight leading preserved
- **Section spacing**: major bands compress from 96px toward 48px; component internals stay stable

### Image Behavior
- Product photography is the central design element — always full-width at mobile, gridded on desktop
- Hero images use `object-fit: cover` with aspect ratios locked via padding percentages
- Product tile images maintain 3:4 or 1:1 aspect ratios across all viewports
- 2px image card radius is preserved at all breakpoints

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Primary text: Near-Black (`{colors.ink}`)
- CTA: Near-Black fill (`{colors.primary}`), White text (`{colors.on-primary}`)
- Secondary text: Mid-Gray (`{colors.ink-secondary}`)
- Dividers/borders: `{colors.border}`
- Sale accent: `{colors.sale}` (red pill label — use sparingly)

### Example Component Prompts

- "Create a hero section: full-bleed travel photography behind it; Lyon Display (`{typography.display-hero}`, 56px, weight 400, line-height 0.85, letter-spacing -2.24px) headline in `{colors.ink}` over white lower region; one black CTA below — `{colors.primary}` fill, `{colors.on-primary}` text, `{rounded.none}` radius, `12px 24px` padding, `{typography.button-ui}` uppercase 0.7px tracking"
- "Build a product card: white (`{colors.background}`) surface, `{rounded.sm}` (2px) image tile, no resting shadow. Below image: 14px Graphik Medium product name in `{colors.ink}`, 14px Graphik Regular price in `{colors.ink-secondary}`. If sale, add a `{colors.sale}` pill badge (`{rounded.pill}`, `{typography.eyebrow}`) top-left of image."
- "Design a primary button: `{colors.primary}` fill, `{colors.on-primary}` text, `{typography.button-ui}` (14px Graphik Medium, uppercase, 0.7px tracking), `{rounded.none}` radius, `12px 24px` padding. Hover deepens to `{colors.ink}`. Focus: double-ring — 2px white inner + 4px `{colors.ink}` outer box-shadow."
- "Create a filter chip row: `{rounded.pill}` tags in `{colors.surface}` fill, `{colors.ink-secondary}` text, `{typography.eyebrow}` (12px Graphik 500, uppercase, 0.6px tracking), `5px 12px` padding. Active state: `{colors.ink}` fill, `{colors.on-primary}` text."
- "Design a navigation bar: `{colors.background}` fill, Away wordmark centered, Graphik Medium 14px uppercase 0.7px nav links (`{typography.nav-label}`) in `{colors.ink}`, right-aligned cart/account icons. On scroll: slight border-bottom `1px {colors.border}`. Mobile: collapse to hamburger burger drawer."

### Iteration Guide

1. Start on pure white (`{colors.background}`). Every off-white or cream tint is a minor surface variant — resist warming the canvas.
2. Use Lyon Display only for editorial headlines at 26–56px. If the copy is a label, button, price, or navigation item, it belongs in Graphik Medium.
3. Apply negative tracking to Lyon Display display text: `-2.24px` at hero, `-1px` at section level. Don't loosen it.
4. Set all UI text (nav, buttons, badges) in Graphik Medium uppercase with 0.7px tracking. Sentence-case UI breaks the brand voice.
5. Keep buttons square (`{rounded.none}`). Pill radius lives on tags and chips only.
6. The only saturated UI color is `{colors.sale}` — used exclusively for sale labels. Everything else is near-black or near-white.
7. Focus states use the double-ring pattern: `box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px {colors.ink}`.
8. Product photography supplies the entire color narrative. Don't add illustrated icons, gradients, or decorative backgrounds that compete with it.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Away. Brand names and trademarks belong to their respective owners.