# Patagonia — Marketing Site Design Spec > Source: patagonia.com (live DOM, computed styles), 2026-07-25 (desktop 1512px). > Coverage: home. Account: `needs-dashboard`. Responsive: breakpoints not captured. Motion: restrained; not captured in detail. ## 1. Visual Theme & Atmosphere Patagonia's site is utilitarian and photograph-led: a plain white canvas, black type in the brand grotesque (Ridgeway Sans), and full-bleed documentary outdoor photography that carries all the colour and emotion. The chrome itself is almost monochrome — black and white with a few earthy brand hues (forest green, slate navy, an alert red/orange) that appear only in editorial blocks and sale flags, never as decorative accents. Controls are fully rounded black or white pills; cards sit at a modest 8px radius with barely-there shadows. Type is tight and confident (headlines at ~-2% tracking) but the navigation runs light (weight 300), keeping the interface quiet so the imagery and the activism messaging lead. Feels: rugged, utilitarian, photographic, earnest. ## 2. Color Palette & Roles ### Neutrals | Token | Hex | Role / usage | |---|---|---| | black | `#000000` | Primary text, headlines, primary button | | gray-600 | `#555555` | Secondary text | | gray-550 | `#4a4a4a` | Strong secondary text | | gray-500 | `#656565` | Tertiary text | | gray-300 | `#cccccc` | Borders / disabled | | gray-100 | `#f5f5f5` | Search field / light inset | | white | `#ffffff` | Canvas, cards, secondary button | ### Brand / accent (editorial only) | Token | Hex | Role / usage | |---|---|---| | forest green | `#468254` | Environmental/editorial section blocks | | slate navy | `#27455c` | Editorial section blocks | | orange | `#fa4616` | Alert / highlight | | sale red | `#e10000` | Sale pricing | | link blue | `#007aff` | Inline links | Rule: chrome is black/white; colour lives in photography and editorial blocks, not in decorative UI. ## 3. Typography Rules - `Ridgeway Sans` — Patagonia's custom grotesque; the single family across the whole site. | Role | Size/Line | Weight | Tracking | |---|---|---|---| | Hero display (h1) | 64 / — | 500 | -1.28px (-2%) | | Section headline (h2) | 40–48 / 44–53 | 500 | -0.8 to -0.96px (-2%) | | Body | 14 / 20 | 300–400 | normal | | Nav / utility | 16 / 24 | 300 | normal | | Button | 16 | 500 | normal | Patterns: headlines are large with tight negative tracking (~-2%) at a medium 500 weight; navigation and body run LIGHT (300). One family only. ## 4. Component Stylings ### Buttons — rounded pills - **Primary**: bg black `#000000`, text white, radius `30px` (pill), height `41px`, padding `9px 28px`, Ridgeway 16px/500, 2px transparent border. - **Secondary**: bg white `#ffffff`, text black, radius `30px` pill, same size (border/outline in context). ### Search - Pill field, bg `#f5f5f5`, radius `40px`, gray text, leading magnifier icon. ### Cards / tiles - Image tiles at radius `8px`; barely-there shadow `color(srgb 0 0 0/.14) 0 4px 5px` where present; captions in Ridgeway. ### Nav - Utility bar (Activism, Stories, Worn Wear · Free Shipping · Find a Store) over a white header: black "patagonia" mountain wordmark, main nav (Featured, Men's, Women's, Kids', Packs & Gear, Food & Beer, Sports) in 16px/300, search + heart/account/bag icons. ## 5. Layout Principles - Full-bleed documentary photography heroes with a black (or white) Ridgeway headline, short sub, and a single pill CTA — the defining element. - White canvas with generous space; editorial/activism blocks in forest green or slate navy for contrast. - Product/category grids of 8px-radius image tiles. - Body content ~14px, tight and dense but calm. ## 6. Depth & Elevation - Radii: `8px` (cards/tiles), `30px` (pill buttons), `40px` (search), small `2–4px` on minor elements. - Elevation: flat and photo-led; only a subtle card shadow `color(srgb 0 0 0/.14) 0 4px 5px` appears (dropdowns/cards). - Structure comes from photography, whitespace and the pill controls, not heavy shadows. ## 7. Motion - Restrained; slideshow/crossfade on hero imagery. Exact durations/easings not captured. Nothing flashy. ## 8. Backgrounds, Effects & WebGL - Full-bleed documentary **outdoor photography** as heroes and category tiles — the primary source of colour and mood. - Solid editorial colour blocks (forest green `#468254`, slate navy `#27455c`) for activism/environmental sections. - No CSS gradients (beyond image overlays), canvas or WebGL. Flat, image-led surfaces. ## 9. Do's and Don'ts ### Do - Lead with full-bleed documentary outdoor photography; let it carry the colour. - Keep chrome black on white; use one family (Ridgeway Sans) throughout. - Set headlines large at weight 500 with tight ~-2% tracking; keep nav and body LIGHT (300). - Make buttons fully-rounded pills — black primary, white secondary, 41px tall. - Use 8px radius on image tiles with only a whisper of shadow. - Reserve earthy brand hues (forest green, slate navy, alert red/orange) for editorial and sale contexts. ### Don't - Don't add decorative colour to the chrome — colour belongs in photography and editorial blocks. - Don't introduce a second type family or heavy bold weights (max 500). - Don't use square/sharp buttons — controls are pills. - Don't rely on heavy shadows for depth; the surface is flat and photo-led. - Don't crowd out the imagery with dense UI. ## 10. Responsive Behavior - Not captured (desktop 1512px only). A search/hamburger pattern and cookie/consent modal are present. ## 11. Agent Prompt Guide Quick token reference: - Canvas `#ffffff` · Text `#000000` · Muted `#555555` · Field `#f5f5f5` · Link `#007aff` · Editorial green `#468254` / navy `#27455c` - Font: `Ridgeway Sans` (one family) · Body 14px · Headlines 40–64/500 at ~-2% tracking · Radius 8px card / 30px pill · Button height 41px - Buttons: black `#000` pill (primary) / white pill (secondary), Ridgeway 16/500 · Flat, photo-led, subtle card shadow only Use the Patagonia design language: a plain white canvas with black type in the brand grotesque Ridgeway Sans (one family everywhere), where full-bleed documentary outdoor photography carries all the colour and emotion. Headlines are large and confident at weight 500 with tight ~-2% tracking (hero 64px, sections 40–48px), while navigation and 14px body run LIGHT at weight 300. Controls are fully-rounded pills — a black `#000` primary and a white secondary, 41px tall, radius 30px, Ridgeway 16/500 — and image tiles sit at 8px radius with only a whisper of shadow (`color(srgb 0 0 0/.14) 0 4px 5px`); the surface is otherwise flat and photo-led. Chrome stays black/white; earthy brand hues (forest green `#468254`, slate navy `#27455c`, alert orange `#fa4616`/red `#e10000`, link blue `#007aff`) appear only in editorial/activism blocks and sale flags, never as decorative accents. Feels: rugged, utilitarian, photographic, earnest. Avoid: decorative colour in the chrome, a second type family or bold weights above 500, square buttons, and heavy shadows in place of photography and whitespace.