<!-- Generated by ExtractVibe — https://extractvibe.com/brand/patagonia.com -->
<!-- Extracted: 2026-05-03T16:55:45.319Z | Schema: v1 | Quality: 80/100 -->
---
version: alpha
name: "Hang Tight! Routing to checkout..."
description: "A stark, utilitarian interface that prioritizes clarity and function over decoration. The brand communicates a sense of calm efficiency and technical precision, using high-contrast monochrome elements to guide the user without distraction."
colors:
  surface: "#ffffff"
  on-surface: "#000000"
typography:
  headline-lg:
    fontFamily: "Avenir Next LT W02 Bold"
    fontSize: "23px"
    fontWeight: "700"
    lineHeight: "19px"
    letterSpacing: "1.5px"
  headline-md:
    fontFamily: "Avenir Next W02 Light"
    fontSize: "14px"
    fontWeight: "700"
  body-md:
    fontFamily: "AvenirNextLTW02-Medium"
    fontSize: "16px"
    fontWeight: "400"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
---

# Hang Tight! Routing to checkout... — Design System

## Overview

Hang Tight! Routing to checkout... embodies a design philosophy rooted in the archetypes of The Sage and The Creator. This interface is not a playground of vibrant colors or elaborate animations; it is a meticulously crafted environment designed for precision and clarity, akin to the functional elegance of Stripe, Linear, Apple, and Muji. The aesthetic prioritizes an immediate understanding of information and an unhindered path to task completion. Every element serves a direct purpose, eliminating visual noise and cognitive load.

The emotional register is one of calm efficiency and technical precision. The design communicates competence and reliability without needing to overtly state it. It is stark and utilitarian, focusing on what is essential. This is a system built for critical operations, where distraction is detrimental and clarity is paramount. The absence of a primary brand color reinforces this commitment to neutrality and focus, allowing the content and functionality to command full attention.

**Key characteristics:**

- Vibe — minimal, utilitarian, monochrome, functional, clean, direct
- Archetypes — The Sage, The Creator
- Comparable to — Stripe, Linear, Apple, Muji
- Design era — contemporary-minimal
- Emotional tone — calm-efficient
- Target audience — Users seeking frictionless, reliable interactions who value clarity and speed over entertainment or luxury signaling.
- Visual energy — 2/10 (calm/understated)

## Colors

The color philosophy is defined by its deliberate absence of primary color, emphasizing a high-contrast monochrome palette. The surface color, #ffffff, provides a clean, expansive canvas, ensuring maximum legibility and a sense of open clarity. This minimalist approach signals technical precision and an unwavering focus on function. Color is not used for decoration or emotional appeal; it is reserved for highlighting critical information or states, ensuring that any deviation from the monochrome base carries significant meaning.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| background | `#ffffff` | White |
| text | `#000000` | Black |

## Typography

The type system employs AvenirNextLTW02-Medium, Avenir Next LT W02 Bold, Avenir Next W02 Light, and Helvetica to establish a clear and functional hierarchy. Avenir Next's geometric clarity and modern sensibility align with the brand's technical precision, while Helvetica provides a foundational, universally legible alternative. Font weights are strategically applied to differentiate information without resorting to excessive size variations. This approach ensures that textual content is immediately digestible, communicating information with directness and authority, reflecting the Sage's wisdom and the Creator's meticulousness.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| AvenirNextLTW02-Medium | body | self-hosted | 400 |
| Avenir Next LT W02 Bold | heading | self-hosted | 700 |
| Avenir Next W02 Light | heading | self-hosted | 700 |
| Helvetica | body | system | 700 |
| Avenir Next W02 Light | body | self-hosted | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Heading 2 | Avenir Next LT W02 Bold | 23px | 700 | 19px | 1.5px |
| Heading 3 | Avenir Next W02 Light | 14px | 700 | — | — |
| Body | AvenirNextLTW02-Medium | 16px | 400 | — | — |

### Conventions

- Heading case — uppercase

## Layout

- Base spacing unit — `2px`

## Do's and Don'ts

### Do

- Use Avenir Next LT W02 Bold (700) for all headings in uppercase, ensuring strong visual hierarchy.
- Use AvenirNextLTW02-Medium (400) for primary body text to maintain readability and a modern feel.
- Apply a strict monochrome color palette: #ffffff for backgrounds and #000000 for text and primary interactive elements.
- Implement a base spacing unit of 2px for all margins and padding to ensure precise, grid-aligned layouts.
- Use short, imperative phrases for CTAs (e.g., 'Sit tight') to indicate status or action without fluff.
- Avoid all decorative effects: no box-shadows, no gradients, and no border-radius on interactive elements (sharp corners).
- Use Helvetica (700) as a system fallback for headings if Avenir Next is unavailable, maintaining the uppercase convention.
- Keep copy simple and jargon-free, focusing on matter-of-fact communication with rare use of exclamations.

### Don't

- Do not use emojis in any marketing copy or UI text; the brand relies on plain language.
- Do not apply box-shadows or gradients to buttons, cards, or any UI component; maintain a flat design.
- Do not use rounded corners (border-radius > 0) or pill-shaped buttons; keep all shapes sharp and geometric.
- Do not use title case or sentence case for headings; strictly enforce uppercase for all heading levels.
- Do not use serif fonts or light font weights for body text; stick to sans-serif (Avenir/Helvetica) at 400 weight.
- Do not use vibrant or multi-color palettes; avoid any color other than black and white for primary branding.
- Do not use long, descriptive sentences for CTAs; keep action phrases short and imperative.
- Do not use decorative dividers or ornamental icons; rely on spacing and typography for structure.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 6/10 | balanced |
| Playful ↔ Serious | 4/10 | playful |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 5/10 | balanced |
| Technical ↔ Accessible | 7/10 | accessible |

### Copywriting style

- Avg. sentence length — 2 words
- Vocabulary — simple
- Jargon — none
- CTA style — short, imperative phrases indicating status or action
- Rhetorical devices — repetition, imperative

### Sample copy

> Hang Tight!

> Routing to checkout...

> Sit tight

> U.S. & CANADA

> EUROPE

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | png | [link](https://extractvibe.com/api/assets/brands/patagonia.com/logo-0.png) | 80% |

## Sources

- Live brand page — https://extractvibe.com/brand/patagonia.com
- Raw JSON — https://extractvibe.com/api/brand/patagonia.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/patagonia.com/design.md
- Extracted — 2026-05-03T16:55:45.319Z
- Generator — ExtractVibe vv1
- Quality score — 80/100