# Arc'teryx — Marketing site Design Spec

> 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 `#136f99` blue is Shopify's unbranded payment button and `#232936` is 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

| 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.

## 3. Typography Rules

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 |

## 4. Component Stylings

Everything is **square — 0px radius**. The entire page carries exactly one
rounded value (`8px 8px 0 0`, a single drawer top). Buttons are 47px tall at
`0 30px` padding with 16px Bold labels at +1px tracking, in an inverse pair:
`.od-button__primary` is #1a1a1a with white text, hovering to a solid
#1a1a1a/#ffffff lock; `.od-button__secondary` inverts to #ffffff/#1a1a1a on
hover. Over photography, buttons become solid white blocks. Borders: 1px #e5e5e5
hairlines (22 uses) and a heavier 2px #000000.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary button | #1a1a1a, #fff, **0px**, 47px, +1px | bg #1a1a1a / color #ffffff | `outline:none; box-shadow:unset` (anti-pattern) | — | bg #b2b2b2, text #e9e9e9 |
| Secondary button | outline, 2px #000000 | bg #ffffff / color #1a1a1a | as above | — | as above |
| On-image button | solid #ffffff block, 0px | — | as above | — | — |
| Field | 1px #e5e5e5, 0px | — | `box-shadow: unset; outline: none; outline-offset: 0` | — | — |

Focus note: fields explicitly zero out **both** `:focus` and `:focus-visible`
(`box-shadow: unset; outline: none; outline-offset: 0`). Recorded as an
**anti-pattern** — supply a visible ring (e.g. `0 0 0 2px #121212`) rather than
copying it. Note also that disabled state is a real designed pair
(#b2b2b2 on #e9e9e9), not just reduced opacity.

## 5. Layout Principles

A thin #1a1a1a utility bar (brand switcher — Arc'teryx / Veilance / Outlet —
promos, store finder, locale) sits above a white nav bar with the bird logo left,
five capitalized categories centred, and search plus three icons right. Below,
full-bleed near-black product photography with the Elan display and a pair of
white square buttons bottom-left. Content stacks in edge-to-edge photographic
bands. **5 container queries** size the product components.

## 6. Depth & Elevation

**The radius scale is effectively empty** — one value on the entire page
(`8px 8px 0 0`), making this the squarest capture in the library. Shadows are
almost as sparse: a transparent 2px ring placeholder and one
`rgba(0,0,0,.15) 0 -2px 10px` on a sticky bar. Structure is carried entirely by
borders — 1px #e5e5e5 (22 uses), 2px #000000 (5), 1px #000000, 1px #1a1a1a — and
by the contrast between white chrome and near-black imagery. No backdrop filters.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| **text-decoration** | 0.1s | ease | link underlines (dominant, **124x**) |
| box-shadow | 0.1s | ease | focus/interaction rings |
| opacity | 0.4s | cubic-bezier(0.25, 0.46, 0.45, 0.94) | image and panel fades |
| top, font-size | 0.1s | ease | floating field labels |
| transform, opacity | 0.15s | ease | small reveals |
| all | 0.3s | ease-in-out | misc |

The dominant transition is unusual and worth noting: **`text-decoration 0.1s
ease` on 124 elements** — the site animates link underlines specifically, at a
very fast 0.1s, which is what gives navigation its crisp mechanical feel.
`@keyframes` are largely platform (`shopify-rotator`, `shopify-dash`,
`acceleratedCheckoutLoadingSkeleton`, `indeterminateAnimation`) plus theme
motion: `translateAnnouncementSlideIn`/`Out`, `animateMenuOpen`, `animateAmbient`,
`slideIn`, `fadeIn` (0.6s). A rich easing library is declared, including an
**overshoot** `cubic-bezier(0.25, 1.6, 0.25, 1)`. The site ships **four
`prefers-reduced-motion: reduce` blocks** — honour them.

## 8. Backgrounds, Effects & WebGL

**Nothing procedural at all**: zero gradients, zero backdrop filters, zero
canvas/WebGL, zero videos, zero grain, and no CSS raster background layers — the
photography is all `<img>` content rather than CSS backgrounds. Atmosphere comes
purely from near-black studio product photography against white chrome, with
`rgba(18,18,18,.5)` and `rgba(0,0,0,.8)` scrims where text sits over image.

## 9. Do's and Don'ts

### Do
- Keep everything square — 0px radius is the rule, not an exception.
- Pair a SERIF display (UPPERCASE, +0.6px) with Helvetica for all UI.
- Track everything positively (+0.32 to +1px); nothing is set tight.
- Keep chrome achromatic; let the garments supply colour.
- Use 1px #e5e5e5 hairlines and 2px #000000 for structure, not shadows.
- Design a real disabled pair (#b2b2b2 / #e9e9e9) rather than reducing opacity.
- Honour the four reduced-motion blocks.

### Don't
- Don't round corners — the entire page has one rounded value.
- Don't introduce a UI accent colour.
- Don't set the display in a sans; the serif is the signature.
- Don't tighten tracking.
- Don't copy the `outline:none; box-shadow:unset` focus removal on fields.

## 10. Responsive Behavior

A dense Shopify ladder (37 steps) with a notable cluster of near-duplicate values
around the tablet seam (749/750, 767/768/769, 989/989.95/990/991/992):

| Breakpoint | What changes |
|---|---|
| 220 / 480 / 500px | small-phone tiers |
| 568 / 575 / 600 / 640px | phone |
| 749–769px | phone → tablet seam (heavily subdivided) |
| 989–992px | tablet → small-desktop seam |
| 1024 / 1200px | desktop |
| 1400 / 1500 / 1600px | wide |
| 1980 / 2048px | ultra-wide |

**5 container queries** and **4 reduced-motion blocks**. No dark-scheme blocks
(`darkSchemeBlocks:0`).

## 11. Agent Prompt Guide

- Canvas `#ffffff` · Ink `#121212` · Dark fill `#1a1a1a` · Muted `#999999` · Border `1px #e5e5e5` / `2px #000000` · Disabled `#b2b2b2` on `#e9e9e9` · **No accent colour**
- Font: Elan serif display 52/62.4 UPPERCASE +0.6px (Playfair Display stand-in) + Helvetica UI 16-18px (Inter) · **Radius: 0px everywhere** · Control height: 47px
- Focus: site sets `outline:none; box-shadow:unset` — add `0 0 0 2px #121212` · Motion: `text-decoration 0.1s ease` on 124 links

<arcteryx_design_language>
Precision retail with an unexpectedly literary voice — precise, but not the cold
utilitarian sans the category implies. White #ffffff chrome with #121212 ink,
#1a1a1a dark fills, rgba(18,18,18,.85) secondary and #999999 muted, and NO accent
colour in the UI at all: the garments supply every bit of colour. The typographic
signature is a two-voice split — ELAN, a SERIF, used only for display at 52/62.4
UPPERCASE with +0.6px tracking (stand-in Playfair Display), against Helvetica in
three cuts for absolutely everything else: nav 18/18 capitalize, body 16/24,
buttons 16/19.2 Bold at +1px, small print 12/18 — with positive tracking
throughout, nothing set tight. Geometry is rigorously SQUARE: the entire page
carries one rounded value (8px 8px 0 0), making 0px radius the rule. Buttons are
47px at 0 30px in an inverse pair, #1a1a1a with white text or outlined with a 2px
#000000 border, 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 — shadows and gradients are
essentially absent, and there is no canvas, video or backdrop filter anywhere.
The dominant motion is unusual: text-decoration 0.1s ease on 124 elements,
animating link underlines specifically, which is what makes navigation feel
mechanical and crisp; four prefers-reduced-motion blocks ship. Feels: precise,
editorial, engineered, high-contrast. Avoid: rounding corners, a UI accent colour,
a sans display face, tightened tracking, copying the outline:none focus removal.
</arcteryx_design_language>