--- version: alpha name: "The North Face" website: "https://www.thenorthface.com" description: >- An outdoor-apparel brand whose marketing surface trusts dramatic expedition photography to do every chromatic job, leaving the chrome stripped to a charcoal-ink #2a2a2a, pure white, and a single saturated brick-red #c22014 reserved for the country-selector pill. Type runs HelveticaNeue at modest weights (40-64px display in 500, 18px lead in 400) with AkkuratMono appearing as a quiet supporting voice on price labels and product specs. Pill geometry is total — 42 of the 46 rounded values on the page are 9999px — and the only border tone visible on the entire page is pure black, used 759 times as a 1px outline-of-everything stroke. seo: title: "The North Face Design System for React — HelveticaNeue, brick-red #c22014, 16 components" metaDescription: "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. Tokens for React, Next.js, and AI tools." highlights: - "Photography as canvas — full-bleed expedition-athlete imagery carries every above-fold band; the chrome supplies no surface color of its own" - "Pill-or-nothing radius — 42 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 borders — pure #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 voice — 18px mono labels appear on technical product spec rows, the only typographic alternation in an otherwise single-family system" tags: - "E-commerce & Retail" lastUpdated: "2026-05-18" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.thenorthface.com" title: "The North Face — official site" description: "The North Face's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is The North Face's primary brand color?" answer: "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." - id: "typography" title: "What typeface does The North Face use, and what should I use as a substitute?" answer: "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." - id: "pill-radius" title: "Why does almost everything on the page have a pill radius?" answer: "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." - id: "borders" title: "Why is every visible border pure black?" answer: "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." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own React outdoor-retail marketing site?" answer: "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." mockups: - "marketing-hero" - "media-grid" colors: canvas: "#ffffff" ink: "#2a2a2a" ink-pure: "#000000" ink-muted: "#525252" hairline: "#000000" hairline-soft: "#e1e1e1" divider: "#9a9a9a" chip-grey: "#b8b8b8" brick: "#c22014" emergency-red: "#a21a10" flag-blue: "#283e8d" flag-green: "#205a41" typography: display-xl: fontFamily: "HelveticaNeue, \"HelveticaNeue Fallback: Arial\", system-ui, sans-serif" fontSize: 64px fontWeight: 500 lineHeight: 64px letterSpacing: 0 display-lg: fontFamily: "HelveticaNeue, \"HelveticaNeue Fallback: Arial\", system-ui, sans-serif" fontSize: 40px fontWeight: 500 lineHeight: 56px letterSpacing: 0 display-md: fontFamily: "HelveticaNeue, \"HelveticaNeue Fallback: Arial\", system-ui, sans-serif" fontSize: 32px fontWeight: 500 lineHeight: 40px letterSpacing: 0 heading-md: fontFamily: "HelveticaNeue, \"HelveticaNeue Fallback: Arial\", system-ui, sans-serif" fontSize: 24px fontWeight: 500 lineHeight: 32px letterSpacing: 0 heading-sm: fontFamily: "HelveticaNeue, \"HelveticaNeue Fallback: Arial\", system-ui, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 24px letterSpacing: 0 body-lg: fontFamily: "HelveticaNeue, \"HelveticaNeue Fallback: Arial\", system-ui, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 24px letterSpacing: 0 body-md: fontFamily: "HelveticaNeue, \"HelveticaNeue Fallback: Arial\", system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0 body-sm: fontFamily: "HelveticaNeue, \"HelveticaNeue Fallback: Arial\", system-ui, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: 0 label-md: fontFamily: "HelveticaNeue, \"HelveticaNeue Fallback: Arial\", system-ui, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px letterSpacing: 0 caption: fontFamily: "HelveticaNeue, \"HelveticaNeue Fallback: Arial\", system-ui, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 24px letterSpacing: 0 button-md: fontFamily: "HelveticaNeue, \"HelveticaNeue Fallback: Arial\", system-ui, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 24px letterSpacing: 0 nav-link: fontFamily: "HelveticaNeue, \"HelveticaNeue Fallback: Arial\", system-ui, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: 0 mono-md: fontFamily: "AkkuratMono, ui-monospace, SFMono-Regular, monospace" fontSize: 18px fontWeight: 400 lineHeight: 24px letterSpacing: 0 mono-sm: fontFamily: "AkkuratMono, ui-monospace, SFMono-Regular, monospace" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0 rounded: none: "0px" xs: "2px" full: "9999px" spacing: xs: "4px" sm: "8px" md: "12px" base: "16px" lg: "24px" xl: "32px" 2xl: "40px" 3xl: "48px" components: hero-section: backgroundColor: "{colors.ink-pure}" textColor: "{colors.canvas}" typography: "{typography.display-lg}" rounded: "{rounded.none}" padding: "0" hero-heading: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.display-lg}" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-md}" body-paragraph: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.body-lg}" body-paragraph-dark: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" spec-mono: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.mono-md}" button-primary: backgroundColor: "{colors.ink-pure}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "11px 24px" height: "48px" border: "0" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-pure}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "11px 24px" height: "48px" borderColor: "{colors.hairline}" button-country: backgroundColor: "{colors.brick}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "11px 24px" height: "48px" borderColor: "{colors.brick}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "15px 32px" height: "64px" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: "0px 8px" promo-bar: backgroundColor: "{colors.ink-pure}" textColor: "{colors.canvas}" typography: "{typography.caption}" rounded: "{rounded.none}" padding: "0px 16px" height: "32px" product-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: "0" category-chip: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.label-md}" rounded: "{rounded.full}" padding: "7px 16px" height: "32px" borderColor: "{colors.hairline}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "12px 16px" height: "48px" borderColor: "{colors.hairline}" footer: backgroundColor: "{colors.flag-green}" textColor: "{colors.canvas}" typography: "{typography.body-sm}" padding: "32px 48px" --- ## 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 | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-xl}` | 64px | 500 | 64px | Hero-band display headline (full-bleed photograph overlay) | | `{typography.display-lg}` | 40px | 500 | 56px | "Open to every body." style band-overlay h2 | | `{typography.display-md}` | 32px | 500 | 40px | "One size doesn't fit all." section headers | | `{typography.heading-md}` | 24px | 500 | 32px | Sub-section heads, product-grid category labels | | `{typography.heading-sm}` | 18px | 500 | 24px | h2 / h3 inline title rows | | `{typography.body-lg}` | 18px | 400 | 24px | Hero-band body paragraph, lead copy | | `{typography.body-md}` | 16px | 400 | 24px | Default running text | | `{typography.body-sm}` | 14px | 400 | 20px | Caption rows, footer-metadata, nav-link labels | | `{typography.label-md}` | 14px | 500 | 18px | Top-nav link labels, category-chip text | | `{typography.caption}` | 12px | 500 | 24px | Promo-bar text, fine-print labels | | `{typography.button-md}` | 18px | 500 | 24px | Primary and secondary button labels | | `{typography.nav-link}` | 14px | 400 | 20px | "EN" / language-toggle links | | `{typography.mono-md}` | 18px | 400 | 24px | AkkuratMono inline labels on product-spec strips | | `{typography.mono-sm}` | 16px | 400 | 24px | AkkuratMono inline labels at the smaller tier | ### 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.