# Snow Peak — Marketing Site Design Spec

> Source: snowpeak.com (live DOM, computed styles), 2026-07-27 (desktop 1512px). Shopify theme.
> Coverage: homepage. **All `:root` custom properties belong to the Osano consent widget (`--osano-*`)** — the brand palette has no tokens and was read from the colour census. Osano, Yotpo (reviews) and Shoplift (A/B preview) rules excluded as third-party; the extractor's state-matcher landed only on Osano, so §4 states were re-queried directly against the real `.btn` element.
> Reality check: hint ("quiet Japanese minimal, muted earth") is half right — the restraint is real and the register is quiet, but **there is no earth-tone palette**. The chrome is strictly achromatic (black #000000 on white / off-white #f9f9f9) and the only warm value is a single **brass #876b39**, used as a link/secondary accent, alongside two deep forest greens (#144817, #063b26) as band fills. The real signature the hint misses is typographic: an **Adobe Garamond Pro SERIF display at weight 400 carrying POSITIVE tracking**, with buttons set in Garamond Semibold UPPERCASE at a very wide **+3.2px**.

## 1. Visual Theme & Atmosphere

A quiet, heritage-outdoor catalogue that signals craft through typography rather than colour. The page is achromatic — black text on white and a soft off-white #f9f9f9 — and its character comes from an unusual choice for an outdoor brand: a true old-style serif, Adobe Garamond Pro, set at weight 400 for every headline and, crucially, given *positive* letter-spacing (+0.58px at 58px, +2.16px at 24px) so the type reads open and unhurried rather than tight and modern. Buttons are square, black, and set in Garamond Semibold UPPERCASE at a very wide +3.2px track, which is the most recognisable element on the site. Structure is thin grey hairlines; there is exactly one shadow on the page and no imagery-as-background at all. Feels: quiet, considered, heritage, unhurried.

## 2. Color Palette & Roles

### Text & ink
| Token | Hex | Role / usage |
|---|---|---|
| ink | `#000000` | Primary text + headings (1847× — near-total dominance) |
| white | `#ffffff` | Text on black bands / imagery |
| muted | `#737373` | Secondary text |
| faint | `#e2e2e2` | Disabled / faint rules |
| link-hover | `#a1a1a1` | Link + button hover text |

### Surfaces & borders
| Token | Hex | Role / usage |
|---|---|---|
| canvas | `#ffffff` | Page background, cards |
| surface | `#f9f9f9` | Dominant section tint (37×, 8 large bands) |
| surface-2 | `#f3f4f6` | Inset panels |
| surface-3 | `#f2f2f2` | Alt tint |
| ink-fill | `#000000` | Primary button + dark bands (19×) |
| border | `#b6b8ba` | Dominant hairline (25×) |
| border-light | `#e5e7eb` | Card divider |
| border-mid | `#dedede` | Input / skeleton fill |
| scrim | `rgba(0,0,0,.3)` | Image scrim (also .2/.45/.5) |

### Accent
| Token | Hex | Role / usage |
|---|---|---|
| brass | `#876b39` | The one warm accent — links, secondary fills |
| brass-hover | `#9b7f4d` | Brass link hover |
| forest | `#144817` | Deep-green band fill |
| forest-deep | `#063b26` | Deepest green band |

Rule: chrome is black-on-white; brass `#876b39` is the only warm accent and the greens are band fills, never UI colour.

## 3. Typography Rules

- Display / headings / nav / buttons: `AGaramondPro-Regular` and `-Semibold` (Adobe Garamond Pro — an old-style serif), 330 + 24 uses. Specimen uses **EB Garamond** (open stand-in); the site ships Adobe Garamond Pro.
- UI / body / labels: `Proxima` (Proxima Nova), the most-used family at 1104×. Specimen falls back to a system sans; no close open equivalent is loaded (only one webfont link is permitted and it is spent on the serif, which carries the brand).
- Body: 14–16px, 400.

| Role | Family | Size/Line | Weight | Tracking | Case |
|---|---|---|---|---|---|
| Display (h1) | AGaramondPro-Regular | 58 / 62 | 400 | **+0.58px** | none |
| Section (h2) | AGaramondPro-Regular | 58 / 62 | 400 | **+0.58px** | none |
| Sub (h3) | AGaramondPro-Regular | 24 / 36 | 400 | **+2.16px** | none |
| Nav | AGaramondPro-Regular | 16 / 24 | 400 | +0.8px | none |
| Button | AGaramondPro-Semibold | 16 | 400 | **+3.2px** | UPPERCASE |
| Body / UI | Proxima | 14 / 25 | 400 | +0.42px | none |
| Eyebrow | Proxima | 12 / 16 | 400 | +2.16px | UPPERCASE |

Pattern worth stealing: **tracking is positive at every size and widens as type shrinks or goes uppercase** — the inverse of the usual "negative tracking at display" convention. Nothing on the page exceeds weight 400 except the Semibold button face.

## 4. Component Stylings

### Buttons
- **Primary**: bg `#000000`, text `#ffffff`, 1px `#000000` border, radius **`0px`**, h `54px`, AGaramondPro-Semibold 16px UPPERCASE **+3.2px**, padding `18px 45px 15px` (note the asymmetric optical padding).
- **Inverse (on dark / drawer)**: flips to transparent with `#000000` text on hover.
- **Brass link**: transparent, text `#876b39`, Proxima 14/400 +0.42px.
- **Small utility**: `#876b39` fill, white text, 4px radius, h 34px.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| `.btn` primary | `#000000` / white / 0px | stays `background:#000000; color:#fff` | not defined on brand chrome | — | — |
| `.cart-drawer__checkout-button.btn` | black fill | `color:#000000; background-color:transparent` (inverts) | — | — | — |
| Link (`a`) | `#000000` | `color:#a1a1a1`, 0.3s ease | — | — | — |
| Brass link | `#876b39` | `#9b7f4d` | — | — | — |

Focus: **no brand focus ring is defined** — the only `:focus-visible` rules on the page belong to the Osano widget. Anti-pattern; recommended replacement `0 0 0 3px rgba(135,107,57,.45)` (brass, on-brand).

### Inputs
- Skeleton/field fill `#dedede` at 4px radius, h 42px; hairlines `#b6b8ba`.

### Cards / product tiles
- White on `#f9f9f9`, thin `#e5e7eb` / `#b6b8ba` hairline, minimal radius; the page has **exactly one shadow**: `rgb(204,204,204) 0 0 2px 2px`.

## 5. Layout Principles

- Full-bleed photographic heroes with a top-down scrim `linear-gradient(#000 40px, rgba(0,0,0,0) 100%)` so white 58px serif headlines stay legible.
- Alternating white and `#f9f9f9` bands; occasional deep-forest `#144817`/`#063b26` feature blocks.
- Product grids in white tiles with serif titles and Proxima meta.
- Nav: white bar, Garamond 16px links at +0.8px; utility row (region "USA" at 12px uppercase Garamond).

## 6. Depth & Elevation

- Radius scale: `0px` on primary buttons (the rule for CTAs), then `1px`, `3px` (10×, dominant), `4px`, `14px`, `9999px` (8×, pills), `50%` (avatars).
- Borders carry structure: `1px #b6b8ba` (25×, dominant), `1px #000000` (9×), `1px #e5e7eb` (9×), `1px #ffffff` (8×), plus `1.5px` and `2px #000000` for emphasis.
- **Elevation is essentially refused** — one shadow on the entire page (`rgb(204,204,204) 0 0 2px 2px`).

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| color | 0.3s | ease | links (dominant, 320×) |
| all | 0.3s | cubic-bezier(0.22, 1, 0.36, 1) | cards, chrome (79×) |
| transform | 0.3s | cubic-bezier(0.22, 1, 0.36, 1) | image/card lifts (37×) |
| background-color, filter, border-color | 0.2s | ease-out | buttons |

House pair is **0.3s** with an ease-out-quint `cubic-bezier(0.22, 1, 0.36, 1)`; link colour fades on a plain 0.3s ease. Keyframes are almost entirely infrastructure — `loading` (2s infinite skeleton, 25×), `spin`, `swiper-preloader-spin`, `shopify-rotator`/`shopify-dash`, `acceleratedCheckoutLoadingSkeleton`, plus one authored `delay-overflow` (0.4s ease). Swiper carousels. **No `prefers-reduced-motion` block** despite infinite skeleton loops — anti-pattern.

## 8. Backgrounds, Effects & WebGL

Deliberately bare: **zero CSS background-image raster layers, zero canvas/WebGL, zero video, zero backdrop-filter, zero grain**. Only two gradients exist and both are functional rather than decorative — the hero legibility scrim `linear-gradient(rgb(0,0,0) 40px, rgba(0,0,0,0) 100%)` and a loading-skeleton shimmer `linear-gradient(90deg, #eee 25%, #dedede 50%, #eee 75%)`. Photography is placed as `<img>` content, not as background.

## 9. Do's and Don'ts

### Do
- Set headlines in an old-style serif at weight 400 with **positive** tracking, widening as size drops.
- Make the primary CTA a square (0px) black button in serif Semibold UPPERCASE at +3.2px.
- Keep chrome achromatic; use brass `#876b39` as the single warm accent for links.
- Alternate white with `#f9f9f9`; reserve forest greens for full bands only.
- Structure with 1px `#b6b8ba` hairlines and effectively no shadows.
- Use a top-down black scrim to seat white serif type over photography.
- Keep motion at 0.3s on `cubic-bezier(0.22, 1, 0.36, 1)`.

### Don't
- Don't use negative tracking anywhere — this system tracks positive at every size.
- Don't add weight: nothing exceeds 400 except the Semibold button face.
- Don't reach for earth tones or a muted-brown palette; the chrome is black and white.
- Don't add shadows, gradients, blur or texture — the page has one shadow and two functional gradients.
- Don't round the primary CTA; it is square.
- Don't ship without a focus ring (the site's omission) — use a brass ring instead.

## 10. Responsive Behavior

| Breakpoint | What changes |
|---|---|
| 240–480 | phone tiers, nav → hamburger |
| 576–768 | phone→tablet, grids reflow |
| 900–1035 | tablet→desktop |
| 1200–1440+ | desktop max-widths |

**65 breakpoints** — an extremely dense, device-targeted Shopify ladder with min/max pairs at nearly every 20–50px step (a theme-stack artefact rather than a designed system; note it as such). **5 container queries**. No dark-scheme blocks (`darkSchemeBlocks:0`), **0 reduced-motion blocks**.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` · Surface `#f9f9f9` · Text `#000000` · Muted `#737373` · Border `#b6b8ba` · Accent `#876b39`
- Fonts: Adobe Garamond Pro (display/nav/buttons) + Proxima Nova (UI) · Body: 14–16px · Radius: 0px CTA / 3px card · Control height: 54px
- Focus: none on site — use `0 0 0 3px rgba(135,107,57,.45)` · Hover: link → `#a1a1a1`; primary stays black

<snow-peak-marketing_design_language>
Use the Snow Peak design language: a quiet heritage-outdoor catalogue that signals craft through typography, not colour. The canvas is white alternating with a soft off-white #f9f9f9, ink is pure #000000 (near-total dominance), and the chrome is strictly achromatic — the ONE warm value is a brass #876b39 used for links and small fills, with deep forest greens #144817 and #063b26 appearing only as full-band fills. The signature is an old-style SERIF, Adobe Garamond Pro, set at weight 400 for every headline and given POSITIVE tracking that widens as type shrinks: +0.58px at the 58/62 display, +2.16px at the 24px sub, +0.8px on 16px nav, and a very wide +3.2px on buttons — the inverse of the usual negative-tracking-at-display convention, and nothing exceeds weight 400 except the Semibold button face. Proxima Nova carries body and labels at 14/25 with +0.42px. The primary CTA is a SQUARE 0px black button, 54px tall, in serif Semibold UPPERCASE with asymmetric optical padding (18px 45px 15px); the drawer variant inverts to transparent with black text on hover, and links fade to #a1a1a1 over 0.3s. Structure is 1px #b6b8ba hairlines and elevation is effectively refused — exactly one shadow on the page, no backdrop blur, no texture; the only two gradients are functional (a top-down black hero scrim so white serif type stays legible, and a loading skeleton shimmer). Motion is 0.3s on cubic-bezier(0.22,1,0.36,1). Feels: quiet, considered, heritage, unhurried. Avoid: negative tracking, weights above 400, an earth-tone or muted-brown palette, decorative shadows/gradients/blur, rounding the primary CTA, and shipping with no focus ring (use a brass 0 0 0 3px rgba(135,107,57,.45) instead).
</snow-peak-marketing_design_language>