The North Face Design System

Overview

The North Face's marketing surface trusts photography to carry the page. Image-as-canvas. Every above-fold band on the captured page opens with a full-bleed expedition photograph — a climber pinned against tan rock, a yellow sleeping bag in a snowfield close-up, a 3-up duffel-bag product grid against a light-gray studio backdrop, a climber pulling on orange gloves — and the white display headline sits directly on top of the image without any darkening scrim or translucent buffer. Where Patagonia and REI both reach for similar imagery but float their typography over a darkened gradient, The North Face places ink directly on the photograph and lets the visual noise read through. The chrome between bands recedes to a stripped grayscale: charcoal {colors.ink} (#2a2a2a) running text, pure white CTA fills, pure black {colors.ink-pure} (#000000) outlines.

The chromatic restraint is unusually severe. The captured page renders only 12 raw colors, and the only saturated tone on the entire surface is a brick-red {colors.brick} (#c22014) pill containing the "United States" country selector at the top of the country-modal overlay — it appears just twice on the page (once as background, once as border). No accent color decorates a CTA. No tinted hairline carries a card edge. No gradient warms a section header. The brand voltage is the photography itself; the chrome supplies no surface color of its own.

The shape language is pill-or-nothing. 42 of the 46 captured radius values are 9999px — every CTA, every category chip, every product-tile action button. The remaining handful are 2px (rare product-card corners) and a single 900px outlier. There is no middle 8-12-16px option. Combined with the black-only border tone ({colors.hairline} carries 759 of 763 captured border occurrences), the result reads as catalogue-grade — every interactive element is a black-stroked or black-filled pill, every photograph terminates in a hard edge, every dividing rule is a 1px pure-black line.

Key Characteristics:

• Photography carries the chromatic load; every above-fold band is a full-bleed expedition image with the display headline placed directly on the photograph in white weight 500.
• Pill geometry on every interactive element — 42 of 46 captured rounded values are {rounded.full} (9999px); no soft 8-12-16px middle tier exists.
• Black-only borders — {colors.hairline} (#000000) is the only border tone on the page (759 of 763 occurrences); there is no second hairline tier.
• Single brick-red voltage ({colors.brick} — #c22014) reserved for the country-selector pill; appears just twice on the page total, never as a CTA accent.
• HelveticaNeue across every spoken tier with AkkuratMono appearing only on product-spec strips (5 occurrences in the captured page).
• Binary button system — black-fill {component.button-primary} ("Shop Women") paired with white-fill / black-stroke {component.button-secondary} ("Shop Men") repeats across every band.
• Promo bar pinned to the top of the page in pure-black canvas with caption-tier text ("Mirror card drop. Don't miss out. Limited edition…"), 32px tall.
• Footer flips the canvas to a forest-green {colors.flag-green} (#205a41) — the only major surface color on the page that isn't part of the grayscale chrome.

Colors

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 196 (138 text, 41 bg, 16 border). Pure white — the body floor between expedition photographs, the top-nav surface, the white-pill CTA fill, and the display ink color when text sits over photography. The single light surface in the system.
• Ink Pure ({colors.ink-pure} — #000000): frequency 855 (67 text, 27 bg, 759 border). The promo-bar canvas, the black-pill CTA fill, and the universal 1px border tone. Wired as --un-default-border-color. Pure black carries 99.5% of the border work on the captured page.

Text

• Ink ({colors.ink} — #2a2a2a): frequency 571 (551 text, 18 bg, 2 border). The dominant text tone — used on every body paragraph, every nav-link label, every product-card title rendered against white. Not pure black; a 16-point lift that reads softer than {colors.ink-pure} for running text.
• Ink Muted ({colors.ink-muted} — #525252): frequency 15 — secondary text tier for footer-metadata, product-spec rows, and small labels.

Border

• Hairline ({colors.hairline} — #000000): same value as {colors.ink-pure} but reserved by role as the border-only token. 759 of 763 captured border occurrences. Every CTA outline, every product-card edge, every input stroke.
• Hairline Soft ({colors.hairline-soft} — #e1e1e1): frequency 3 — only used on internal product-grid dividers and small rule lines inside the footer.
• Divider ({colors.divider} — #9a9a9a): frequency 3 — a single dim graphite tone for vertical dividers between top-nav links and inactive chip outlines.
• Chip Grey ({colors.chip-grey} — #b8b8b8): frequency 1 — appears once as a border tone on an inactive chip variant.

Voltage

• Brick ({colors.brick} — #c22014): frequency 2 (1 bg, 1 border). The only saturated color in the captured chrome — fills the "United States" country-selector pill at the top of the country-overlay modal and appears as its 1px outline. The single chromatic moment on the entire page.
• Emergency Red ({colors.emergency-red} — #a21a10): frequency 14, all as text. A slightly-darker red tone used inside the country-overlay modal for emergency-routing copy and the small "Mirror card drop" promo-bar message text.

Flag

• Flag Blue ({colors.flag-blue} — #283e8d): frequency 2 (1 bg, 1 border). Used inside the country-selector modal for the US flag glyph and a country-name chip border.
• Flag Green ({colors.flag-green} — #205a41): frequency 1 — the forest-green footer canvas. The only non-grayscale major surface color on the page; signals the brand's outdoor heritage without competing with the photography chrome.

Typography

Font Family

The system runs HelveticaNeue across every spoken tier — display, heading, body, button, nav — with AkkuratMono as a second voice that appears only on product-spec strips. Fallbacks walk "HelveticaNeue Fallback: Arial", system-ui, sans-serif for the primary family. There is no display serif, no display sans alternate, no italic variant on the captured surface.

The Helvetica + AkkuratMono pairing is the outdoor-retail equivalent of Cloudflare's FT Kunst Grotesk + Apercu Mono Pro split — the sans speaks editorially while the mono carries technical annotation (sizes, weights, fabric specs). On The North Face the mono surface is sparse (just 5 occurrences across the page) but the role is clear.

Hierarchy

Principles

Display weight stays at 500. The 64px hero h1 in HelveticaNeue 500 is the loudest typographic moment in the system — there is no 700+ tier anywhere on the captured page. The decision matters because the display sits directly on photography: a heavier weight would compete with the image's own visual weight; 500 reads as clear-without-shouting.

Body and label work at weight 400 or 500. The system has no italic and no condensed alternate. Every visible mark is upright HelveticaNeue or upright AkkuratMono.

Note on Font Substitutes

HelveticaNeue is a Mac system font that varies by license between projects. Inter at the same weights is the closest open-source substitute; the proportions track within ~1% at 16-18px body sizes. Helvetica Now (Monotype) is the licensed contemporary substitute if budget allows. For AkkuratMono, Berkeley Mono, JetBrains Mono, or IBM Plex Mono all transfer cleanly at the same sizes — AkkuratMono's signature feature is its slightly narrower 0/O distinction, which JetBrains Mono carries closely.

Layout

Spacing System

• Base unit: 4px — the dominant gap value, appearing 43 times in the captured page; secondary modules at 8px (29 occurrences) and 16px (29 occurrences).
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 40px · {spacing.3xl} 48px.
• Hero band padding: 0px — every above-fold photograph is full-bleed edge-to-edge; the headline overlay is positioned with internal alignment, not padding.
• Primary button padding: 11x24px (7-15px vertical, 24-32px horizontal across variants).
• Top-nav padding: 15x32px — generous horizontal breathing room around the wordmark and category-link cluster.
• Footer padding: 32x48px on the forest-green band.

Grid & Container

• Max content width: full-bleed on hero bands and product-grid bands; ~1280px on text-only narrative bands.
• Hero photographs: 100vw, with the headline and dual-pill CTA stack pinned to the lower-left or lower-center safe zone.
• Product grid (duffel section): 3-column equal grid against a near-white studio backdrop, each tile holding a product photograph and a price label beneath.
• "You may like" carousel: 5-column equal grid of product thumbnails with no border treatment, model-shot product photography.
• Footer: 6-column link grid on the forest-green band, footer copy aligned baseline.

Rhythm

The page alternates between full-bleed photograph and product grid bands. Photograph (climber). Two-pill CTA. Photograph (sleeping bag). Two-pill CTA. Product grid (3 duffels). Photograph (orange gloves). Product carousel (5 thumbnails). Promo bar. Footer. The rhythm is metronomic — every photograph is followed by a CTA cluster, every product grid is bracketed by photographs. There is no editorial-text-only band on the captured page.

Elevation

The system has essentially no shadow tier. The captured page records only 4 shadow occurrences (2 on the country-modal overlay, 1 on the white pill, 1 on a dropdown). Hierarchy comes from the photograph-against-grayscale-chrome contrast — there is no surface-ladder of cards lifted over cards, and no tinted shadow layer of any kind.

• Flat (no shadow): every photograph band, the product grids, the promo bar, the top-nav, the footer — 99% of surfaces.
• Modal scrim: the country-overlay modal sits over a dim charcoal scrim; the single moment of layered elevation on the page.
• Hairline borders: {colors.hairline} (#000000) at 1px does the work that a shadow would do in a dashboard product — every CTA outline reads as a hard rule rather than a soft elevation.

Shapes

The radius scale is pill-or-nothing:

• {rounded.none} 0px — every photograph, every body section, the top-nav, the promo bar, the product-grid tile.
• {rounded.xs} 2px — 3 occurrences across the entire page, all on rare modal-corner edges and product-card thumbnails.
• {rounded.full} 9999px — 42 occurrences. Every CTA, every category chip, every country-selector pill, every product-tile action button.

There is no 4 / 8 / 12 / 16 / 24px middle tier. The decision is structural: pills read soft against both the dark expedition photography and the white product-grid surfaces, and the universal black 1px stroke reads as a hard frame on every pill regardless of context. No middle radius is needed because no surface needs an intermediate softness.

Components

hero-section — Full-bleed photograph canvas with 0 padding. Holds the white display headline in {typography.display-lg} and a two-pill CTA stack ("Shop Women" black-fill + "Shop Men" white-fill / black-stroke) positioned at the lower safe zone.

hero-heading — White {colors.canvas} text on photography, HelveticaNeue 40px / 500. The 64px display-xl tier is reserved for the largest band; most photograph overlays use 40px to keep the text scaled to the image grain.

section-heading — Charcoal {colors.ink} text on white at {typography.display-md}. Used on "One size doesn't fit all.", "The North Face® U.S. Ski & Snowboard", and the "Gear You May Like" carousel header.

body-paragraph — White running text at {typography.body-lg} (18px / 400) over photography. Used for the lead paragraph beneath each band headline.

body-paragraph-dark — {colors.ink} running text at {typography.body-md} (16px / 400) over white surfaces. Used in editorial bands and footer narrative copy.

spec-mono — {colors.ink} AkkuratMono at {typography.mono-md} (18px / 400). Used on product-spec inline annotations — appears just 5 times in the captured page but carries the technical-product voice.

button-primary — Black {colors.ink-pure} fill, white text, {rounded.full} pill, 11x24 padding, 48px height. Border 0. "Shop Women" is the canonical instance; the black-fill pill repeats across every hero band as the primary CTA.

button-secondary — White {colors.canvas} fill, black {colors.ink-pure} text, 1px {colors.hairline} border, same {rounded.full} pill, same dimensions. "Shop Men" is the canonical instance; the white-fill pill always sits adjacent to the black-fill pill.

button-country — Brick-red {colors.brick} fill, white text, 1px brick-red border, {rounded.full} pill, same dimensions. The single rendered instance of this component is the "United States" country selector at the top of the country-overlay modal — the only chromatic CTA in the system.

top-nav — White {colors.canvas} surface, 64px height, 15x32 padding. Houses the brand wordmark, the category-link cluster (Men, Women, Kids, Sale, etc.), and the right-aligned "Account / Bag / Search" cluster. 1px black bottom rule separates it from the page below.

nav-link — Transparent background, {colors.ink} charcoal text in {typography.label-md} (14px / 500), 0x8 horizontal padding. No hover surface visible in the captured frame.

promo-bar — Pure-black {colors.ink-pure} canvas, white text at {typography.caption} (12px / 500), 32px tall, 0x16 padding. Pinned to the top of the page above the top-nav. Carries the persistent "Mirror card drop" promotional message.

product-tile — White {colors.canvas} surface, {rounded.xs} 2px radius, 0 padding (the product photograph fills the tile edge-to-edge). Used in the duffel-bag grid and the carousel.

category-chip — White fill, charcoal text, 1px black hairline border, {rounded.full} pill, 7x16 padding, 32px height. Used in the category-filter band beneath product grids.

text-input — White surface, charcoal text, 1px black border, {rounded.none} 0px radius, 12x16 padding, 48px height. The single non-pill input variant in the system; sharp 0px corners distinguish text inputs from button surfaces.

footer — Forest-green {colors.flag-green} (#205a41) canvas, white text at {typography.body-sm}, 32x48 padding. The only non-grayscale major surface color on the page — signals brand heritage without disrupting the photography chrome above.

Do's and Don'ts

Do trust full-bleed expedition photography to carry every above-fold band. The chrome only works because each photograph is strong enough to anchor the page without a typographic scrim or color overlay; replacing the photograph with a flat color fill removes the only chromatic engine the system has.

Do repeat the binary button system — black-fill {component.button-primary} paired with white-fill / black-stroke {component.button-secondary}. The two pills always sit together as a Women/Men or Shop/Learn pair; introducing a third hierarchy breaks the rhythm the page repeats across every band.

Do use pure {colors.ink-pure} (#000000) for every border. The black 1px stroke is the universal hairline; mixing in a softer #e0e0e0 hairline as a second border tier disrupts the catalogue-grade rule consistency that makes the system cohere.

Do keep {colors.brick} (#c22014) confined to the country-selector pill. The brick-red is the only saturated color on the page and it appears just twice; spreading it to general CTAs converts the held-in-reserve voltage into a default accent and the chromatic restraint disappears.

Don't introduce a soft hairline gray as a card-edge tone. The system has 759 captured borders and 754 of them are pure black; a soft hairline reads as a different design system entirely. If a surface needs to feel softer, drop the border, not the color.

Don't add an 8 / 12 / 16 / 24px middle radius tier. The system is binary — {rounded.none} on cards and {rounded.full} on every interactive element. A middle radius creates a third corner geometry that looks neither sharp nor pill.

Don't layer a translucent scrim over the hero photograph to soften the text contrast. The page deliberately places white display directly on the image without buffer; adding a 30% black overlay turns the chrome generic and matches every other outdoor retailer.

Don't swap {component.button-primary} from black-fill to brick-red-fill. The country-pill brick-red is structurally distinct from the CTA system; merging the two flattens the entire chromatic discipline and removes the reason the brick-red reads as special in the country overlay.

Known Gaps

• Hover and focus states: the captured surface exposes resting states only. Hover treatments on {component.button-primary}, {component.button-secondary}, and {component.nav-link} are not visible in the static capture.
• Form input states: {component.text-input} carries the resting state; error / validation styling is not exposed on the captured marketing page (live form validation lives inside the checkout flow).
• Mega-menu surface: the top-nav uses a hover-triggered mega-menu (Men > Jackets > Down Jackets) that doesn't appear in the static capture.
• Product detail page: the captured surface is the homepage marketing band only. The product-detail page (PDP) carries a richer set of tokens — size chips, color-swatch dots, image-zoom controls — not represented here.
• Mobile breakpoint: the captured render is desktop-1440. The mobile layout collapses the dual-pill CTA cluster vertically and resizes display headlines to a 32px / 24px ladder; only the desktop ladder is represented here.
• Account / Bag / Wishlist surfaces: the authenticated dashboard surfaces (order history, address book, wishlist) are not represented in the marketing capture and likely use a different component set.
• The XPLR Pass loyalty program surfaces have their own visual treatment that occasionally invokes a separate accent color (typically a muted gold) — not visible on the captured homepage.