--- version: alpha name: "Arc'teryx" website: "https://arcteryx.com" description: >- A premium outdoor-apparel brand whose marketing site reads as an editorial-magazine spread rather than an e-commerce store — full-bleed cinematic photography (a climber rappelling a granite face, garments draped on hangers in a heritage outerwear shop, a model in muted earth-tone fieldwear) carries every band, with display headlines set in Elan ITC Pro at 32px uppercase weight 400 floating directly on the imagery. Helvetica Now Display carries every running-text tier from 12px caption to 28px lead, charcoal #1a1a1a (called --colour-copy) is the only running-text ink, the radius scale collapses to essentially zero (a single 5px occurrence on the whole page), and the brand commits to surface-color storytelling — every band is its own photograph or its own near-black surface, never a generic SaaS chrome. seo: title: "Arc'teryx Design System for React — Elan ITC Pro, charcoal #1a1a1a, 16 components" metaDescription: "Arc'teryx's marketing system runs as a cinematic editorial spread — Elan ITC Pro display headlines on full-bleed photography, Helvetica Now body, zero corner-radius geometry. Tokens for React, Next.js, and AI tools." highlights: - "Editorial-magazine layout — every above-fold band is a full-bleed photograph with display copy positioned in the lower-left safe zone, not a typical SaaS hero composition" - "Two-typeface split — Elan ITC Pro uppercase 32px for display (3 occurrences on the page), Helvetica Now Display for every running-text tier" - "Charcoal-not-black ink — the running text color is --colour-copy #1a1a1a, lifted just enough from pure black to read warm against expedition photography" - "Sharp-corner geometry — the entire captured page has just one 5px border-radius occurrence; every card, every chip, every input sits at 0px corners" - "Footer flips to charcoal — a `{colors.surface-dark}` (#1a1a1a) footer band closes the page with a white-on-charcoal newsletter input; the only major surface-color shift on the captured page" tags: - "E-commerce & Retail" lastUpdated: "2026-05-18" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Arc'teryx's marketing site reads like an outdoor-gear magazine, not an apparel store. The above-fold opens on a cinematic photograph — a climber rappelling a sun-bleached granite wall, the "ESSAY OFF THE LINE" caption set in white Elan ITC Pro uppercase weight 400 at 32px floating over the image in the lower-left safe zone — with no surrounding chrome of any kind. The second band drops to a split: on the left, a folded jacket detail caught at the seam with "THE ALL-NEW Kragg Aura" in the same uppercase typeface; on the right, a model in muted earth-tone fieldwear with "RELIANCE" overlaid in the same treatment. Where Patagonia stops at the photograph and lets the navigation handle every chromatic moment, and where The North Face floats white sans-serif at modest weights, Arc'teryx commits to display-serif-like uppercase that reads as a heritage-outdoor-magazine masthead. Beneath the editorial bands the page returns to a quieter retail rhythm — a 3-up "Our protection collection / Essential lightweight layers / Send out the worm" product-category grid against white, a left/right split of "Give outerwear a new life" (a folded color-block of garments hanging in a shop) and "Inchwing Vancouver Park" (a dark interior shot of a heritage Arc'teryx storefront), and a footer band that flips the canvas to a charcoal `#1a1a1a` surface with a newsletter input rendered white-on-charcoal. The page is unusually committed to layered surface-color storytelling — every band carries its own photograph or its own surface tone, and the chrome between them recedes to a near-invisible white floor. The DESIGN.md file packages the system into a machine-readable spec. Inside: 14 color tokens (charcoal-copy as the running ink, pure white as the canvas, a small set of system blues / greens / reds reserved for validation states); 11 typography tokens splitting Elan ITC Pro uppercase display from Helvetica Now Display running text; a near-zero radius scale (one 5px occurrence on the entire captured page); a generous 16px-base spacing system; and 16 component definitions covering the photograph-led hero, the editorial split panel, the white-on-charcoal footer input, and the dense top-nav category band. The single move worth reproducing is the magazine layout — large photography with small uppercase display copy in the safe zone, no decorative chrome between bands. 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://arcteryx.com" title: "Arc'teryx — official site" description: "Arc'teryx'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 Arc'teryx's primary brand color?" answer: "Arc'teryx's marketing chrome runs without a chromatic brand voltage on the captured page. The dominant non-image color is charcoal #1a1a1a (wired in CSS as --colour-copy, --colour-black, and --black) which carries every running-text occurrence and every below-the-photograph surface, including the footer band. White #ffffff is the body canvas. A focus-state blue #5b9dd9 (wired as --focus-blue) lives in the CSS for keyboard accessibility but never appears as a CTA accent. The system blues, greens, and reds (--info-blue #31668f, --success-green #227733, --warning-red #990000) are reserved for validation states and don't appear in marketing chrome. The brand voltage is the photography itself." - id: "typography" title: "What typeface does Arc'teryx use, and what should I use as a substitute?" answer: "The system splits two licensed families. Elan ITC Pro carries every display-uppercase moment — the 'ESSAY OFF THE LINE' band caption, the 'THE ALL-NEW Kragg Aura' product callout, the 'RELIANCE' overlay — all at 32px in weight 400 with uppercase text-transform. Helvetica Now Display carries every running-text tier from 12px caption to 28px lead-paragraph, also at weight 400 with 700 reserved for inline emphasis. Inter or General Sans is a serviceable substitute for Helvetica Now Display at the same weights; Trajan Pro or Cinzel works as a substitute for Elan ITC Pro's heritage-uppercase voice (though Elan itself is a 1980s ITC sans, not a serif, and Cinzel adds serifs). For a true open-source match, Cormorant SC at uppercase carries similar editorial weight." - id: "radius-philosophy" title: "What corner-radius scale does Arc'teryx use?" answer: "Effectively zero. The captured page has just one 5px border-radius occurrence on the entire surface. Every product card, every category chip, every CTA button, every input field sits at 0px corners. The decision is structural: the magazine-layout chrome reads as editorial when every element terminates in a hard right-angle corner, and the photography that carries the page already has its own organic edges. Adding pill or soft-rounded geometry would import a SaaS-product feel that doesn't belong on a heritage outdoor surface. The brand's product taxonomy chrome (size chips, color swatches inside the PDP) also runs at 0px in the captured page." - id: "footer-inversion" title: "Why does the Arc'teryx footer flip to charcoal?" answer: "The footer band uses the same #1a1a1a (--colour-copy) tone that carries the running ink across the page, inverted to fill a major surface. The white-on-charcoal contrast carries the newsletter signup ('Sign up for more product drops & content' with a 52px-tall white-bordered input on dark fill) and the footer-nav link grid in muted-white text. The decision matters because the captured marketing page above the footer is otherwise an unbroken white canvas with full-bleed photographs interrupting it; the dark footer is the only major surface-color shift in the body chrome, and it reads as the bottom of the magazine spread. It also signals the heritage-outdoor brand voice without using a saturated color anywhere." - 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 Arc'teryx's specific moves: full-bleed cinematic photography in every above-fold band, an Elan-ITC-Pro-equivalent uppercase display tier on top of Helvetica Now Display body, near-zero corner radii, charcoal-not-black running ink, and the footer-flip to a dark surface. You can reference tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. The move worth borrowing only with serious editorial photography is the magazine layout — without strong imagery, the chrome reads bare rather than confident because there is no chromatic voltage to fall back on." mockups: - "marketing-hero" - "editorial-article" colors: canvas: "#ffffff" ink: "#1a1a1a" ink-pure: "#000000" surface-dark: "#1a1a1a" ink-secondary: "#333333" ink-muted: "#666666" divider: "#cccccc" hairline: "#b2b2b2" surface-grey: "#e3edf2" link: "#0000ee" focus-blue: "#5b9dd9" info-blue: "#31668f" success-green: "#227733" warning-red: "#990000" typography: display-xl: fontFamily: "\"elan-itc-pro\", \"Trajan Pro\", serif" fontSize: 32px fontWeight: 400 lineHeight: 32px letterSpacing: "0.32px" display-lg: fontFamily: "\"elan-itc-pro\", \"Trajan Pro\", serif" fontSize: 22px fontWeight: 400 lineHeight: 25px letterSpacing: 0 heading-md: fontFamily: "\"helvetica-now-display\", system-ui, -apple-system, sans-serif" fontSize: 28px fontWeight: 400 lineHeight: 38px letterSpacing: 0 body-lg: fontFamily: "\"helvetica-now-display\", system-ui, -apple-system, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 27px letterSpacing: "0.36px" body-md: fontFamily: "\"helvetica-now-display\", system-ui, -apple-system, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: "0.32px" body-sm: fontFamily: "\"helvetica-now-display\", system-ui, -apple-system, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 18px letterSpacing: "0.32px" label-emph: fontFamily: "\"helvetica-now-display\", system-ui, -apple-system, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 24px letterSpacing: "0.32px" caption-emph: fontFamily: "\"helvetica-now-display\", system-ui, -apple-system, sans-serif" fontSize: 18px fontWeight: 700 lineHeight: 27px letterSpacing: "0.36px" button-md: fontFamily: "\"helvetica-now-display\", system-ui, -apple-system, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 14px letterSpacing: 0 nav-link: fontFamily: "\"helvetica-now-display\", system-ui, -apple-system, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0 rounded: none: "0px" xs: "5px" spacing: xs: "4px" sm: "8px" md: "10px" base: "12px" lg: "16px" xl: "24px" 2xl: "32px" 3xl: "38px" 4xl: "64px" components: hero-section: backgroundColor: "{colors.surface-dark}" textColor: "{colors.canvas}" typography: "{typography.display-xl}" rounded: "{rounded.none}" padding: "0" hero-heading: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.display-xl}" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.heading-md}" display-overlay: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.display-xl}" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" body-paragraph-light: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.body-lg}" caption-overline: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.caption-emph}" button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "12px 16px" height: "40px" border: "0" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "12px 16px" height: "40px" borderColor: "{colors.ink}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "16px 32px" height: "72px" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: "0px 8px" category-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "0" editorial-panel: backgroundColor: "{colors.surface-dark}" textColor: "{colors.canvas}" typography: "{typography.display-xl}" rounded: "{rounded.none}" padding: "32px 38px" text-input: backgroundColor: "{colors.surface-dark}" textColor: "{colors.canvas}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "0px 45px 0px 15px" height: "52px" borderColor: "{colors.canvas}" newsletter-bar: backgroundColor: "{colors.surface-dark}" textColor: "{colors.canvas}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "32px 32px" footer: backgroundColor: "{colors.surface-dark}" textColor: "{colors.canvas}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: "64px 32px" --- ## Overview Arc'teryx's marketing site reads as an editorial-magazine spread, not a typical apparel store. **Magazine-layout chrome.** Every above-fold band is a full-bleed cinematic photograph — a climber rappelling a granite face, a folded jacket caught at the seam, a model in muted earth-tone fieldwear, a heritage Arc'teryx storefront in dim interior light — with the display headline set in Elan ITC Pro uppercase weight 400 at 32px and floated directly on the image in the lower-left safe zone. Where Patagonia stops at the photograph and lets the top-nav carry every chromatic moment, and where The North Face overlays modest HelveticaNeue at weight 500, Arc'teryx commits to an uppercase display-serif voice that reads as a heritage-outdoor-magazine masthead. The chromatic discipline is unusually severe even by outdoor-retail standards. The captured page renders only 6 raw rendered colors. The running ink is charcoal `{colors.ink}` (#1a1a1a, wired as `--colour-copy`, `--colour-black`, `--black`) — slightly lifted from pure black so it reads warm against expedition photography rather than industrial. The body canvas is pure white `{colors.canvas}` (#ffffff). The major surface-color shift on the captured page is the footer band, which flips to the same charcoal tone (`{colors.surface-dark}`) and carries a white-on-charcoal newsletter signup with a 52px-tall white-bordered input. No saturated color appears in marketing chrome; the system blues, greens, and reds declared in CSS (`{colors.info-blue}`, `{colors.success-green}`, `{colors.warning-red}`) are reserved for validation states inside checkout and PDP surfaces. The shape language is **sharp-corner geometry**. The captured page records exactly one 5px border-radius occurrence on the entire surface — every card, every chip, every CTA button, every input sits at 0px corners. The decision is the inverse of The North Face's pill-or-nothing system: where TNF rounds every interactive element to read tappable, Arc'teryx leaves every interactive element at hard right-angle corners to read editorial. The combination of sharp corners, uppercase display, and charcoal-not-black ink is the system's silhouette signature. **Key Characteristics:** - Editorial-magazine layout — every above-fold band is a full-bleed photograph with the display caption positioned in the lower-left safe zone, not a typical headline-above-sub-paragraph SaaS composition. - Two-typeface split — Elan ITC Pro uppercase 32px for display (3 occurrences on the page), Helvetica Now Display for every running-text tier from 12px to 28px. - Charcoal-not-black ink — `{colors.ink}` (#1a1a1a) is the running-text color (243 text occurrences, 242 border occurrences); pure black exists in CSS but reads as a structural divergence when used. - Near-zero radius — the entire captured page has just one 5px corner-radius occurrence; every card, CTA, chip, and input sits at 0px (`{rounded.none}`). - Footer flips to charcoal — a `{colors.surface-dark}` (#1a1a1a) band closes the page with a white-on-dark newsletter input; the only major surface-color shift in the body chrome. - Top-nav at 72px height, white surface, dense single-row category strip (Men / Women / Equipment / Used Gear) with the wordmark flush left. - 16px-base spacing system with 32px / 38px as the dominant section-padding tier. - The link blue (`{colors.link}` — #0000ee) is the unstyled browser default — appears on 12 inline links that haven't been color-overridden, which signals that the brand trusts the link semantic to do its own work rather than coding every link with a custom hover. ## Colors ### Surface - **Canvas** (`{colors.canvas}` — #ffffff): frequency 189 (92 text, 5 bg, 92 border). Pure white — the body floor between photograph bands, the top-nav surface, the newsletter input outline. Wired as `--white`, `--colour-white`, and `--colour-grey-item-background`. - **Surface Dark** (`{colors.surface-dark}` — same value as `{colors.ink}`): the dark surface fill used by the footer band and the newsletter input. Reuses the running-text charcoal tone — there is no separate dark-surface token in CSS. ### Text - **Ink** (`{colors.ink}` — #1a1a1a): frequency 527 (243 text, 4 bg, 242 border, 38 gradient). The running-ink color across every tier, wired as `--colour-copy`, `--colour-black`, `--black`. The dominant text tone on the page and the load-bearing chrome value — slightly lifted from pure black to read warm against photography. - **Ink Pure** (`{colors.ink-pure}` — #000000): frequency 101 (37 text, 1 bg, 37 border, 26 gradient). Pure black — appears in CSS gradients and in a small set of borders, but is structurally a backup to `{colors.ink}` rather than a primary token. - **Ink Secondary** (`{colors.ink-secondary}` — #333333): wired as `--colour-grey-dark` / `--dark-grey`. Reserved for body copy that needs to feel slightly softer than `{colors.ink}`; rare on the captured page. - **Ink Muted** (`{colors.ink-muted}` — #666666): frequency 8 (4 text, 4 border). Wired as `--colour-grey-medium`, `--medium-grey`, `--background-gradient`. The secondary-text tone used in footer-metadata and inactive states. ### Hairline - **Divider** (`{colors.divider}` — #cccccc): wired as `--colour-grey-pinline` and `--pinline-grey`. The single declared pinline-divider color in CSS; rare on the captured surface because the layout uses negative space rather than rules to separate bands. - **Hairline** (`{colors.hairline}` — #b2b2b2): frequency 1 (1 bg). Wired as `--colour-grey-inactive` and `--inactive-state-grey`. Used as the inactive-state border tone on form controls. ### Background - **Surface Grey** (`{colors.surface-grey}` — #e3edf2): wired as `--colour-blue-1`, `--background-blue`, `--colour-grey-background`, `--background-grey`. A cool-tinted off-white reserved for elevated chrome inside the product surface; absent from the captured marketing page but declared for system completeness. ### Link - **Link** (`{colors.link}` — #0000ee): frequency 24 (12 text, 12 border). The unstyled browser-default link blue — appears on 12 inline links that the system deliberately leaves un-color-coded, signaling that the brand trusts the semantic-link-color convention rather than custom-styling every anchor. ### State (declared, reserved) - **Focus Blue** (`{colors.focus-blue}` — #5b9dd9): wired as `--focus-blue` and `--colour-blue-2`, used as the keyboard-focus outline color across form controls (`--focus-visible: 0.2rem solid #5b9dd9`). - **Info Blue** (`{colors.info-blue}` — #31668f): wired as `--info-blue` / `--colour-blue-3`. Reserved for informational banner chrome; not rendered on the captured page. - **Success Green** (`{colors.success-green}` — #227733): wired as `--success-green` / `--colour-green-3`. Reserved for validation success states. - **Warning Red** (`{colors.warning-red}` — #990000): wired as `--warning-red` / `--colour-red-3`. Reserved for validation error states; not rendered in marketing chrome. ## Typography ### Font Families The system splits two licensed families. **Elan ITC Pro** carries every uppercase display moment (the band caption, the product-callout overlay, the editorial-panel label). **Helvetica Now Display** carries every running-text tier from 12px caption to 28px lead-paragraph. Both are declared as `--font-elan` and `--font-helvetica` in CSS, with `--font-urw` as an alias for Helvetica. The split is the brand's distinguishing typographic move. Elan ITC Pro is a 1980s ITC sans-serif with a slightly archaic feel — its uppercase forms read as heritage-outdoor-magazine masthead rather than as a contemporary SaaS display tier. Pairing it with Helvetica Now Display (a contemporary utility sans) gives the page two distinct voices: editorial-uppercase for naming, neutral-running for everything else. ### Hierarchy | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-xl}` | 32px | 400 | 32px | Elan ITC Pro uppercase — band caption ("ESSAY OFF THE LINE", "RELIANCE", "THE ALL-NEW Kragg Aura") | | `{typography.display-lg}` | 22px | 400 | 25px | Elan ITC Pro uppercase smaller display variant (h4 tier inside editorial panels) | | `{typography.heading-md}` | 28px | 400 | 38px | Helvetica Now Display section h3 ("Our protection collection", "Essential lightweight layers", "Send out the worm") | | `{typography.body-lg}` | 18px | 400 | 27px | Lead paragraph copy (uppercase variant exists at the same size for inline labels) | | `{typography.body-md}` | 16px | 400 | 24px | Default running text | | `{typography.body-sm}` | 12px | 400 | 18px | Caption, footer-metadata, small chip text | | `{typography.label-emph}` | 16px | 700 | 24px | Inline emphasis within body copy (the only 700 weight in the system) | | `{typography.caption-emph}` | 18px | 700 | 27px | Bold uppercase label (1px-tracked variant for inline emphasis) | | `{typography.button-md}` | 12px | 400 | 14px | CTA label — small, weight 400 (the system does not bold its buttons) | | `{typography.nav-link}` | 16px | 400 | 24px | Top-nav link labels | ### Principles Display weight stays at 400. Elan ITC Pro at 32px uppercase weight 400 is the loudest typographic moment on the page; there is no 700+ display tier. Combined with the uppercase text-transform and the 0.32-0.36px letter-spacing, the result reads as heritage-magazine masthead — confidence by tracking and treatment, not by weight. Helvetica Now Display body sits at weight 400 with 700 reserved for inline emphasis. The system has no semibold ladder. Body letter-spacing is 0.32px (positive, not the negative-tracking that contemporary grotesks like FT Kunst Grotesk use) — the spacing decision tilts the body voice toward technical-spec rather than editorial-flow. ### Note on Font Substitutes Elan ITC Pro is a licensed ITC display family. For uppercase editorial display, **Cinzel** (open-source serif), **Cormorant SC**, or **Trajan Pro** (licensed) carry similar heritage-masthead voice — though Elan itself is a sans, so a closer match is **Optima** at uppercase or **Albertus**. For Helvetica Now Display, **Inter** at the same weights is the closest open-source substitute; the proportions track within ~1% at body sizes. **Helvetica Now** itself (Monotype) is the licensed contemporary match if budget allows. ## Layout ### Spacing System - **Base unit:** 16px — the dominant gap value (21 occurrences); secondary modules at 10px (17) and 8px (16) and 4px (15). - **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 10px · `{spacing.base}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.2xl}` 32px · `{spacing.3xl}` 38px · `{spacing.4xl}` 64px. - **Hero band padding:** 0 — every above-fold photograph is full-bleed edge-to-edge; the display headline floats in the lower-left safe zone with internal positioning rather than padding. - **Editorial panel padding:** 32x38px — the only consistent two-axis padding combo in the spacing extraction (used 4 times). - **Newsletter / footer padding:** 32x32px on the newsletter band, 64x32px on the footer link grid. - **Section padding:** 64px vertical between major content sections on the white body. ### Grid & Container - **Max content width:** full-bleed on hero photograph bands and editorial split panels; ~1280px on the 3-up category grid and the footer link grid. - **Hero band:** 100vw photograph with the headline pinned to the lower-left safe zone. - **Editorial split:** 2-column 50/50 grid pairing two cinematic photographs side by side (folded jacket detail on the left, model in fieldwear on the right) with display captions overlaid on each. - **3-up category grid:** equal-column band against white with one photograph per cell ("Our protection collection" / "Essential lightweight layers" / "Send out the worm") and a small overline label beneath each image. - **Heritage split:** a 2-column 50/50 grid pairing a color-block of hanging garments (left) with a dark interior shop photograph (right). - **Footer:** 4-column link grid on the charcoal band with a wide-input newsletter signup spanning the top. ### Rhythm The page alternates between **full-bleed photograph** and **split-photograph** bands above the fold, then drops into a 3-up category-grid band that breathes, then returns to a split-photograph band, then closes on the charcoal footer. The rhythm is editorial — image, image-pair, breathing band, image-pair, dark close. There is no editorial-text-only band on the captured page; every section is anchored on photography. ## Elevation The system has essentially **no shadow tier**. The captured page records zero `box-shadow` occurrences in the rendered chrome (the CSS exposes an Algolia autocomplete-panel shadow `--aa-panel-shadow` but it doesn't appear in marketing chrome). Hierarchy comes entirely from the photography itself and from the footer-band surface-color flip. - **Flat (no shadow):** every photograph band, the 3-up grid, the top-nav, the newsletter band, the footer — 100% of marketing surfaces. - **Surface flip:** the footer's charcoal `{colors.surface-dark}` (#1a1a1a) fill is the single elevation move on the page — read as the bottom of the magazine spread. - **No hairline-on-card:** the category-grid tiles have no border, no shadow, no separator rule between them; the negative space between images does the entire dividing work. ## Shapes The radius scale collapses to **near-zero**: - `{rounded.none}` 0px — every CTA, every chip, every input, every product tile, every editorial panel, every photograph frame. - `{rounded.xs}` 5px — exactly one occurrence on the entire captured page, on a single small chip. There is no 4 / 8 / 12 / 16 / 24px tier. The decision is the inverse of The North Face's pill-or-nothing system: where TNF reads as catalogue-grade by rounding every interactive element, Arc'teryx reads as editorial-grade by terminating every interactive element in a hard right-angle corner. Combined with the uppercase Elan ITC Pro display and the charcoal-not-black ink, the sharp-corner geometry is the third leg of the brand's typographic identity. ## Components **`hero-section`** — Full-bleed photograph canvas with 0 padding. The display headline floats over the lower-left safe zone in `{typography.display-xl}`. No surrounding chrome — the photograph extends edge-to-edge. **`hero-heading`** — White `{colors.canvas}` text on photography, Elan ITC Pro 32px / 400 uppercase. The "ESSAY OFF THE LINE" caption is the canonical instance. **`section-heading`** — Charcoal `{colors.ink}` text on white at `{typography.heading-md}` (28px / 400 Helvetica Now Display). Used on the 3-up category grid ("Our protection collection", "Essential lightweight layers", "Send out the worm"). **`display-overlay`** — Same Elan ITC Pro 32px tier rendered as text overlaid on photographs in the editorial split panels (e.g., "THE ALL-NEW Kragg Aura", "RELIANCE"). Always in white over photograph. **`body-paragraph`** — Default charcoal running text at `{typography.body-md}` (16px / 400) — the workhorse paragraph style on white surfaces. **`body-paragraph-light`** — White running text at `{typography.body-lg}` (18px / 400) over photography or charcoal surfaces — uppercase variant for inline labels and lead paragraphs. **`caption-overline`** — Helvetica Now Display 18px / 700 uppercase at 0.36px tracking — used as a small overline above editorial-panel display headlines. **`button-primary`** — Charcoal `{colors.ink}` fill, white text, `{rounded.none}` 0px radius, 12x16 padding, 40px height. Border 0. CTA labels sit at `{typography.button-md}` (12px / 400) — unusually small for a primary button, which keeps the magazine voice intact. **`button-secondary`** — White `{colors.canvas}` fill, charcoal text, 1px `{colors.ink}` border, same `{rounded.none}` corners and dimensions as the primary. Used as the inverse on dark-photograph contexts. **`top-nav`** — White `{colors.canvas}` surface, 72px height, 16x32 padding. Houses the Arc'teryx wordmark (with the mountain-dragon logo glyph) flush left, the dense category-strip (Men / Women / Equipment / Used Gear) center, and the right-aligned utility cluster (Search / Account / Bag). **`nav-link`** — Transparent background, charcoal text at `{typography.nav-link}` (16px / 400), 0x8 horizontal padding. No hover surface visible in the captured frame. **`category-tile`** — White `{colors.canvas}` surface, charcoal text, `{rounded.none}` 0px radius, 0 padding. The product-photograph fills the tile edge-to-edge; the overline label sits beneath in `{typography.body-md}`. **`editorial-panel`** — Charcoal `{colors.surface-dark}` fill, white text overlaid on a photograph (the inverse case is white text on a half-and-half photograph-and-color block). 32x38 padding. The 50/50 split panels in the heritage-shop band use this component. **`text-input`** — Charcoal `{colors.surface-dark}` fill, white text, 1px `{colors.canvas}` white border, `{rounded.none}` 0px radius, padding 0x45x0x15 (asymmetric — extra right padding for a submit affordance), 52px height. The newsletter signup input is the canonical instance — white-on-charcoal is unusual for a form control and signals the editorial inversion. **`newsletter-bar`** — Charcoal `{colors.surface-dark}` fill, white text at `{typography.body-md}`, 32x32 padding. Sits between the body and the footer link grid; carries "Sign up for more product drops & content" copy and the white-bordered email input. **`footer`** — Charcoal `{colors.surface-dark}` fill, white text at `{typography.body-sm}` (12px / 400), 64x32 padding. Houses the 4-column link grid (Help / My Account / Brand / About Us), the social-icon strip, the language toggle, and the "Less landfill. More Mother Nature." sustainability line at the very bottom. ## Do's and Don'ts **Do** lean on full-bleed cinematic photography. The chrome only works because every band is anchored on a strong image; replacing the photograph with a flat color or a hero illustration removes the only chromatic engine the system has. **Do** use Elan ITC Pro uppercase as the display tier, kept at 32px / weight 400. The heritage-magazine voice depends on the uppercase treatment and the modest weight; bumping to 48px or to weight 700 turns the editorial caption into a generic SaaS hero and destroys the masthead feel. **Do** keep every interactive element at `{rounded.none}` 0px corners. The sharp-corner geometry is half of the brand's silhouette signature (the other half being uppercase display). Rounding even one CTA to 4px breaks the consistency that makes the editorial reading hold. **Do** flip the footer canvas to `{colors.surface-dark}` (#1a1a1a). The dark close-of-spread is structural — the footer reads as the bottom of the magazine page; a white footer reads as a missing section of chrome. **Don't** swap the running ink from `{colors.ink}` (#1a1a1a) to pure `{colors.ink-pure}` (#000000). The 10-point warmth lift is the difference between heritage-warm and industrial-cold. The brand commits to charcoal-not-black across every text occurrence and every border; using pure black on a single component breaks the warmth consistency. **Don't** introduce a pill or rounded-corner tier (4 / 8 / 12 / 16 / 24px) on CTAs or chips. The system commits to 0px corners; adding pills imports a SaaS-product voice that doesn't fit the magazine layout. The single 5px occurrence on the captured page is a known exception, not a precedent. **Don't** add a saturated CTA color (a brand-orange, a brand-blue, a brand-red). The captured marketing chrome runs without a chromatic voltage; introducing one would compete with the photography for visual attention and weaken the editorial reading. The system blues (`{colors.info-blue}`, `{colors.focus-blue}`) and greens (`{colors.success-green}`) are reserved for state and accessibility chrome only. **Don't** style the unstyled `{colors.link}` (#0000ee) inline links. The brand deliberately leaves 12 inline links at the browser default blue rather than overriding them; the decision signals trust in the semantic-link convention. Custom-coloring those links to charcoal removes a small but consistent semantic affordance. ## Known Gaps - **Hover and focus states:** the captured surface exposes resting states only. The CSS exposes `--focus-visible: 0.2rem solid #5b9dd9` (focus-blue outline) but the rendered chrome does not include focused elements. - **Form input states:** `{component.text-input}` carries the resting newsletter-signup state; error / success / disabled styling for the broader form-control system (PDP, checkout) is not exposed on the marketing capture. - **Mega-menu surface:** the top-nav uses a hover-triggered mega-menu (Men > Jackets > Hardshell) that doesn't appear in the static capture. - **Product detail page:** the captured surface is the homepage marketing band only. The PDP carries size-chip and color-swatch components, image-zoom controls, and a richer typographic ladder for spec rows; not represented here. - **Used Gear (re-commerce) surface:** Arc'teryx's used-gear store has a partially distinct visual treatment (a recycled-content overline tag, a green sustainability badge using `{colors.success-green}`) that doesn't appear in the captured homepage. - **Mobile breakpoint:** the captured render is desktop-1440. The mobile layout collapses the 2-column editorial splits into stacked single-column photographs and uses a hamburger nav; only the desktop ladder is represented here. - **Authenticated dashboard:** order history, wishlist, and account-management surfaces are not represented in the marketing capture. - **System-state palette:** the broader CSS exposes `--colour-yellow-1/2/3`, `--colour-red-1/2/3`, `--colour-green-1/2/3`, `--colour-blue-1/2/3` ladders for validation and informational chrome that don't appear in marketing surfaces.