patagonia.comstyle guide

Logo

On white

On black

On Orange Red

Colour

Avenir Next LT W02 Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”

Elements

No button, link, radius or shadow styles could be read.

Grid

Notes

• ● FineThe title is 33 characters, short enough to show in full in search results.
• ▲ CheckThere is no og:image, so links shared on social media show no picture.
• ▲ CheckThe page doesn’t declare its language (the lang attribute on <html>).
• ▲ CheckNo favicon could be found.

Questions

What font does patagonia.com use?

patagonia.com’s website uses two typefaces: AvenirNextLTW02-Regular (body text), a system font; Avenir Next LT W02 Bold (headings), a system font.

What are patagonia.com’s brand colours?

The main colours on patagonia.com are Orange Red (#EF4923), Off White (#F1F1F1) and Black (#000000).

What colour is patagonia.com’s text and background?

Body text is #000000 on a #F1F1F1 background.

Where is patagonia.com’s logo from?

The logo shown in this guide was found on patagonia.com’s homepage. For official logo files and usage rules, check patagonia.com’s own brand or press page.

Is this patagonia.com’s official style guide?

No. SiteStyleGuide made it from patagonia.com’s public web pages on 27 October 2026, and isn’t affiliated with patagonia.com. Members can refresh a guide after 90 days to pick up changes.

Tokens

/* patagonia.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/patagonia.com) */
:root {
  /* Colours */
  --text: #000000;
  --background: #F1F1F1;
  --colour-off-white: #F1F1F1;
  --colour-black: #000000;
  --colour-orange-red: #EF4923;

  /* Typefaces */
  --font-body: 'AvenirNextLTW02-Regular', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --font-headings: 'Avenir Next LT W02 Bold', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

  /* Type scale */
  --text-body: 16px;
  --leading-body: 1;
  --text-p: 100%;
  --text-small: 100%;
  --text-a: 100%;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 767px;
  --breakpoint-2: 1023px;
  --max-width-1: 790px;
}

{
    "site": "patagonia.com",
    "source": "https://sitestyleguide.com/patagonia.com",
    "text": "#000000",
    "background": "#F1F1F1",
    "colours": [
        {
            "name": "Off White",
            "hex": "#F1F1F1",
            "rgb": [
                241,
                241,
                241
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Orange Red",
            "hex": "#EF4923",
            "rgb": [
                239,
                73,
                35
            ]
        }
    ],
    "fonts": [
        {
            "name": "AvenirNextLTW02-Regular",
            "stack": "\"AvenirNextLTW02-Regular\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Avenir Next LT W02 Bold",
            "stack": "\"Avenir Next LT W02 Bold\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
            "weights": [
                700
            ],
            "source": "System font, or not loaded on this page"
        }
    ]
}

Share

Run patagonia.com?

Add the badge to your site

Link to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.

Copy the code

<a href="https://sitestyleguide.com/patagonia.com" title="patagonia.com style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>