# Arc'teryx · Design system migration spec

> Source: https://arcteryx.com  ·  Curated by OpenDesign  ·  en

> Excellent example of restraint-driven premium design where photography does all the emotional work while typography maintains strict hierarchy

## 1. Identity DNA

Arc'teryx operates at the intersection of technical alpine performance and high-fashion minimalism. Like a well-engineered expedition shell, the design system prioritizes functional clarity over ornamentation, allowing the material — in this case, photography and type — to speak directly to the brand's technical authority.

**One-liner:** A premium outdoor brand using bold typography and immersive photography to convey technical performance and alpine luxury.
**Keywords:** Performance · Technical · Outdoor · Premium · Minimalist
**Analogy:** Technical alpine expedition gear meets high-fashion minimalism

## 2. Color

The color system is radically reductive: a strict monochrome of white, near-black, and mid-gray forms the entire palette. All chromatic richness is delegated to the photography, which carries the full weight of visual storytelling.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#1A1A1A` | body text |
| `--muted` | `#666666` | placeholder |
| `--line` | `rgba(26, 26, 26, 0.15)` | divider |

**Color principle:** Monochromatic foundation with photography providing all color

This principle of chromatic restraint ensures the UI never competes with the product imagery it frames.

## 3. Typography

Typography employs Helvetica Now Display, a grotesque sans-serif chosen for its technical precision. High-contrast weight variation between bold display headlines and regular body text establishes clear hierarchy without decorative flourish.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 700 | -1px | Hero headlines |
| heading | 28px | 1.2 | 700 | 0.3px | Section titles |
| body | 16px | 1.56 | 400 | 0.32px | Paragraphs and descriptions |

**Type rules:**
- All-caps for navigation and primary CTAs
- Consistent 0.32px letter-spacing for body text
- High-contrast weight variation between headings and body

## 4. Spacing

An 8px base rhythm governs all spacing decisions, creating a consistent vertical cadence throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px base rhythm with generous whitespace

## 5. Surfaces

Surfaces are defined by minimal intervention: thin 1px solid borders on interactive elements and a subtle 0.2-opacity shadow for depth when needed. The system avoids decorative treatments that would distract from the photography.

- **Radius:** sm 2px · md 4px · lg 8px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.2) 0px 0px 18px 0px
- **Borders:** 1px solid borders on interactive elements

## 6. Layout

The layout skeleton begins with full-bleed hero sections where centered white text overlays establish immediate context. These flow into clean 3-column product grids that maintain generous whitespace between items.

- **Container max:** 1440px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-bleed hero images with centered text overlays, followed by multi-column product grids

## 7. Motion & Interaction

Motion serves functional feedback rather than decoration. Hover states use underline animations and smooth background-size transitions, all constrained to 0.2-0.3 second durations for immediate but unhurried response.

- **Durations:** micro 200ms · small 300ms · medium 500ms
- **Easing:** `ease-in-out`
- **Patterns:**
  - Hover underline animations
  - Background-size transitions on interactive elements
  - Smooth opacity transitions

- **Hover:** Underline appears on text links, background-color transitions on buttons
- **Click:** Immediate visual feedback
- **Transition:** 0.2s ease-in-out for all interactive states
- **Keyboard:** Standard focus navigation

## 8. Voice & Don'ts

The voice is technical, aspirational, and concise — mirroring the brand's approach to product design. Headlines are short, impactful all-caps statements, while calls to action remain action-oriented with gender segmentation.

- **Tone:** Technical, aspirational, concise
- **Headline style:** Short, impactful all-caps statements
- **CTA style:** Action-oriented with gender segmentation (Shop women's / Shop men's)
- **Avoid:** Flowery or overly casual language / Decorative UI elements / Bright accent colors

### Don'ts
- ❌ Don't use colored accent buttons — screenshot shows text links with underlines instead
- ❌ Don't use decorative drop shadows on cards — screenshot shows flat, image-forward layout
- ❌ Don't use multi-column complex layouts — screenshot shows simple 3-column product grids
- ❌ Don't use rounded pill buttons — screenshot shows rectangular elements with minimal border-radius
- ❌ Don't use gradient overlays — screenshot shows raw photography without color treatments
- ❌ Don't use small, cramped spacing — screenshot shows generous whitespace between sections

The system deliberately omits colored accent buttons, gradient overlays, and decorative UI elements, proving that premium experience often comes from what you choose not to include.

## System Prompt (paste into AI tool)

```
Arc'teryx is a premium outdoor technical apparel brand. The design system centers on a monochromatic palette (#FFFFFF background, #1A1A1A ink, #666666 muted) with photography providing all visual richness. Typography uses Helvetica Now Display (grotesque-sans) with all-caps navigation, bold display headlines, and 0.32px letter-spacing on body text. Layouts are full-bleed photography hero sections followed by clean 3-column product grids. Critical constraints: Never use colored accent buttons (text underlines only), avoid decorative shadows on cards, and maintain generous whitespace. Never use gradient overlays on photography. The system prioritizes restraint and lets imagery drive emotional impact while typography provides clear hierarchy and technical authority.
```