The visual approach
Patagonia's homepage sits on background-primary: #FAF9F6—not stark white, not cream, just barely warmed linen. It's the color of unbleached cotton, and it does two things at once: it signals natural materials without saying a word, and it drops contrast just enough that black type (text-primary: #000000) feels softer than it would on #FFFFFF. The border system follows the same logic. border-default: #DCDCDC is gray enough to structure space, light enough to vanish when you're not looking for it.
The type system mixes Georgia for headings and Helvetica Neue for body copy. Georgia at heading-xl (44px, 700 weight, 1.2 line-height) anchors the hero. It's a serif with roots in newspaper design, chosen for legibility at small sizes but used here at scale. The effect is editorial without being precious. Smaller headings drop to heading-sm at 14px bold—compact, all-caps in practice, functioning more like category labels than display type. Body text runs at body-lg (16px) and body-md (14px), both set at 400 weight with generous line-height (1.6). There's no attempt to make the sans-serif feel warmer or more branded. It's Helvetica Neue because Helvetica Neue works.
The layout is static and centered. No parallax, no scroll-jacking, no staggered reveals tied to viewport position. The spacing system—space-sm (16px), space-md (24px), space-lg (32px), space-xl (48px)—creates rhythm through doubling, not through bespoke tweaks per breakpoint. Components are named plainly: nav, hero, footer. The vocabulary reflects the structure. There's no "masthead" or "value prop zone." It's a homepage that could be drawn on a whiteboard in three rectangles.
What works
The motion design stays out of the way. Page transitions run at 300ms ease-in-out, a fade that reads as a cut rather than an event. When content loads, headings fade in first (opacity 0→1, 300ms ease-out) followed by body copy with a 100ms stagger. Total choreography clocks in under 500ms, fast enough that most users won't consciously register the sequencing. It's not trying to impress you. It's trying not to interrupt you.
Link hovers are equally restrained: 200ms ease-out underline draw or a muted color shift. The logo, if interactive, shifts to 70% opacity on hover over 250ms. These are the kinds of transitions that only get noticed when they're missing. Patagonia has tuned them to the threshold where polish becomes invisible.
The off-white background does more work than it should. #FAF9F6 is warm enough to feel considered, neutral enough to recede behind photography of mountains and rivers and people in technical fleece. It doesn't compete. It also means the brand can use true white (#FFFFFF) as an accent—for cards, for overlays—without needing to introduce a new color. The restraint in the palette creates optionality downstream.
Typography scale is compressed compared to most e-commerce sites. heading-xl at 44px is smaller than the 60–80px display sizes you'd see on a DTC brand launched in the last three years. The choice makes sense for a brand selling function over aspiration. Patagonia doesn't need to yell. The product photography and the decades of reputation do that work.
What a builder can borrow
Start with an off-white default background if your brand leans toward natural, analog, or craft positioning. Pure white reads as clinical or software-native. #FAF9F6 or similar (F5F5F0, FAF8F5) signals texture without requiring texture. Pair it with a single neutral border color in the low #D range and you have a system that works across light and dark content.
Use a compressed type scale if you're not selling urgency. Most design systems over-index on display sizes because they're optimized for landing pages that need to convert in three seconds. If your product has a longer consideration window—technical gear, furniture, tools—consider capping your largest heading at 44–48px and spending your scale budget on readable body sizes (16px minimum) with line-heights above 1.5.
Set a motion budget and stick to it. Patagonia's transitions all run between 200–300ms, with easing curves that favor ease-out (fast start, slow finish). The 100ms stagger between heading and body is just perceptible. If you're adding sequential animations, keep the total duration under 500ms or users will feel the wait. Anything longer needs to justify itself as branded storytelling, not interface feedback.
Adopt a doubling spacing scale (16, 24, 32, 48) if you're working without a design system library. It's simple enough to hold in memory, flexible enough to handle most layouts, and it prevents the kind of 7px tweaks that proliferate when designers eyeball spacing. Patagonia's scale stops at 48px, which tells you something: they're not building hero sections that need 120px of padding. The content is the structure.
Name your components for what they are, not what they do. "Hero" is clearer than "attention-capture-module." "Nav" beats "primary-navigation-shell." The discipline of plain naming forces you to question whether a component is actually necessary, or whether you're wrapping a div in a metaphor.