---
name: A Ware At
description: "This site is a prime example of a premium, photography-driven brand that uses classical typography to elevate its athletic identity."
version: alpha

colors:
  background: "#ECE9DF"
  primary: "#000000"
  secondary: "#333333"
  neutral: "#A77A41"
  bg-soft: "#F7F5EE"
  line: "rgba(0,0,0,0.12)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 150px
    lineHeight: 1.0
    fontWeight: 300
    letterSpacing: "-10px"
  heading:
    fontFamily: humanist-sans
    fontSize: 38px
    lineHeight: 1.0
    fontWeight: 300
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "0.3px"

rounded:
  sm: 8px
  md: 12px
  lg: 32px
  pill: 999px

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

---

## Overview

A premium outdoor and athletic brand that leverages bold editorial photography and classical typography to project a sense of natural power and refined quality.

*A premium athletic brand blending raw nature photography with refined, classical typography.*

## Colors

Earthy neutrals and deep blacks, using photography as the primary source of color and visual interest.

- **Background (`#ECE9DF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#333333`)** — uses `ink-soft` token
- **Muted (`#A77A41`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.12)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** humanist-sans
- **Mono:** geometric-mono

- Use wide letter-spacing for uppercase sans-serif labels.
- Use tight tracking for large display serifs.

## Layout

Full-bleed editorial photography with massive typographic overlays.

*Rhythm:* Generous whitespace with a clear 48px base for structural gaps.

## Elevation & Depth

- rgba(172,171,171,0.3) 0px -1px 10px 0px
- Borders: Minimal, mostly borderless with occasional 1px dividers or subtle underlines.

## Shapes

- `sm`: 8px
- `md`: 12px
- `lg`: 32px
- `pill`: 999px

## Components

- **button:** Outlined pill shape with generous padding.
- **card:** Minimalist, often just imagery with overlaid text.
- **hero:** Full-viewport photographic background with oversized serif typography.

## Do's and Don'ts

**Don't:**
- Don't use bright, artificial accent colors — the screenshot relies on natural tones and photography.
- Don't use tight, centered text blocks — the design favors wide, left-aligned or full-bleed typographic compositions.
- Don't use heavy drop shadows or 3D effects — the UI is flat and relies on depth from photography.
- Don't use rounded sans-serif fonts for display — the screenshot features sharp, classical serifs for impact.
- Don't clutter the layout with multiple UI elements — the design is highly spacious and minimalist.
- Don't use complex background patterns — the design uses solid earthy tones or full-bleed imagery.

---

## System Prompt (paste into AI agent)

```
A premium athletic and outdoor e-commerce brand. The layout is dominated by full-bleed, high-contrast photography of athletes in nature. The typography uses massive, tightly tracked transitional serifs for headlines (e.g., 'A-WARE') and clean, wide-spaced sans-serifs for navigation and labels. Key colors include an earthy off-white (#ECE9DF) for backgrounds, deep black (#000000) for ink, and a subtle golden-brown (#A77A41) for accents. Critical donts: never use bright neon colors, avoid cluttered multi-column layouts, and do not use playful or casual typography. The overall feel is editorial, refined, and powerfully natural.
```