What is The North Face's primary brand color?

The North Face's captured marketing surface runs almost without a chromatic brand voltage. The only saturated color on the entire page is a brick-red #c22014 that fills the country-selector pill at the top of the country-modal overlay (and recurs as a 1px border on the same element). It appears just twice in the captured render — once as background, once as border. Every other surface color is grayscale: charcoal #2a2a2a (the running-text ink and modest background fills), pure white #ffffff (CTA pill fills, headline text on photography), pure black #000000 (1px borders and a small set of pill backgrounds), and three muted graphite tones for footer text and dim chips. The brand voltage is the photography itself, not a hex code.

What typeface does The North Face use, and what should I use as a substitute?

The marketing site runs HelveticaNeue across every spoken tier — display, heading, body, button, nav. Display headlines sit at 32-64px in weight 500, body copy at 16-18px in weight 400, and small labels at 14px in weight 500. A secondary AkkuratMono voice appears only on product-spec strips at 18px / 400 — about 6 instances across the page. Inter at the same weights is a serviceable open-source substitute for HelveticaNeue (the proportions track closely at 16-18px body sizes); for AkkuratMono use JetBrains Mono or Berkeley Mono at the same sizes. Helvetica's tighter aperture is what makes the page read as catalogue-grade rather than dev-tools-grade.

Why does almost everything on the page have a pill radius?

The North Face uses 9999px rounding on 42 of 46 captured radius occurrences — every CTA, every category chip, every product-tile-action button. The remaining values are 2px (rare card corners) and a single 900px outlier. The decision is structural: the pill geometry reads as soft and tappable across both the dark-photograph hero context and the white-product-grid context, with no need to adapt. Where most outdoor retailers split sharp 0-2px corners on cards and rounder 4-8px on CTAs, The North Face commits to pill geometry top-to-bottom and lets the photography supply every other variation. There is no middle 8-12-16px radius tier in the system.

Why is every visible border pure black?

Pure #000000 is the only border tone in the captured chrome — it accounts for 759 of the 763 border occurrences on the page. Every button outline, every product-card edge, every input stroke, every navigation underline uses the same 1px black stroke. The brand does not use a softer hairline gray as a second tier. The decision works because the borders are sparse: in a chrome built on full-bleed photography, the outlined elements are predominantly the pill CTAs (white-fill with 1px black stroke, or black-fill with no stroke). Adding a softer #e0e0e0 hairline as a second border tier would weaken the binary white-pill / black-pill button system the page repeats across every band.

Can I use this DESIGN.md to build my own React outdoor-retail 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 The North Face's specific moves: full-bleed expedition photography as the canvas, a stripped grayscale chrome with a single brick-red voltage held in reserve, pill geometry on every button, and HelveticaNeue across every tier. You can reference tokens directly: every hex, font name, radius, and spacing value is a quoted scalar. The one move worth borrowing only with a serious photography library is the trust-in-image hero — without expedition-grade imagery the chrome reads bare rather than confident, because there is no second chromatic element to carry the page.

The North Face Design System

The North Face's marketing system uses expedition photography as the canvas and strips the chrome to charcoal, white, and a brick-red CTA pill.

About The North Face DESIGN.md

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

E-commerce & Retail

The North Face's marketing surface puts the work on the photography. The above-fold opens with a country-selector modal pinned to a dim charcoal field, then immediately drops the user into a full-bleed expedition image — a teal-jacketed climber pinned against a tan rock face, the headline "Athlete-Tested. Expedition-Proven." overlaid in white sans-serif weight 500 at 40px. Where Patagonia and REI both lean on similar expedition imagery but float their typography over a translucent dark scrim, The North Face places the white display directly on the photograph without any tonal buffer; the contrast is unmediated. Below the photograph, the chrome is binary — a black 9999px-rounded pill ("Shop Women") sits beside a white-stroked pill ("Shop Men"), and the brand returns to a minimal grayscale chrome until the next expedition image takes over.

The page repeats this rhythm — photograph, two-pill CTA strip, photograph, two-pill CTA strip — three more times. A close-up of a yellow expedition sleeping bag with "Open to every body." overlaid; a 3-up product grid of duffel bags rendered against light-gray studio backdrops; an "Upgrade your gear with a brand-new look" banner with a climber pulling on orange gloves. The chrome between bands is so quiet it almost disappears: the only chromatic moment in the entire captured page is a brick-red `#c22014` pill rendered around the "United States" country selector at the very top. No accent color decorates a CTA, no gradient warms a section, no second color of any kind appears in the marketing band.

The DESIGN.md file packages the system into a machine-readable spec. Inside: 12 color tokens (just charcoal, white, pure black, a single brick-red, plus three muted graphite tones); 14 typography tokens running HelveticaNeue from 12px caption to 64px display with AkkuratMono appearing only on product-spec strips; a single-tier pill radius scale (9999px on every button and chip, 2px on a rare card); and 16 component definitions covering the photograph-led hero, the two-pill CTA cluster, the product-grid tile, and the dense top-nav band. The move worth reproducing is the trust-in-photography itself: the chrome only works if the image is strong enough to carry the entire chromatic load.

What makes it distinct

Photography as canvasfull-bleed expedition-athlete imagery carries every above-fold band; the chrome supplies no surface color of its own
Pill-or-nothing radius42 of 46 rounded values on the captured page are 9999px; the system has essentially one corner geometry across every CTA, product tile, and category chip
Black-only borderspure #000000 carries 759 of the 763 border occurrences on the page; there is no second hairline tone in the system
Single brick-red voltage#c22014 appears just once as the country-selector pill fill, the only chromatic moment in a chrome of charcoal, white, and grayscale
AkkuratMono as supporting voice18px mono labels appear on technical product spec rows, the only typographic alternation in an otherwise single-family system

Live at thenorthface.com

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

thenorthface.com

Explore The North Face

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.

The North Face design system FAQ

Common questions about The North Face'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.

The North Face — official site

The North Face'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.