Precision retail with an unexpectedly literary voice — precise, but not the cold utilitarian sans the technical-outerwear category implies. The geometry is rigorously square: the entire page carries exactly one rounded value (8px 8px 0 0), making 0px radius the rule and this the squarest system in the library. Chrome is achromatic white with #121212 ink, #1a1a1a dark fills and #999999 muted, and there is no UI accent colour at all — the garments supply every bit of colour against near-black studio photography. The typographic signature is a two-voice split: ELAN, a SERIF, used only for display at 52/62.4 UPPERCASE with +0.6px tracking, set against Helvetica in three cuts for absolutely everything else — nav at 18/18 capitalize, body at 16/24, buttons at 16/19.2 Bold with +1px — and tracking stays positive throughout, nothing set tight. Buttons are 47px at 0 30px in an inverse pair, becoming solid white blocks over photography, with a genuinely designed disabled pair (#b2b2b2 on #e9e9e9) rather than reduced opacity. Structure is 1px #e5e5e5 hairlines and 2px #000000 borders; gradients, video, canvas and backdrop filters are entirely absent. Its most distinctive motion detail is text-decoration animating at 0.1s across 124 elements, so link underlines resolve with a crisp mechanical snap, and four prefers-reduced-motion blocks ship.
Browse Arc’teryx in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: arcteryx.com/us/en/ → geo-redirected to arcteryx.com.au (live DOM, computed styles), 2026-07-25. 0 stylesheets blocked. Shopify storefront with 376 :root vars, mostly theme scaffolding; §2 read from computed fills/text. The#136f99blue is Shopify's unbranded payment button and#232936is a third-party widget — both excluded as not-brand. Reality check: "precise" is right; "cold, utilitarian" is wrong. The queue expected a technical, engineered sans. The chrome *is* precise — Helvetica throughout, essentially zero border-radius on the entire page — but the display face is Elan, a SERIF, set 52/62.4 UPPERCASE, which reads editorial and almost literary rather than utilitarian. That serif-over-Helvetica pairing against near-black product photography is the actual signature.
Precision retail with an unexpectedly literary voice. The chrome is white and rigorously square — there is effectively no rounding anywhere on the page — with Helvetica doing all navigation, body and button work at tight, tracked sizes. Against that engineered baseline sits an Elan serif display in UPPERCASE, laid over near-black studio photography of the product. The effect is a technical spec sheet that has been art-directed like a magazine: cold in its geometry, warm in its typography. Colour is almost entirely absent from the chrome; the garments supply it. Feels: precise, editorial, engineered, high-contrast.
| Token | Hex / value | Role / usage |
|---|---|---|
| ink | #121212 | primary text (1008 uses) |
| black | #000000 | true black, 2px borders |
| near-black | #1a1a1a | dark fills, primary button |
| white | #ffffff | canvas, text over photography |
| ink-85 | rgba(18,18,18,.85) | secondary text |
| grey | #999999 | muted text |
| disabled-bg | #b2b2b2 | disabled button fill |
| disabled-fg | #e9e9e9 | disabled button text |
| surface | #efefef | light surface |
| border | #e5e5e5 | THE hairline (22 uses) |
| scrim-50 | rgba(18,18,18,.5) | image scrim |
| scrim-10 | rgba(18,18,18,.1) | light overlay |
| scrim-80 | rgba(0,0,0,.8) | heavy overlay |
| scrim-20 | rgba(0,0,0,.2) | light black overlay |
Rules: the chrome is achromatic — there is no brand accent colour in the UI. Colour belongs to the product photography. The outlet/sale link is the only coloured text on the page.
A deliberate two-voice split. Elan — a serif — is the display face, used at 52/62.4 UPPERCASE with +0.6px tracking, and *only* for section and campaign headlines. Helvetica in three cuts (Regular, Bold, and a light 300) does everything else: nav at 18/18 capitalize, body at 16/24, buttons at 16/19.2 Bold with +1px tracking, and small print at 12/18. Tracking is positive throughout (+0.32 to +1px) — nothing is set tight.
Specimen substitution: previews load Playfair Display for Elan and Inter
for Helvetica (one bundled Google Fonts link). Helvetica is a system face; Inter
stands in for consistent rendering across platforms.
| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Display (h2) | Elan | 52/62.4 | 400 | +0.6px, UPPERCASE |
| Sub-display (h3) | Helvetica | 38/45.6 | 300 | +0.6px |
| Nav | Helvetica-Regular | 18/18 | 400 | +0.36px, capitalize |
| Body / price | Helvetica-Bold | 16/24 | 400 | +0.6px |
| Button | Helvetica-Bold | 16/19.2 | 400 | +1px, capitalize |
| Small print | Helvetica-Regular | 12/18 | 400 | +0.4px |
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.