Design System
Analysis of Patagonia

A near-monochrome editorial system — white page, true-black ink set airy at 300 weight — where the brand voice lives in pill-shaped buttons and deep slate-and-green outdoor bands.

01 — Foundations

Colour Palette

02 — Foundations

Typography

Brand face is the proprietary Ridgeway Sans; shown here in Work Sans (nearest Google substitute). The signature move is heavy use of the 300 weight — hierarchy comes from size and negative tracking, not boldness.

03 — Components

Button Variants

button-primary
Solid-black pill, 30px radius — the primary action across the store.
button-outline
White pill with a 2px black border — secondary action, often over photography.
pill-filter
Category filter chip — transparent until hovered, then a 2px black ring.
04 — Components

Cards & Surfaces

Image-led product and story cards. Flat at rest (no shadow), lifting to a soft Material-style shadow on hover. White pill badges flag sale or status.

05 — Components

Form Elements

text-input
textarea
06 — Foundations

Spacing Scale

A 4px base unit on a 4 / 8 / 12 / 16 / 24 / 32 / 48 scale, with roomy 72px rhythm between sections.

07 — Foundations

Border Radius

Two languages: restrained 2–8px corners on surfaces, and fully-rounded 30px pills on interactive controls.

08 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. The resting state for nearly every card.
Level 1 — soft multi-layer shadow on card hover and floating badges.
Level 2 — deep 0 20px 50px shadow reserved for overlays and modals.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxCards stack to 1–2 up; pill filters wrap; lede and type ease down modestly.
Tablet768–1023pxProduct / story grids collapse from 4-up to 2-up; gutters tighten.
Laptop1024–1279pxFull 4-up grid returns inside the ~1200px column.
Desktop≥ 1280pxCentered 1200px column with 40px gutters; imagery runs full-bleed.

The system was designed light and roomy, so it stays legible as the column narrows without dramatic breakpoint jumps — type scales gently rather than restructuring.

Membership Tiers

Illustrative only — Patagonia doesn't sell subscriptions; this demonstrates how the system would render priced tiers.

Trail
$0/year
Standard membership with order tracking and Worn Wear access.
  • Free repairs guide
  • Order tracking
  • Worn Wear trade-in
Summit● Most popular
$49/year
For frequent adventurers — priority repairs and early access.
  • Everything in Trail
  • Priority repairs
  • Early access drops
  • Free shipping
Expedition
$99/year
Full-kit support for guides and pro users.
  • Everything in Summit
  • Pro Purchase Program
  • Field gear loans

Order Table

Pattern demo — a dense data table in the Patagonia ink-and-hairline style.

IDItemSizeStatusWhen
#PA-4821Nano Puff JacketMShippedJun 24
#PA-4820Baggies Shorts 5"32ShippedJun 22
#PA-4818Better Sweater FleeceLProcessingJun 21
#PA-4815Black Hole Duffel 55LProcessingJun 19
#PA-4810Capilene Cool Daily TeeSDeliveredJun 15
1–5 of 412
123

Account Forms

Pattern demo — sign-in and account creation in the system's light, hairline-bordered style.

Sign in

Welcome back

OR
Create account

Join Patagonia

OR