What is Patagonia's primary brand color?

Patagonia's marketing chrome has no chromatic brand voltage. Ink black (#000000) carries every primary CTA, every nav label, every link, every body line, and every hairline; warm white (#ffffff) is the page floor. The brand voltage that other consumer retailers spend on a single saturated accent — Airbnb's Rausch, Lululemon's red, Nike's orange — Patagonia hands entirely to the photography. A climbing image with a red helmet, a thermal-spectrum surf still, a yellow ski jacket against a blue sky: those are the chromatic moments. The chrome around them stays ink-on-white so the photographs read as the brand's voice rather than as decoration.

What typeface does Patagonia use, and what should I use as a substitute?

Patagonia runs Ridgeway Sans across every tier — a proprietary sans-serif Patagonia ships through its CSS variable --pata-font-sans. The body weight is 300 (light), the display weight is 500 (medium); there is no 700+ bold weight on the marketing page. The hero h1 sits at 64px / 500 with -1.28px tracking; section h2 at 32px / 500 with -0.64px tracking; default body at 16px / 300. A second token references Copernicus, a transitional serif in the Palatino family, used for a quiet editorial sub-headline on a single band — the only serif moment in the system. If Ridgeway Sans is unavailable, Inter at the same weights is the closest open-source substitute, with line-heights tightened by ~3% to match Ridgeway's cap height.

Why does Patagonia use warm white instead of pure white?

The page floor reads as warm because Patagonia layers the body content over a near-white #fafafa --bs-light-bg-subtle rather than pure #ffffff in several editorial bands, then drops to pure white inside cards. The two-step warm-floor / white-card pattern lets photo plates pop forward without needing a shadow tier — the lightness gap between fafafa and ffffff is enough lift on its own. Pure-white canvas would make the wilderness photography feel clinical; the warm floor lets the earthy palette of climbing, trail, and surf imagery read as continuous with the chrome rather than fighting against it.

What is Patagonia's corner-radius philosophy?

Tight and split between two clear tiers. Buttons and form inputs sit at 8px (the dominant radius — 49 occurrences across the captured page), pill secondaries and category chips at 30px (19 occurrences), icon avatars at 50% (full circles, 4 occurrences). There is no 12px, 14px, 16px, or 20px middle tier — the scale jumps from 8px square-ish buttons straight to 30px pills. Photo plates on the category grid carry zero radius — they are square edge-to-edge bitmaps, not rounded cards. The absence of a card-radius middle tier is what gives Patagonia's chrome its editorial-magazine feel rather than its app-store feel.

Can I use this DESIGN.md to build my own outdoor-apparel marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Patagonia's specific moves: warm-white canvas, ink-on-white chrome with no chromatic accent, Ridgeway Sans-equivalent typography at weights 300 and 500, 64px display headlines over full-bleed photography, 8px button radius with 30px pill secondaries, and the inverted black footer with white icon rails. You can also reference the tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat: the photography-as-protagonist move requires actual photography of the same caliber — Patagonia commissions wilderness imagery for decades, so a stock-photo retreat into the same monochrome chrome would feel hollow.

Patagonia Design System

Patagonia's marketing system as a DESIGN.md file.

About Patagonia DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source patagonia.com

E-commerce & Retail

Patagonia's marketing site is the rare consumer-retail surface that trusts photography to do almost every visual job. Above the fold, a climber in a red helmet hangs off a granite face under a 64px "New Arrivals" headline; one band down, a thermal-spectrum surf-break image carries "This Is Not a Drill" in the same display tier; below the fold, three category tiles (Climbing, Trail Running, Surfing) are full-bleed photos with the category name laid directly on the image rather than under a rounded card. There is no chromatic brand color anywhere on the chrome. The page runs ink black on warm white, the body weight is a hair-thin 300, and the inverted footer band carries five white pictogram tiles spelling out the brand's commitments — "we guarantee everything we make," "we take responsibility for our impact," "we support causes activism," "we keep your gear going," "we give your profile to the planet."

The DESIGN.md file packages the system into a machine-readable spec. Inside: 9 color tokens drawn from a near-monochrome ink-on-white palette plus the Bootstrap structural neutrals that ship under the Patagonia chrome; 11 typography tokens running Ridgeway Sans (a proprietary sans) at weights 300 and 500, with a single Copernicus serif token reserved for a quiet editorial flourish in the sub-headline tier; 5 corner-radius tokens centered on 8px (buttons) and 30px (pill secondaries); 8 spacing values on a 4px base; and 17 component definitions covering the ink-fill primary button, the pill-outline secondary, full-bleed photo hero, category photo tile, story card, newsletter sign-up, and the inverted black footer with its icon-rail and link grid.

Feed this file to an AI coding tool and it reproduces Patagonia's specific moves: warm-white canvas instead of pure white, ink-black CTAs instead of a brand accent, Ridgeway Sans at 300/500 across every tier, 64px display headlines designed to share a frame with photography, 8px button radius, and the inverted-black footer with white icon rails. The one move worth borrowing only if your product can stand behind it: the absence of any chromatic brand voltage. Patagonia gets away with monochrome chrome because the photography carries the entire emotional register; most consumer brands need at least one electric color moment to compensate for stock-photo realism.

What makes it distinct

Photography as protagonistevery above-the-fold band is a full-bleed climbing, surfing, or trail-running photo with a white headline laid directly over the image, no overlay scrim
Zero chromatic brand voltageink black carries every CTA, link, and nav label; the only color on the marketing surface comes from the imagery itself
Ridgeway Sans at weight 300 for body and 500 for displaythe hero h1 at 64px is the loudest typographic moment, deliberately measured to share the frame with the photo behind it
Inverted black footer bandthe page floor flips from warm white to pure black with five white pictogram tiles (guarantee, responsibility, activism, profile, planet) above the link grid
Tight 8px button radius and 30px pill secondarythere is no soft-rounded card geometry; even category tiles are square photo plates with text beneath rather than rounded cards

Live at patagonia.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

patagonia.com

Explore Patagonia

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Patagonia design system FAQ

Common questions about Patagonia's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Patagonia — official site

Patagonia's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.