---
version: alpha
name: "Arc'teryx"
description: "Precision outdoor apparel design system: near-black canvas, full-bleed alpine photography, Elan ITC Pro uppercase display paired with Helvetica Now Display body, and a near-zero radius geometry that reads like technical equipment."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f5f5f5"           # light off-white for secondary surfaces
  surface-dark: "#1a1a1a"      # near-black — primary canvas for dark hero zones

  # Ink / text
  ink: "#1a1a1a"               # near-black — primary text, not pure #000000
  ink-secondary: "#666666"     # secondary copy, metadata, nav sub-labels
  ink-muted: "#b2b2b2"         # disabled text, placeholder copy
  on-dark: "#ffffff"           # text on dark surfaces and over photography

  # Brand accent — Arc'teryx is deliberately accentless; black-and-white is the brand
  primary: "#1a1a1a"           # primary CTA fill — the brand color is near-black itself
  on-primary: "#ffffff"        # text on primary CTAs

  # Interaction states
  focus-ring: "#1a1a1a"        # keyboard focus outline
  text-hover: "#000000"        # darkens to true black on hover

  # Borders
  border: "#1a1a1a"            # bottom-underline nav borders, 1px tab indicators
  border-muted: "#cccccc"      # was rgba(204,204,204,0.8) — Google format requires hex /* estimated */

  # Shadow tints
  shadow-soft: "#c7c5c7"       # was rgb(199,197,199) — used in panel shadows

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 104px

rounded:
  none: 0px
  xs: 2px
  sm: 3px
  pill: 9999px

typography:
  display-hero:
    fontFamily: "elan-itc-pro, Futura PT, Gill Sans, Impact, sans-serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.64px
  display:
    fontFamily: "elan-itc-pro, Futura PT, Gill Sans, Impact, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.32px
  heading-section:
    fontFamily: "Helvetica Now Display, helvetica-now-display, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.35
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Helvetica Now Display, helvetica-now-display, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  body-large:
    fontFamily: "Helvetica Now Display, helvetica-now-display, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.36px
  body:
    fontFamily: "Helvetica Now Display, helvetica-now-display, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.32px
  body-strong:
    fontFamily: "Helvetica Now Display, helvetica-now-display, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.32px
  nav-link:
    fontFamily: "Helvetica Now Display, helvetica-now-display, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Helvetica Now Display, helvetica-now-display, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.28px
  label-caps:
    fontFamily: "elan-itc-pro, Futura PT, Gill Sans, Impact, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.32px
  caption:
    fontFamily: "Helvetica Now Display, helvetica-now-display, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.text-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-ghost-hover:
    backgroundColor: "{colors.on-dark}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 16px
  input:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px 45px 0px 15px
  input-focus:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px 45px 0px 15px
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 24px
  utility-bar:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.caption}"
    padding: 8px 16px
---

# Arc'teryx Design System

## Overview

Arc'teryx's visual identity is one of the most disciplined restraint exercises in outdoor retail. The canvas is white (`{colors.background}`) with a near-black ink (`{colors.ink}`) so close to pure black it reads like equipment — anodized, hard-annealed, finished without ornament. Yet neither the white nor the near-black are the first thing you see. The first thing you see is a climber: a tiny figure scaling a vast granite face at full bleed, edge to edge, no border radius on the container, no gradient scrim to soften the exposure. Arc'teryx doesn't decorate the photography. It *is* the photography.

The typeface pair drives the entire personality. **Elan ITC Pro** — a humanist geometric caps-only face commissioned by the brand — handles all display, headline, and label text. At large sizes with positive tracking (`{typography.display-hero}`), it communicates alpine precision and a kind of cold elegance that feels closer to Swiss watchmaking than North American outdoors. For body text and UI, **Helvetica Now Display** takes over: a contemporary redraw of the mid-century standard that sits cleanly beside Elan's eccentricities. The pairing communicates a brand that has been building technical mountaineering equipment since 1989 and has no particular interest in fashion.

The geometry is close to nothing. Border radii are `0px` on almost everything — product cards, buttons, containers, image frames. A `2px` radius appears only on the smallest interactive controls; `3px` on certain tab indicators. There are no pill buttons, no soft-rounded modals. The shape language echoes the form follows function philosophy of the gear itself: a harness, a buckle, a crampon are not rounded for comfort. Neither is the design system.

**Key Characteristics:**
- Near-black canvas ink (`{colors.ink}` `#1a1a1a`) — primary text and hero surfaces; not pure `#000000`
- Full-bleed alpine photography — rock, ice, granite, and movement with no containing border
- **Elan ITC Pro** for all display text: uppercase, geometric, with positive tracking (`{typography.display-hero}`)
- **Helvetica Now Display** for body and UI: clean, contemporary, readable at all sizes
- Sharp zero-radius geometry (`{rounded.none}`) on all containers, buttons, and cards
- Utility bar at top: near-black background (`{colors.surface-dark}`), white caption text — sale/navigation info
- Monochromatic palette — no accent color, no semantic color hierarchy; the brand commits to black and white
- Motion restraint: `0.2s ease-in-out` on buttons, `0.3s ease` on nav, `0.5s linear` on cross-fades
- Positive letter-spacing on display text (+0.32px–+0.64px) — the opposite of most premium brands' negative tracking
- UPPERCASE is the default display register; mixed case reserved for body and functional UI copy

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The primary page canvas. Product pages, editorial sections, and component backgrounds sit on pure white.
- **Off-White** (`{colors.surface}`): Light neutral surface for secondary card backgrounds, form zones, and section alternation.
- **Near-Black** (`{colors.surface-dark}`): The dominant dark canvas for hero zones, the utility bar, and the email input on dark surfaces. Not pure `#000000` — the `#1a1a1a` has a residual warmth.

### Ink / Text
- **Near-Black Ink** (`{colors.ink}`): Primary text, all levels. The brand's ink, shared with the dark surface — no distinction between background-as-color and text-as-color.
- **Mid Gray** (`{colors.ink-secondary}`): Secondary copy, sub-navigation labels, product metadata.
- **Light Gray** (`{colors.ink-muted}`): Disabled states, placeholder text, ancillary annotations.
- **On Dark** (`{colors.on-dark}`): White text on `{colors.surface-dark}` surfaces and over photography.

### Brand Accent
Arc'teryx has no branded accent color. The primary CTA (`{colors.primary}`) is the same `#1a1a1a` near-black as the text. The system's legibility and rhythm come from typography and photography, not from a hero hue.

### Interaction & Borders
- **Focus Ring** (`{colors.focus-ring}`): Near-black outline for keyboard focus — same ink as text.
- **Border** (`{colors.border}`): The 1px bottom-border underline used on nav tabs, button outlines, and section dividers.
- **Border Muted** (`{colors.border-muted}`): Light hairline used in section-rule separators. Was `rgba(204,204,204,0.8)` — flattened to opaque hex per Google format.

### Shadow Tints
- **Shadow Soft** (`{colors.shadow-soft}`): Was `rgb(199,197,199)` in extracted panel shadows — a neutral lavender-gray used in the rare depth moments on floating panels.

## Typography

### Font Family
- **Display / Labels**: `elan-itc-pro` — a custom geometric humanist commissioned by Arc'teryx. Caps-only register, positive tracking, used exclusively for all display, headline, eyebrow, and label text. Adobe Fonts-hosted. Closest Google Font substitute: Barlow Condensed or Oswald for the proportions, though neither replicates Elan's refined angularity.
- **Body / UI**: `Helvetica Now Display` (self-hosted as `HelveticaNowDisplayRegular` and `HelveticaNowDisplayBold` woff2). A contemporary Monotype rethinking of Helvetica. Falls back to `Helvetica Neue, Helvetica, Arial, sans-serif`.
- **OpenType Features**: Standard ligatures, tabular figures on prices and statistics. No swash or discretionary ligatures — this is a utility-forward type system.

### Hierarchy

The complete type scale is in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | 64px Elan ITC Pro / uppercase / +0.64px — main hero headline over photography |
| `display` | 32px Elan ITC Pro / uppercase / +0.32px — section headers, category landing titles |
| `heading-section` | 28px Helvetica Now Display / 400 — editorial and feature section heads |
| `heading-sub` | 22px Helvetica Now Display / 600 — sub-section heads and product feature callouts |
| `body-large` | 18px Helvetica Now Display / +0.36px — lead copy, PDPs, editorial intros |
| `body` | 16px Helvetica Now Display / +0.32px — standard running copy |
| `body-strong` | 16px / 700 — bold emphasis within body copy |
| `nav-link` | 16px Helvetica Now Display / 400 — primary navigation categories |
| `button-ui` | 14px Helvetica Now Display / 700 / uppercase / +0.28px — all CTA labels |
| `label-caps` | 18px Elan ITC Pro / uppercase — eyebrows, category labels, promo bar copy |
| `caption` | 10px Helvetica Now Display / 400 — smallest metadata, fine print |

### Principles
- **Positive tracking on display text**: Where premium brands track display type negatively, Arc'teryx uses positive tracking on Elan ITC Pro (`{typography.display-hero}` at +0.64px). This widens the geometry and gives the headlines an airy, high-altitude precision.
- **UPPERCASE is the default display voice**: All Elan ITC Pro usage is uppercase — the font is designed for it. Mixed case is reserved for Helvetica Now Display body and nav.
- **Weight contrast through faces, not weight**: The typographic drama comes from switching between Elan (display) and Helvetica Now (body), not from swinging between ultralight and black weights within one family.
- **Body type at +0.32px**: Even at 16px body size, Arc'teryx applies positive letter-spacing — a clinical, technical spacing that echoes spec sheets and equipment manuals.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px. The dominant spacing increments on the live site are 8px, 16px, 24px, and 32px for component internals, with 64px and 104px for section-level rhythm. The 104px value appears in vertical section padding on the hero zones — breathing room around photography, not around chrome.

### Grid & Container
- Max content width: 1440px, with full-bleed photography breaking the container at hero scale
- Product grid: 4-up desktop, 2-up tablet, 1-up mobile — tight 16px gutters, no card borders at rest
- Editorial and feature zones: alternating full-bleed photo and text-only sections, magazine-paced
- Hero: full-bleed photograph with centered uppercase Elan ITC Pro headline; no scrim, no overlay panel

### Whitespace Philosophy
- **Photography earns its silence**: Full-bleed imagery gets the space it needs; chrome is lean and functional, never decorative
- **No decorative dividers**: Section transitions happen through photography or whitespace, not rules or gradient fades
- **Tight product chrome, generous hero rhythm**: Product tiles are compact; hero and editorial sections breathe at 64–104px

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page canvas, product grid tiles, all persistent chrome |
| Hairline (Level 1) | `1px solid {colors.border}` | Nav tab underlines, section dividers, button outlines |
| Panel (Level 2) | `0 0 18px rgba(0,0,0,0.2)` at `{colors.shadow-soft}` | Floating nav panels, mega-menu dropdowns |
| Modal (Level 3) | `0 7px 14px rgba(50,50,93,0.1), 0 2px 4px rgba(0,0,0,0)` | Cart drawer, modal dialogs, overlays |

**Shadow Philosophy**: Arc'teryx runs almost entirely flat. The interface is organized by typography, spacing, and the intrinsic depth of photography — not by box shadows or atmospheric blur. The rare shadow (Level 2–3) is a soft, diffuse halo reserved for elements that genuinely float off the page (mega-menu panels, cart drawers). Cards and buttons never have shadow. The flatness is not a design trend; it matches the precision instrument logic of the equipment.

## Shapes

The full radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | **Everything**: product cards, buttons, image containers, inputs, modals |
| `xs` | 2px | Smallest interactive controls — close buttons, toggle elements |
| `sm` | 3px | Tab panel indicators, certain pop-up containers |
| `pill` | 9999px | Not used in primary UI — reserved only for cookie consent's search input |

The system is binary in practice: `none` (0px) is the default for virtually all surfaces. The `2–3px` micro-radii exist in a few cookie consent and third-party elements but not in the product's own design language. There are no pill buttons, no rounded cards, no soft-cornered modals. The geometry is sharp throughout because technical gear is sharp: hardware, closures, buckles.

## Components

The complete component spec lives in the `components:` token block above.

### Button Variants
- **`button-primary`** — Near-black (`{colors.primary}`) fill, white text, **0px radius**, `12px 24px` padding. 14px Helvetica Now Display 700 uppercase. Hover deepens to pure black (`{colors.text-hover}`). The brand's single button finish.
- **`button-secondary`** — White fill, near-black text, `{colors.border}` outline, 0px radius. Secondary actions, filter resets.
- **`button-ghost`** — Transparent fill, white text, white border — used over photography and dark surfaces. Hover inverts to white fill with dark text.

### Cards
- **`card`** — White (`{colors.background}`) surface, 0px radius, no resting shadow, no border. Product tiles are photograph + 14px label + price; hover opacity fades on the image (`0.3s ease`).

### Inputs
- **`input`** — Near-black (`{colors.surface-dark}`) fill, white text, white `1px` border, 0px radius — the email newsletter input. **`input-focus`** retains the dark fill; border sharpens to `{colors.border}`.

### Badges
- **`badge`** — Near-black fill, white text, 0px radius, small padding — used for status labels ("NEW", "SALE") on product cards.

### Navigation
- **`nav-bar`** — White background, near-black Helvetica Now Display category labels, centered, `16px 24px` padding. 1px `{colors.border}` bottom. Hover: underline animates up with `0.2s ease`.
- **`utility-bar`** — Near-black (`{colors.surface-dark}`) strip above the nav, 8px height, white caption text for sale/shipping announcements.

## Do's and Don'ts

### Do
- Use **Elan ITC Pro uppercase** for every display headline, eyebrow, and category label — it is the brand's voice
- Apply positive letter-spacing (`+0.32px` minimum) to all Elan ITC Pro usage, including at smaller sizes
- Keep border radius at `{rounded.none}` (0px) for all product cards, buttons, containers, and image frames
- Use full-bleed photography with no border, no scrim, no overlaid gradient — compose for legibility from the photograph itself
- Use `{colors.ink}` (`#1a1a1a`) as the primary CTA fill — resist adding a brand accent color
- Set body copy in Helvetica Now Display at 16px / +0.32px tracking — Arc'teryx even tracks body type positively
- Use the utility bar (`{colors.surface-dark}` background) for sale and shipping communication — it is permanent chrome
- Keep motion fast and functional: `0.2s ease-in-out` on buttons, `0.3s ease` on nav underlines, `0.5s linear` on cross-fades

### Don't
- Don't introduce a brand accent color — Arc'teryx's system is monochromatic; color lives in photography
- Don't round buttons, cards, or containers — the `0px` radius is the design system's signature geometry
- Don't set display text in mixed or sentence case — Elan ITC Pro is an uppercase font used in an uppercase register
- Don't apply negative letter-spacing to display text — Arc'teryx tracks *out*, not in; negative tracking reads wrong
- Don't add drop shadows to product cards or persistent chrome — elevation is flat by design
- Don't use a gradient scrim over photography — text legibility comes from photographic composition, not darkening
- Don't let body copy drift into Elan ITC Pro — Helvetica Now Display carries all readable text
- Don't soften the utility bar to a promo banner style — it is permanent navigational chrome, not a campaign element
- Don't reference the `#0000ee` browser-default link blue from the extraction — that is an unstyled fallback, not a brand token

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <425px | Single column; display hero drops to ~36px; hamburger nav; utility bar text truncates |
| Mobile | 425–768px | Single column; hero at ~40–48px; 1-up product grid; full-bleed photography maintained |
| Tablet | 768–1024px | 2-up product grid; navigation goes to a compact inline bar; hero at ~52px |
| Desktop | 1024–1440px | 4-up product grid; full primary nav; 64px display hero |
| Large Desktop | ≥1440px | Max 1440px container; 64px hero; 104px section padding; generous whitespace around photography |

### Touch Targets
- CTA buttons: `12px 24px` padding gives generous tap height on mobile
- Nav collapse: full-screen hamburger under 1024px with 56px row height minimums
- Product tile taps resolve to the image area — the entire card is the touch target, not just the label

### Collapsing Strategy
- **Navigation**: Top utility bar remains at all breakpoints; primary nav collapses to hamburger below 1024px
- **Hero**: Elan ITC Pro display headline scales from 64px desktop down to ~36px on mobile; weight and uppercase register maintained
- **Product grid**: 4-up → 2-up → 1-up with consistent 0px radius and no border change
- **Photography**: Full-bleed treatment preserved at all breakpoints; art-directed portrait crops at mobile
- **Spacing**: Section padding compresses from 104px toward 32px–48px; component internals stay tight

### Image Behavior
- Hero photography is always full-bleed, no border or frame radius — the edge of the photograph is the edge of the container
- Product images maintain square aspect ratio across breakpoints
- On mobile, hero images use art-directed portrait crops while preserving the subject (climber, athlete) in frame

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Primary text: Near-Black Ink (`{colors.ink}` `#1a1a1a`)
- Dark surface / utility bar: Near-Black (`{colors.surface-dark}` `#1a1a1a`)
- Secondary text: Mid Gray (`{colors.ink-secondary}`)
- CTA fill: Near-Black (`{colors.primary}`)
- Border: Near-Black hairline (`{colors.border}`)
- Text over photography: White (`{colors.on-dark}`)

### Example Component Prompts

- "Create an Arc'teryx-style hero: full-bleed photograph of a climber on granite, no scrim, no border radius. Center a 64px **Elan ITC Pro uppercase** headline 'FRESH OFF THE LINE' in white, `+0.64px` letter-spacing. Below: 16px Helvetica Now Display body in white, 400 weight. Then two 0px-radius buttons side by side — one near-black fill with white text ('Shop Women'), one transparent with white 1px border ('Shop Men') — 14px Helvetica Now Display 700 uppercase, 12px 24px padding."
- "Build an Arc'teryx product card: white (`{colors.background}`) fill, 0px radius, no shadow, no border. Square product photograph (0px radius container), then below: 14px Helvetica Now Display 700 uppercase product name in `{colors.ink}`, 14px 400 price, and a 14px `{colors.ink-secondary}` color-count caption ('3 colors'). On hover, image opacity transitions to 0.85 over `0.3s ease`."
- "Design the primary nav bar: white background, centered WOMEN / MEN / FOOTWEAR / DISCOVER in 16px Helvetica Now Display 400 `{colors.ink}`, with a 1px `{colors.border}` bottom edge. Arc'teryx archaeopteryx logotype left, 76px wide. On hover, a 1px `{colors.border}` underline animates up beneath the active category over `0.2s ease`. Above it, an `{colors.surface-dark}` utility bar at 10px Helvetica Now Display white caption text for shipping/sale announcements."
- "Create a primary CTA button: `{colors.primary}` (`#1a1a1a`) fill, white text, **0px radius**, `12px 24px` padding, 14px Helvetica Now Display 700 uppercase. On hover: background transitions to `{colors.text-hover}` (`#000000`) over `0.2s ease-in-out`. No shadow at any state."
- "Build an Arc'teryx email input for the dark newsletter zone: `{colors.surface-dark}` (`#1a1a1a`) background, `1px solid {colors.on-dark}` border, 0px radius, 0px top/bottom + 15px left padding, white placeholder 'Enter your email'. On focus, border remains white. Submit button: white arrow icon, right-aligned inside the field."
- "Create a category product grid section: white canvas, 4-up grid with 16px gutters. Each tile: 0px radius square image, 14px Helvetica Now Display 700 uppercase product name in `{colors.ink}`, 14px 400 price. Above the grid, a 32px Elan ITC Pro uppercase section title 'NEW ARRIVALS' in `{colors.ink}`, `+0.32px` tracking."

### Iteration Guide

1. Start with white (`{colors.background}`) canvas and near-black (`{colors.ink}` `#1a1a1a`) as both text and primary CTA — there is no accent color to reach for.
2. Set all display and headline copy in **Elan ITC Pro uppercase** with positive letter-spacing (`+0.32px` minimum). If it isn't uppercase Elan, it isn't a headline.
3. Use **0px border radius** everywhere by default. Check every container, button, and image frame — if it's rounded, it's wrong for this system.
4. Apply positive letter-spacing even on body text: `{typography.body}` runs at `+0.32px`. Negative tracking is not this brand.
5. Photography is the only depth and color. Let it be full-bleed and borderless. Add no scrim.
6. Utility bar is permanent dark chrome above the nav — `{colors.surface-dark}` fill, white `{typography.caption}` text for sale/shipping context.
7. Motion is functional: `0.2s ease-in-out` on buttons and interactive controls, `0.5s linear` for content cross-fades.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Arc'teryx. Brand names and trademarks belong to their respective owners.