# Away · Design system migration spec

> Source: https://www.awaytravel.com  ·  Curated by OpenDesign  ·  en

> The site is a great example of a premium, photo-driven e-commerce brand that balances aspirational imagery with a clean, functional UI.

## 1. Identity DNA

Away operates as a premium, direct-to-consumer travel lifestyle brand, and its design system reflects this positioning with the discipline of a well-considered blueprint. The foundation is a deliberate contrast between stark minimalism and rich photographic content, creating a clean canvas where product imagery becomes the focal point of aspiration.

**One-liner:** A clean, aspirational DTC travel brand that combines high-quality photography with minimalist design.
**Keywords:** travel · luggage · minimalist · aspirational · direct-to-consumer
**Analogy:** a premium, direct-to-consumer travel lifestyle brand

## 2. Color

The color system is defined by restraint, employing a strict trio of white, black, and a soft off-white to ensure chromatic decisions are made solely by photography. This allows vibrant product shots to command attention without competing against a busy interface palette.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F7F4F1` | card background |
| `--ink` | `#111111` | body text |
| `--ink-soft` | `#666666` | secondary text |
| `--muted` | `#D8D8DC` | placeholder |
| `--line` | `rgba(17,17,17,0.1)` | divider |

**Color principle:** Clean and minimal with a focus on high-quality photography and typography.

The principle is clear: the interface recedes to let the product speak.

## 3. Typography

Typography establishes a clear hierarchy through category contrast, pairing the humanist sans-serif Graphik for functional body copy with a transitional serif for commanding headlines. This combination balances approachability with a sense of editorial gravitas, reinforced by the use of uppercase and letter-spacing for navigational labels to create a distinct, structured voice.

- **Display:** transitional-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1px | hero headlines |
| headline | 32px | 1.2 | 500 | -1px | section headlines |
| body | 16px | 1.5 | 400 | 0px | body text |
| label | 12px | 1.4 | 500 | 1px | navigation and labels |

**Type rules:**
- Use 'Graphik' for body and navigation.
- Use a transitional serif for hero headlines.
- Use uppercase and letter-spacing for navigation and small labels.

## 4. Spacing

Spacing follows a strict 4px-based rhythm that builds a quiet, consistent grid for all interface elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px base, 8px minor, 16px standard, 24px major

## 5. Surfaces

Surfaces are treated with understated depth through delicate, semi-transparent shadows and ultra-fine borders that separate content without adding visual weight. The system avoids heavy elevation, relying instead on precise spacing and tonal shifts in the off-white background to define zones.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.06) 0px 2px 2px 0px
  - rgba(0, 0, 0, 0.07) 0px 4px 3px 0px
  - rgba(0, 0, 0, 0.24) 0px 1px 2px 0px
- **Borders:** 1px solid rgba(17,17,17,0.1)

## 6. Layout

The layout skeleton is built on a single, full-bleed hero image that establishes immediate visual impact, followed by content sections with generous white space. This structure enforces a clear vertical hierarchy and prevents visual clutter, guiding the user through a curated narrative.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width hero image, followed by content sections with generous white space.

## 7. Motion & Interaction

Motion is applied as a subtle, functional layer rather than a decorative one, with fade-ins for scroll-revealed content and smooth color transitions for interactive states. The philosophy is to use animation to confirm user action and guide attention with quiet precision, not to entertain.

- **Durations:** micro 200ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle fade-in for content sections on scroll.
  - Smooth color and background-color transitions on hover.

- **Hover:** Subtle color or background-color change.
- **Click:** Immediate visual feedback with a slight scale or color shift.
- **Transition:** All properties transition smoothly over 0.2s with a standard cubic-bezier curve.
- **Keyboard:** Standard focus states with a visible outline.

## 8. Voice & Don'ts

The editorial voice is confident and direct, mirroring the product's promise of streamlined, aspirational travel. Copy is concise, often employing the serif headline for impact and uppercase CTAs for clear direction.

- **Tone:** Confident, aspirational, and direct.
- **Headline style:** Short, impactful, and often uses a serif font for emphasis.
- **CTA style:** Direct and action-oriented, often in uppercase.
- **Avoid:** Cluttered layouts / Overly complex color schemes / Heavy use of decorative elements

### Don'ts
- ❌ Don't use a dark background for primary content areas — the screenshot shows a white (#FFFFFF) background.
- ❌ Don't use a bright, saturated accent color for primary buttons — the screenshot shows black text on a white button with a black border.
- ❌ Don't use a sans-serif font for the main headline — the screenshot shows a transitional serif font for 'Get Away'.
- ❌ Don't use rounded corners on cards or buttons — the screenshot shows sharp, square corners.
- ❌ Don't use a multi-column layout for the main hero — the screenshot shows a single, full-bleed image.
- ❌ Don't use small, dense text in the navigation — the screenshot shows uppercase, spaced-out labels.

This system deliberately excludes dark backgrounds for primary content, bright accent colors, rounded corners, and decorative flourishes to preserve its core identity of clean, photographic minimalism.

## System Prompt (paste into AI tool)

```
Away is a premium, direct-to-consumer travel lifestyle brand. The design is clean and minimalist, focusing on high-quality photography and typography. The primary background color is white (#FFFFFF), with black (#111111) ink. A soft off-white (#F7F4F1) is used for section backgrounds. The typography uses a humanist sans-serif (Graphik) for body and a transitional serif for headlines. Critical donts: Do not use a dark background for main content, do not use a bright accent color for primary buttons, and do not use rounded corners on UI elements.
```