# Patagonia — DESIGN.md

## Overview
Patagonia's surface reads like a paper field journal that learned to do e-commerce. The canvas is a warm sand-cream (`#f7f3ec`), display uses a heritage serif (Chronicle Display / Hoefler Text feel), and accent moments use a deep alpine red (`#a02530`). The site refuses photography clichés — landscape imagery is always grain-textured, never airbrushed, often featuring real expedition photographers with credits.

## Color
- **Primary:** `#a02530` — Alpine Red
- **Canvas:** `#f7f3ec` — Sand Cream
- **Surface alt:** `#ece4d5` — Warm Bone
- **Ink:** `#1a1a1a` — Charcoal Ink
- **Body:** `#3d3d3a`
- **Hairlines:** `rgba(26,26,26,0.15)` — thin ink-tone borders, often 1px
- **Accent (sustainability):** `#345d3f` — Spruce Green (used only on environmental content)
- **Accent (worn):** `#8b6e44` — Sun-faded Khaki (used on heritage/recycled-materials labels)

## Typography
- **Display:** Chronicle Display / Mercury Display, weight 500-600 (serif), tracking 0, sizes 48-72px hero
- **Body:** Whitney / FF Tisa Sans, weight 400-500, 16-17px base, 1.6 line-height
- **Editorial italic:** Chronicle italic for pull-quotes and field-journal captions

## Spacing & rhythm
4-base (4/8/12/16/24/32/48/72). Section padding 72-96px. Long-form articles use a single 720px reading column, never multi-column. Product grids run 4-up at desktop, 2-up at mobile.

## Motion signature
Almost none. 150ms ease-out fades on link hover and image load. The brand voice is "no spectacle" — animation that draws attention to itself is anti-brand.

## Components observed
- `field-journal-article-card` (serif headline, photo credit, byline)
- `product-card-grid-4up` (square photo on warm bone canvas, hairline border)
- `activist-quote-block` (deep red sidebar bar, serif italic quote)
- `materials-spec-table` (mono-feeling spec table with recycled-content percentages)
- `cta-button-red-fill` (alpine red, square, no radius)
- `repair-story-card` (worn-product photography with multi-year ownership timeline)

## Trademark signals
- Serif display headlines in a sea of athletic-brand geometric sans — Patagonia's distinguishing typographic move
- Photo credits visible on every editorial image — photographer name + location, always
- "Worn Wear" repair stories given the same hero treatment as new products
- Activism content (sue-the-government, save-the-rivers) sits on the same nav level as e-commerce
- Square buttons with no radius — anti-tech, anti-startup geometry

## What they DON'T do
- No airbrushed/perfect outdoor photography — grain and weather are the aesthetic
- No emoji in product copy or microcopy
- No saturated rainbow gradients
- No "limited time" countdown banners or urgency-marketing
- No animated 3D product showcases

## Exemplar pages
- https://www.patagonia.com/home/
- https://www.patagonia.com/stories/
- https://wornwear.patagonia.com/
- https://www.patagonia.com/activism/

## When to reference
Reach for Patagonia when the user needs a heritage outdoor / lifestyle / mission-driven brand surface. The serif-on-sand-cream atmosphere and refusal of digital-marketing tropes make it especially appropriate for brands whose authenticity is the product — sustainable goods, craft food, independent media, conservation-aligned commerce.
