---
name: Away
description: "The site is a great example of a premium, photo-driven e-commerce brand that balances aspirational imagery with a clean, functional UI."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#111111"
  secondary: "#666666"
  neutral: "#D8D8DC"
  bg-soft: "#F7F4F1"
  line: "rgba(17,17,17,0.1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  headline:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  label:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.4
    fontWeight: 500
    letterSpacing: "1px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A clean, aspirational DTC travel brand that combines high-quality photography with minimalist design.

*a premium, direct-to-consumer travel lifestyle brand*

## Colors

Clean and minimal with a focus on high-quality photography and typography.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#111111`)** — uses `ink` token
- **Secondary text (`#666666`)** — uses `ink-soft` token
- **Muted (`#D8D8DC`)** — uses `muted` token
- **Borders (`rgba(17,17,17,0.1)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* 4px base, 8px minor, 16px standard, 24px major

## Elevation & Depth

- 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)

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Minimalist, black text on white background with a 1px black border or no border.
- **card:** Simple cards with high-quality photography and minimal text overlays.
- **chip:** Pill-shaped buttons for filters or categories.
- **input:** Clean, underlined or bordered inputs with minimal styling.
- **hero:** Full-bleed photographic hero with large serif or sans-serif headlines and a clear call-to-action.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```