--- version: alpha name: "Patagonia" description: "Patagonia's site is what an outdoor-cooperative looks like when it has been an outdoor-cooperative for 50 years and refuses to look corporate. The canvas is cream `#f6efe1` (warm off-white that recalls field-journal paper), headings sit in Futura Bold (or its in-house geometric variant) at 48–80px, and the brand color is \"Patagonia Red\" `#cd0000` — drawn from the iconic mountain wordmark. Photography is the dominant visual instrument: full-bleed climbing-and-fishing-and-environmental-activism shots at 16:9, color-graded warm. Where REI chose green and North Face chose white-and-black, Patagonia chose cream + red + Futura. Voice is essay-confident: long-form articles about activism, climate, repair-not-replace philosophy alongside the product grid." colors: bg: "#f6efe1" bg-soft: "#fdf9ed" bg-deeper: "#ebe3d0" bg-warm: "#f9f3e3" surface: "#ffffff" surface-soft: "#fbf8ed" surface-deeper: "#ede5d0" brand: "#cd0000" brand-hover: "#a80000" brand-pressed: "#820000" brand-deep: "#5a0000" brand-tint: "#fde0e0" on-brand: "#ffffff" forest: "#3d4a2e" forest-deep: "#293421" forest-soft: "#dde3d4" text: "#1c1c1c" text-strong: "#000000" text-muted: "#5a5a5a" text-soft: "#8a8a8a" text-faint: "#bcbcbc" text-on-brand: "#ffffff" link: "#cd0000" link-hover: "#820000" selected-bg: "#fde0e0" border: "#d8d0bc" border-strong: "#bcb09a" border-soft: "#e8e0c8" border-brand: "#cd0000" amber: "#cb9c45" success: "#3d4a2e" warning: "#cb9c45" danger: "#a80000" info: "#3d4a2e" typography: display: fontFamily: "Futura PT" fontSize: "80px" lineHeight: 1.65 letterSpacing: "-0.02em" body: fontFamily: "Futura PT" fontSize: "16px" lineHeight: 1.65 mono: fontFamily: "SFMono-Regular" rounded: button: "4px" card: "14px" pill: "9999px" spacing: xs: "0px" sm: "4px" md: "12px" lg: "24px" xl: "40px" --- ## Overview ## Overview Patagonia's site is what an outdoor-cooperative looks like when it has been one for 50 years and refuses to look corporate. The canvas is **cream** `#f6efe1` (warm off-white recalling field-journal paper), display headings sit in Futura PT Bold at 48–80px, and the brand color is **Patagonia Red** `#cd0000` — drawn from the iconic mountain wordmark. Body uses Futura at 16px line-height 1.65 (generous editorial); long-form articles use a serif (Patagonia Serif, descended from Georgia) for display only. Photography drives the experience. Full-bleed shots of climbing in Yosemite, fly-fishing in Wyoming, environmental-activism rallies in Patagonia — all color-graded warm-amber, never saturated. Where REI chose green and North Face chose white-and-black, Patagonia chose **cream + red + Futura**. The brand reads as "we're here to outlast you" — patient, principled, slightly old-school. CTAs are 0px-radius rectangular (the brand rejects rounded; cooperative not consumer-tech). Cards have 1-2px radius and hairline borders. Long-form essays threaded through product navigation are unusual — most marketplace brands wouldn't put a 3000-word "Why we self-impose carbon taxes" essay above the product grid, but Patagonia does. **Key Characteristics:** - Cream canvas `#f6efe1` (warm off-white) - Patagonia Red `#cd0000` (the wordmark anchor) - Futura PT Bold for display, Futura for body - 0–2px radius on UI (cooperative-rectangular) - Photography color-graded warm-amber - Long-form activist essays alongside product grid - Forest green `#3d4a2e` as secondary accent - Serif (Patagonia Serif) reserved for editorial article display - Light-only canvas - Patient, principled voice ## Colors ### Primary - **Background** (`#f6efe1`): cream off-white. Never pure white. - **Text** (`#1c1c1c`): body. Soft warm dark gray. - **Text Strong** (`#000000`): emphasized headlines. ### Brand — Patagonia Red - **Brand** (`#cd0000`): primary CTA + wordmark. - **Brand Hover** (`#a80000`), **Pressed** (`#820000`), **Deep** (`#5a0000`). - **Brand Tint** (`#fde0e0`): selection wash. ### Forest (secondary accent) - **Forest** (`#3d4a2e`): muted moss for environmental-content sections. ### Borders - **Border** (`#d8d0bc`): warm cream hairline. - **Border Strong** (`#bcb09a`): emphasis. ### Semantic - success forest, warning amber, danger brand-hover, info forest. ## Typography ### Font Family - **Display**: Futura PT (Paul Renner, 1927). Falls back to Avenir Next → Helvetica Neue. - **Body**: Futura PT regular at 16px line-height 1.65. - **Serif**: Patagonia Serif (Georgia descendant) for editorial display only. ### Hierarchy | Role | Font | Size | Weight | LH | Tracking | |------|------|------|--------|-----|----------| | display-hero | Futura | 80 | 800 | 1.0 | -0.02em | | display-lg | Futura | 48 | 700 | 1.1 | -0.012em | | h1 | Futura | 36 | 700 | 1.15 | -0.008em | | h2 | Futura | 28 | 700 | 1.2 | -0.005em | | eyebrow | Futura | 11 | 700 | 1.2 | 0.20em UPPER | | body | Futura | 16 | 400 | 1.65 | 0 | | label | Futura | 12 | 700 | 1.3 | 0.10em UPPER | | button | Futura | 14 | 700 | 1.0 | 0.08em UPPER | | article-display | Patagonia Serif | 56 | 600 | 1.1 | -0.012em | ### Principles - **Futura PT for everything**, serif reserved for editorial article display. - **Body line-height 1.65** — generous editorial rhythm. - **Mixed case display, UPPER eyebrows + buttons.** - **Heavy tracking on uppercase** (0.08-0.20em). ## Layout - Base 4px, 96-160px between sections (generous editorial) - Page max width 1280px, prose 680px - Hero: full-bleed photography with overlapping headline 30% from bottom - Product grid: 4-up at desktop, 2-up at tablet, 1-up at mobile - Editorial articles in single 680px column mobile <479: hero 80→44; nav hamburger; 1-up grid. tablet: 2-up. desktop+: 4-up. 44×44 min touch targets. Long-form articles use full-width on mobile, prose-width on desktop+. ## Elevation & Depth | Level | Treatment | |-------|-----------| | 1 | `0 2px 8px rgba(28,28,28,0.06)` resting cards | | 2 | `0 4px 16px rgba(28,28,28,0.10)` hover | | 3 | `0 8px 24px rgba(28,28,28,0.14)` featured | | 4 | `0 24px 64px rgba(28,28,28,0.20)` modal | ### Shadow Philosophy Soft, neutral, generous blur. Never colored shadows. ## Shapes | Tier | Value | Use | |------|-------|-----| | None | 0 | **default** for buttons, inputs | | Micro | 1 | hairline indicators | | Standard | 2 | **cards** | | Comfortable | 4 | tooltips | | Pill | 9999 | size + material pills | ## Components ### Buttons (3 variants — 0px radius) **Primary** — Patagonia Red: - bg `#cd0000`, text white, 14px Futura 700 0.08em UPPER - Padding 14×28, **radius 0** (rectangular) - Hover: bg `#a80000` **Secondary** — bordered: - bg transparent, text dark, 1px gray border, radius 0 **Ghost**: bg transparent, text red, padding 10×20. ### Cards - bg white (lifts from cream), 2px radius, padding 24 - 1px soft border + minimal shadow - Used for product grid; editorial articles use no card ### Pills (size + material tags) - bg `surface-deeper`, text dark, pill radius ### Inputs - bg white, 1px border, **radius 0** (rectangular) - Focus: border red ### Navigation - 80px sticky header, cream bg with hairline bottom - Patagonia mountain wordmark left (red), top-level nav center, account + cart right - Standard ease, slower durations (200-480ms) — patient brand pacing - Card hover: shadow lift, no transform - Photography hero: subtle Ken Burns 8-12s - Page transitions: 480ms - text on bg: `#1c1c1c` on `#f6efe1` = **13.6:1** AAA - on-brand on brand: `#ffffff` on `#cd0000` = **5.7:1** AA - 2px Patagonia Red focus ring + 2px outset gap Editorial articles use semantic `
` markup with `