Utilitarian and photograph-led: a plain white canvas with black type in the brand grotesque Ridgeway Sans (one family throughout), 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.
Browse Patagonia in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
| 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 |
| 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.
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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.