Arc'teryx Design System

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.