A quiet heritage-outdoor catalogue that signals craft through typography rather than colour — and notably NOT the muted-earth palette the category implies, since the chrome is strictly achromatic. The canvas is white alternating with a soft off-white #f9f9f9, ink is pure #000000 at near-total dominance, and the single warm value is a brass #876b39 reserved 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 the 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 exact inverse of the usual negative-tracking-at-display convention, with nothing above weight 400 except the Semibold button face. Proxima Nova carries body and labels at 14/25. The primary CTA is a SQUARE 0px black button, 54px tall, in serif Semibold uppercase with asymmetric optical padding of 18px 45px 15px, while the drawer variant inverts to transparent with black text on hover and links fade to #a1a1a1. Elevation is essentially refused: exactly ONE box-shadow exists on the whole page, structure is 1px #b6b8ba hairlines, and there is no canvas, video, blur or grain — the only two gradients are functional, a top-down hero scrim that seats white serif type over photography and a loading-skeleton shimmer. Motion is 0.3s on cubic-bezier(0.22,1,0.36,1).
⚠ site only
Browse Snow Peak in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: snowpeak.com (live DOM, computed styles), 2026-07-27 (desktop 1512px). Shopify theme. Coverage: homepage. **All:rootcustom 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.btnelement. 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**.
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.
| 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 |
| 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) |
| 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.
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.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).| 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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.