Patagonia

Overview

Patagonia embodies **Authentic Minimalism**—a design philosophy that strips away ornament to reveal purpose. The brand serves outdoor athletes and environmentally conscious consumers who value substance over style. The visual language is deliberately restrained: a clean white canvas (rgb(255, 255, 255)), deep navy primary (rgb(27, 43, 121)), and strategic use of accent reds (rgb(225, 0, 0)) and greens (rgb(50, 182, 122)) that signal action, urgency, and environmental commitment. The UI evokes clarity and directness—like a topographic map or a climbing route: every element has a reason, every color carries meaning.

The brand voice is grounded, unpretentious, and activist-minded. Patagonia speaks with the authority of someone who has climbed the mountain, not someone selling the climbing gear. Vocabulary is precise and honest—no hyperbole, no marketing fluff. The tone is conversational yet authoritative, urgent yet calm. Example sentence: "We make the best products we can, and we tell you the truth about them." This is a brand that leads with values, not features.

Colors

The Patagonia color system is built on **Purposeful Contrast**. The primary color—Deep Navy (#1b2b79, rgb(27, 43, 121))—anchors the brand identity and appears on CTAs, navigation, and interactive focus states. It conveys trust, stability, and the depth of the ocean and mountains. The secondary accent—Signal Red (#e10000, rgb(225, 0, 0))—is reserved for sale badges, urgent messaging, and error states; it demands attention without overwhelming. Tertiary Green (#32b67a, rgb(50, 182, 122)) represents sustainability and environmental commitment, used sparingly on eco-friendly product tags and activism callouts.

The surface stack is deliberately neutral: pure white (#ffffff) for primary surfaces, with a shallow gradient into grays (#f5f5f5 for surface-dim, #d8d8d8 for surface-container-highest)

Typography

Patagonia's type system uses **Ridgeway Sans** exclusively—a geometric, humanist sans-serif that balances technical precision with warmth. The hierarchy spans from Display (64px, fontWeight 500, lineHeight 72px) for hero headlines down to Label-sm (11px, fontWeight 500) for metadata. The system avoids extreme weights: body text uses fontWeight 400 (regular) for readability, while headings and labels use fontWeight 500 (medium) to create hierarchy without harshness. Letter-spacing is minimal and negative on large sizes (display: -0.02em) to tighten the visual mass, while small labels receive +0.02em to improve legibility at 11–12px. Line-height is generous (1.5x on body text, 1.75x on display) to support outdoor-focused users reading on mobile devices in variable lighting. Apply text-shadow

Layout

Patagonia uses a **12-column fluid grid** with a max-width of 1280px (container-max-width: 1280px). The gutter is 24px on desktop, reducing to 16px on tablet and 12px on mobile. Sections are separated using lg spacing (40px) on mobile, scaling to 64px on desktop, creating a rhythm that feels spacious without being wasteful. The primary navigation occupies a fixed 112px height (--pat-primary-nav-height: 112px) plus a secondary nav bar at 48px, totaling 160px of reserved space. Content areas use md spacing (24px) for internal padding, with card-to-card gaps of 24px on mobile and 40px on desktop. The design favors full-width hero sections (100vw) that break the container to create visual drama, followed by contained content sections that respect the 1280px max-width. White-space is treated as

Elevation & Depth

Patagonia's depth system is **Subtle and Functional**, avoiding the heavy shadows common in e-commerce. The elevation stack uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor separations like input borders and list-item hover states; md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and modals that need to lift slightly off the page; and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for full-screen modals and floating action elements. The sticky navigation applies a composite shadow—0 4px 5px rgba(0, 0, 0, 0.14), 0 1px 10px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.20)—only when pinned (is-

Shapes

Patagonia employs **Functional Geometry**—shapes are chosen for usability and brand recognition, not decoration. Buttons use full border-radius (9999px, borderRadius: 30px in computed styles) to create soft, approachable pill shapes that feel modern and friendly; this is the signature CTA shape across the site. Cards and containers use moderate radius (8px, borderRadius: 8px) to soften corners without appearing playful—a balance between technical precision and human warmth. Input fields use the same 8px radius for visual consistency. Small interactive elements (icon buttons, close buttons) use

Components

Action Elements Buttons follow a three-tier system: **Primary** (background: #1b2b79, color: #ffffff, borderRadius: 30px, padding: 10px 24px, height: 40px, fontWeight: 500) for main CTAs like "Men's Sale" and "Women's Sale"; **Secondary** (background: #e8e8e8, color: #000000, border: 1px solid #cccccc, borderRadius: 30px) for alternative actions like "Change Preferences"; and **Ghost** (background: transparent, color: #1b2b79, borderRadius: 30px) for tertiary links. All buttons transition on hover using cubic-bezier(0.265, 0.035, 0.205, 0.995) over 200ms. Primary buttons darken to #0f1f5c on hover and receive a 3px solid outline (#91abe9) on focus, with 2px outlineOffset. Secondary buttons lighten to #d8d8d8 on hover. Ghost buttons gain a background of #f5f5f5 on hover.

Containers

Do's and Don'ts

**Do**

• Do use Deep Navy (#1b2b79) as the primary accent on all CTAs, focus states, and brand-critical interactive elements—it is the signature color that users associate with Patagonia's authority.
• Do maintain generous white-space around content, especially around product images and hero sections, to convey quality and intentionality.
• Do apply the full 30px border-radius (9999px) to all primary buttons and CTAs—this is the brand's signature shape and signals approachability.
• Do use Signal Red (#e10000) sparingly and only for urgent messaging (sale badges, error states, activism callouts) to preserve its impact.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to white text overlaid on photographic backgrounds to ensure legibility and contrast.
• Do use Ridgeway Sans exclusively for all typography—it is the brand's voice and should never be substituted with system fonts or alternatives.

**Don't**

• Don't use heavy shadows (box-shadow > 0 8px 24px) on standard cards or containers—Patagonia's elevation system is subtle and functional, not dramatic.
• Don't apply border-radius < 8px to cards or standard containers; use 8px as the minimum to maintain the brand's soft, approachable aesthetic.
• Don't use the secondary red (#e10000) on non-urgent elements or as a general accent color—it is reserved for sale badges, errors, and activism messaging.
• Don't reduce line-height below 1.5x on body text or 1.75x on display text; generous line-height is essential for readability on outdoor-use mobile devices.
• Don't apply blur effects, glassmorphism, or transparency overlays to the main content area—Patagonia's design is clear and direct, not atmospheric or decorative.
• Don't use fontWeight > 600 on any typography; the system maxes out at fontWeight 500 (medium) to avoid heaviness and maintain legibility.