---
name: Arc'teryx
description: "Excellent example of restraint-driven premium design where photography does all the emotional work while typography maintains strict hierarchy"
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#1A1A1A"
  neutral: "#666666"
  line: "rgba(26, 26, 26, 0.15)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 28px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "0.3px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.56
    fontWeight: 400
    letterSpacing: "0.32px"

rounded:
  sm: 2px
  md: 4px
  lg: 8px
  pill: 999px

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

---

## Overview

A premium outdoor brand using bold typography and immersive photography to convey technical performance and alpine luxury.

*Technical alpine expedition gear meets high-fashion minimalism*

## Colors

Monochromatic foundation with photography providing all color

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1A1A1A`)** — uses `ink` token
- **Muted (`#666666`)** — uses `muted` token
- **Borders (`rgba(26, 26, 26, 0.15)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* 8px base rhythm with generous whitespace

## Elevation & Depth

- rgba(0, 0, 0, 0.2) 0px 0px 18px 0px
- Borders: 1px solid borders on interactive elements

## Shapes

- `sm`: 2px
- `md`: 4px
- `lg`: 8px
- `pill`: 999px

## Components

- **button:** Text links with bottom underline border, all-caps
- **card:** Image-based product cards with typography overlay
- **input:** Minimal search with icon trigger
- **hero:** Full-viewport photography with centered white text

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

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