PeakDesign

---
version: alpha
name: PeakDesign-design-analysis
description: "A premium, monochrome outdoor-gear commerce interface built on a hard split between pure-white product canvas and full-black category tiles. The system reads as precision-engineered and editorial — sharp 0px-radius buttons and cards, a serif display headline for emotional brand moments, and Geist sans for all UI chrome. Chromatic voltage is almost entirely absent: color lives only in product photography and a tiny reserved accent set (forest green, salmon, red). Deep black bands and black image tiles alternate with white to pace the long-scroll landing page."
colors:
  ink: "#1a211e"
  canvas: "#ffffff"
  surface-black: "#000000"
  surface-black-soft: "#0c0c0c"
  on-dark: "#ffffff"
  muted: "#606562"
  surface-soft: "#eef1f0"
  surface-tint: "#fbfdfc"
  hairline: "#e6e9e8"
  neutral-mist: "#cccfcd"
  neutral-fog: "#b8bcba"
  neutral-pale: "#d7dad8"
  neutral-line: "#e0e0e0"
  neutral-edge: "#e2e2e2"
  neutral-slate: "#363537"
  neutral-shadow: "#333132"
  neutral-graphite: "#505050"
  surface-forest: "#2f3734"
  accent-green: "#407961"
  accent-salmon: "#f5a898"
  accent-red: "#cc2e39"
typography:
  h2:
    fontFamily: "Geist, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: "0"
  body:
    fontFamily: "Bryant, Montserrat, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: "0"
  button:
    fontFamily: "Geist, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: "0"
rounded:
  sharp: 0px
  xs: 2px
  sm: 4px
  md: 8px
  lg: 16px
  xl: 32px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 32px
  xxxl: 40px
  huge: 48px
  section: 64px
components:
  button-primary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.sharp}"
    padding: 0px 16px
  card-product:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sharp}"
  category-tile:
    backgroundColor: "{colors.surface-black}"
    textColor: "{colors.on-dark}"
    typography: "{typography.h2}"
    rounded: "{rounded.sharp}"
  dark-band:
    backgroundColor: "{colors.surface-black}"
    textColor: "{colors.on-dark}"
    typography: "{typography.h2}"
    padding: 64px
  feature-panel-dark:
    backgroundColor: "{colors.surface-black}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.sharp}"
  filter-pill:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 8px 12px
  filter-pill-active:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 8px 12px
  circular-icon-button:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    rounded: "{rounded.full}"
  badge-new:
    backgroundColor: "{colors.surface-black}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.xl}"
    padding: 4px 12px
  input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
  newsletter-modal:
    backgroundColor: "{colors.surface-black}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.sharp}"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 64px
---

## Overview

Peak Design's landing surface is a precision-engineered, near-monochrome commerce interface. The system alternates two extremes: a pure-white product canvas (`{colors.canvas}` — #ffffff) and full-black surfaces (`{colors.surface-black}` — #000000) used for category tiles, editorial bands, and the newsletter modal. Between them sit soft-gray product cards (`{colors.surface-soft}` — #eef1f0). The result reads as engineered, editorial, and confident — the product photography carries all the color, while the UI chrome stays strictly grayscale.

Type voice splits into two functional roles. **Geist** (Vercel's open geometric sans) handles UI chrome — section headings (`{typography.h2}`, 18px / 600) and button labels (`{typography.button}`, 16px / 400). A second face, **Bryant**, carries the small tracked body/label text at 14px / 700. The large serif display line seen in the hero ("We obsess because you obsess.") is a distinct emotional-brand voice — it was not captured in the measurement pass and is documented as a Known Gap below.

The most distinctive structural signature is the **hard 0px radius**. Buttons (`{component.button-primary}`) and cards (`{component.card-product}`) both measured a literal `0px` corner radius — Peak Design deliberately favors sharp, engineered edges over friendly rounding. The only rounded elements are the circular icon/arrow buttons (`{rounded.full}`), the small "New" badge (`{rounded.xl}`), and the thin-border input (`{rounded.sm}`).

**Key Characteristics:**
- Hard-edged geometry: `{component.button-primary}` and `{component.card-product}` render at `{rounded.sharp}` (0px). Sharp corners are the system's engineering signature.
- Two-mode surface rhythm: white canvas bands and full-black bands (`{colors.surface-black}`) alternate down the page to pace the long scroll.
- White CTA buttons with dark ink labels (`{colors.ink}` — #1a211e). The primary CTA is a white block with all-caps sans text, on both light and dark bands.
- Black image tiles for category navigation (TRAVEL, OUTDOOR, STRAPS, CLIPS…), each with a circular arrow icon button in the corner (`{component.circular-icon-button}`).
- Near-total monochrome: color appears only in product photography and a tiny reserved accent set — `{colors.accent-green}` (#407961), `{colors.accent-salmon}` (#f5a898), `{colors.accent-red}` (#cc2e39).
- Filter pills for the best-sellers rail (CAMERA GEAR / TRAVEL / EVERYDAY…): light-gray inactive (`{component.filter-pill}`), inverting to dark ink when active (`{component.filter-pill-active}`).
- A serif display headline reserved for hero and editorial emotional moments (not in the measured token set).

## Colors

### Brand & Accent
Peak Design is a monochrome brand at the UI layer. The measured accents appear rarely — on product-photo details, tags, and small highlights, never on primary buttons or navigation.
- **Accent Green** (`{colors.accent-green}` — #407961): The closest thing to a brand hue — a muted forest green, appearing on small marks and product accents.
- **Accent Salmon** (`{colors.accent-salmon}` — #f5a898): A warm peach used sparingly on product details / strap hardware.
- **Accent Red** (`{colors.accent-red}` — #cc2e39): A saturated red reserved for the smallest highlight moments (sale flags, alert marks).

### Surface
- **Canvas** (`{colors.canvas}` — #ffffff): The default page floor and the product-rail background.
- **Surface Soft** (`{colors.surface-soft}` — #eef1f0): Light-gray product-card and filter-pill background.
- **Surface Tint** (`{colors.surface-tint}` — #fbfdfc): A barely-off-white used on very-soft panels.
- **Surface Black** (`{colors.surface-black}` — #000000): Category tiles, editorial dark bands, the newsletter modal, and the dark feature panel.
- **Surface Black Soft** (`{colors.surface-black-soft}` — #0c0c0c): A near-black used for nested dark panels.
- **Surface Forest** (`{colors.surface-forest}` — #2f3734): A very dark green-tinted surface variant.

### Text
- **Ink** (`{colors.ink}` — #1a211e): The primary dark text tone and the color of button labels on white CTAs. A near-black with a faint green cast.
- **On Dark** (`{colors.on-dark}` — #ffffff): Text on all black surfaces — category tiles, dark bands, modal, feature panel.
- **Muted** (`{colors.muted}` — #606562): Secondary / supporting text.

### Neutral Ramp (hairlines & tonal grays)
A cool gray ramp used for borders, dividers, disabled states, and subtle fills: `{colors.hairline}` (#e6e9e8), `{colors.neutral-pale}` (#d7dad8), `{colors.neutral-mist}` (#cccfcd), `{colors.neutral-fog}` (#b8bcba), `{colors.neutral-line}` (#e0e0e0), `{colors.neutral-edge}` (#e2e2e2), `{colors.neutral-graphite}` (#505050), `{colors.neutral-slate}` (#363537), `{colors.neutral-shadow}` (#333132). These carry no semantic meaning individually — they form the grayscale scaffolding between white and black.

## Typography

### Font Family
The system runs **Geist** for UI chrome (section headings and button labels) and **Bryant** for small tracked body/label text. Geist is Vercel's open-source geometric sans — the fallback stack walks `-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`. The functional split:
- Geist (`{typography.h2}`, `{typography.button}`) — section headings and button labels.
- Bryant (`{typography.body}`, 14px / 700) — small tracked labels, product meta, footer link lists.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.h2}` | 18px | 600 | 1.2 | 0 | Section headings, category-tile labels — Geist |
| `{typography.button}` | 16px | 400 | 1.2 | 0 | Button labels, input text — Geist |
| `{typography.body}` | 14px | 700 | 1.4 | 0 | Small labels, product meta, footer lists — Bryant |

### Principles
The UI type stays small and quiet — 14–18px across all measured roles — deliberately deferring visual weight to the product photography and the black/white surface contrast. Bryant runs at heavy 700 weight at small sizes, giving the label text a compact, uppercase-friendly stamp (e.g., "CLAIM DISCOUNT", "SHOP NOW", "FIND A RETAILER").

### Note on Font Substitutes
**Bryant** is a licensed commercial typeface (House Industries) and is not shipped as an open web font in this system. Use **Montserrat** (weight 700) as the closest open-source substitute — it preserves Bryant's geometric, slightly-rounded character at small tracked sizes. **Geist** is open-source (SIL Open Font License via Vercel) and can be shipped directly.

## Layout

### Spacing System
- **Base unit:** 4px.
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 20px · `{spacing.xl}` 24px · `{spacing.xxl}` 32px · `{spacing.xxxl}` 40px · `{spacing.huge}` 48px · `{spacing.section}` 64px.
- **Dominant values (by frequency):** `{spacing.xl}` (24px) is by far the most-used gap/padding, followed by `{spacing.xs}` (8px), `{spacing.xxs}` (4px), and `{spacing.md}` (16px).
- **Section rhythm:** `{spacing.section}` (64px) is the vertical rhythm between major editorial bands.

### Grid & Container
- **Best-sellers rail:** a horizontally scrolling 4-up product carousel with arrow-button paging and dot pagination.
- **Category tile grid:** 3-up grid of black image tiles at desktop (TRAVEL / PACKING CUBES / OUTDOOR, then subsequent rows).
- **Editorial feature grid:** OUR MISSION / IMPACT REPORT / FILMS as a 3-up black-tile row.
- **Footer:** multi-column link list (SUPPORT / ABOUT / SHOP / store + newsletter block) at desktop.

### Whitespace Philosophy
The layout uses generous 64px band spacing and a 24px internal grid gap. Product cards and category tiles sit edge-to-edge inside their grids, letting the black/white surface contrast — rather than borders — define regions. The whitespace is calm and editorial, deferring attention to full-bleed product photography.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, no border | Default cards, category tiles, bands — the system is overwhelmingly flat |
| Hairline | 1px `{colors.hairline}` / neutral-ramp border | Inputs, dividers |
| Soft glow | `rgba(0,0,0,0.04) 0px 0px 4px 0px` (measured) | A very faint ambient lift on a single elevated element |
| Drop shadow | `rgba(0,0,0,0.1) 0px 10px 15px -3px, rgba(0,0,0,0.1) 0px 4px 6px -4px` (measured) | The strongest shadow in the system — used on one floating/elevated surface (e.g., a dropdown or floating card) |

The elevation philosophy is **flat-first**. Peak Design relies on hard-edged surface blocks and black/white contrast for depth rather than shadow. Only two box-shadow values were measured across the entire page, each used once.

## Shapes

### Border Radius Scale

| Token | Value | Use |
|---|---|---|
| `{rounded.sharp}` | 0px | Buttons, product cards, category tiles — the system's default corner (measured 0px) |
| `{rounded.xs}` | 2px | Rare small accents |
| `{rounded.sm}` | 4px | Text inputs, filter pills |
| `{rounded.md}` | 8px | Occasional small panels (most frequent radius in the measured set after 0/4) |
| `{rounded.lg}` | 16px | Rare larger panel corner |
| `{rounded.xl}` | 32px | The "New" product badge, pill-shaped tags |
| `{rounded.full}` | 9999px | Circular arrow / icon buttons, the modal close button |

### Photography Geometry
Product and lifestyle imagery fills its containers edge-to-edge at `{rounded.sharp}` (0px) — the black category tiles are full-bleed photographs cropped to hard rectangles. The circular arrow controls (`{rounded.full}`) provide the only curved counterpoint against the otherwise strictly rectilinear layout.

## Components

### Buttons

**`button-primary`** — The signature CTA. White block (`{colors.canvas}`) with dark `{colors.ink}` label in `{typography.button}` (Geist 16px / 400), padding 0px × 16px, rounded `{rounded.sharp}` (0px, measured). Used for "CLAIM DISCOUNT", "SHOP NOW", "SHOP NEW ARRIVALS", "WATCH THE FILM". Renders identically on white and black bands — the white block reads as the action regardless of surface.

**`circular-icon-button`** — A perfectly circular icon button (`{rounded.full}`), `{colors.canvas}` background with `{colors.ink}` icon. Used for the carousel paging arrows, category-tile corner arrows, and the newsletter-modal close (X) button.

### Cards & Tiles

**`card-product`** — Best-sellers rail card. Light-gray `{colors.surface-soft}` background, `{colors.ink}` text, rounded `{rounded.sharp}` (0px, measured). Holds the product image, name, colorway line, and price in `{typography.body}`.

**`category-tile`** — Full-bleed black image tile for category navigation (TRAVEL, PACKING CUBES, OUTDOOR, PHONE CASES, WALLETS, MOTORCYCLE, STRAPS, CLIPS, TRIPODS). Background `{colors.surface-black}`, label in `{colors.on-dark}` / `{typography.h2}` at bottom-left, `{component.circular-icon-button}` at bottom-right, rounded `{rounded.sharp}`.

**`feature-panel-dark`** — The "At the expense of nobody / FEATURED" editorial panel. Background `{colors.surface-black}`, text `{colors.on-dark}`, contains a small tracked eyebrow, a serif heading, body copy in `{typography.body}`, and a `{component.button-primary}`.

**`badge-new`** — Small "New" tag over product imagery. Background `{colors.surface-black}`, text `{colors.on-dark}` in `{typography.body}`, rounded `{rounded.xl}` (pill-like), padding 4px × 12px.

### Bands

**`dark-band`** — Full-width black editorial band ("Your next essential just dropped."). Background `{colors.surface-black}`, text `{colors.on-dark}`, `{spacing.section}` (64px) vertical padding, containing an eyebrow label, serif heading, body line, and a `{component.button-primary}`.

### Filters

**`filter-pill`** — Best-sellers category filter (inactive). Background `{colors.surface-soft}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.sm}`, padding 8px × 12px.

**`filter-pill-active`** — Active filter (e.g., "CAMERA GEAR"). Inverts to `{colors.ink}` background with `{colors.on-dark}` text, same radius and padding.

### Inputs & Forms

**`input`** — Text input (retailer-location search, newsletter email). Background `{colors.canvas}` (measured), 1px hairline border in `{colors.hairline}`, rounded `{rounded.sm}` (4px, measured), padding 12px × 16px, text in `{typography.button}`.

### Overlays & Footer

**`newsletter-modal`** — Full-viewport promo modal ("We obsess because you obsess."). Full-bleed dark product photograph over `{colors.surface-black}`, text `{colors.on-dark}`, serif headline, body sub-line in `{typography.body}`, a white `{component.button-primary}`, and a `{component.circular-icon-button}` close control at top-left.

**`footer`** — Page-closing footer on `{colors.canvas}` with `{colors.ink}` text. Multi-column link lists (SUPPORT / ABOUT / SHOP), a store selector, a newsletter subscribe block (`{component.input}` + `{component.button-primary}` "SIGN ME UP"), social icon row, and certification marks. Body text in `{typography.body}`, `{spacing.section}` (64px) padding.

## Do's and Don'ts

### Do
- Keep buttons and cards at `{rounded.sharp}` (0px). The hard edge is the system's engineering identity.
- Use `{component.button-primary}` (white block, `{colors.ink}` label) on both light and dark bands — it reads as the action either way.
- Alternate white canvas bands with full-black bands / tiles to pace the long scroll.
- Let product photography carry the color. Keep the UI chrome grayscale.
- Reserve `{colors.accent-green}`, `{colors.accent-salmon}`, and `{colors.accent-red}` for tiny highlight moments only.
- Pair the serif display headline with Geist/Bryant sans supporting text for emotional-brand moments.
- Use `{component.circular-icon-button}` for all directional / close controls — the circle is the only curved shape in the system.

### Don't
- Don't round buttons or product cards — 0px radius is measured and intentional.
- Don't introduce accent color into navigation, buttons, or headings. The action layer is strictly monochrome.
- Don't add heavy shadows; the system is flat-first with only two faint measured shadows.
- Don't put body copy in the serif display face — the serif is reserved for headlines and emotional lines.
- Don't repeat the same surface mode in consecutive bands — the pacing alternates white → gray-cards → black tiles → black band → white → footer.
- Don't ship Bryant directly (licensed) — use the documented Montserrat substitute.

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 768px | Category tiles stack to 1-up; best-sellers rail becomes a swipe carousel; footer columns collapse to stacked lists; newsletter modal scales to full screen |
| Tablet | 768–1024px | Category grid 2-up; product rail shows fewer cards; footer to 2-up columns |
| Desktop | 1024–1440px | Category grid 3-up; 4-up best-sellers rail; full multi-column footer |
| Wide | > 1440px | Same as desktop with wider outer margins |

### Touch Targets
- `{component.button-primary}` uses 16px horizontal padding; effective height derives from line-height and band padding (exact height not measured — see Known Gaps).
- `{component.circular-icon-button}` provides a full-circle tap target for carousel and close controls.
- `{component.input}` uses 12px × 16px padding for a comfortable tap area.

### Collapsing Strategy
- The best-sellers rail scrolls horizontally with arrow-button paging on desktop and swipe on mobile; dot pagination indicates position.
- Category tiles reduce columns (3 → 2 → 1) rather than shrinking; each tile retains its bottom-left label + corner arrow.
- The dark editorial bands stay full-bleed at every breakpoint.
- The footer collapses its multi-column link lists into stacked groups on mobile.

### Image Behavior
- Category-tile and hero photography is full-bleed, cropped to hard rectangles at `{rounded.sharp}`.
- Product-card imagery sits centered on the `{colors.surface-soft}` card.

## Iteration Guide

1. Focus on ONE component at a time. Reference its YAML key directly (`{component.category-tile}`, `{component.filter-pill-active}`).
2. Variants of an existing component (`-active`) live as separate entries in `components:`.
3. Use `{token.refs}` everywhere — never inline hex.
4. Never document hover. Default and active/pressed states only.
5. Keep 0px radius on buttons and cards; only circular controls and the "New" badge deviate.
6. Keep the action layer monochrome — accents stay in photography and micro-highlights.
7. When in doubt about emphasis: use surface contrast (white vs black block) before adding color.

## Known Gaps

- **The serif display headline is not in the measured token set.** The hero and editorial headlines ("We obsess because you obsess.", "Your next essential just dropped.", "At the expense of nobody.") are clearly a distinct serif display face in the screenshots, but the measurement pass captured only Geist (h2, button) and Bryant (body). A `display-serif` typography role should be added once the face, size ramp, weight, and tracking are measured directly.
- **Button height is not measured.** `{component.button-primary}` padding measured as `0px 16px` with no vertical value; effective height depends on line-height and container — treat rendered height as derived until confirmed.
- **Bryant is a licensed commercial typeface** (not flagged in fonts_licensed but confirmed proprietary); the Montserrat substitute is documented. Verify Bryant licensing before shipping.
- Accent colors (green / salmon / red) were captured at low frequency and may originate partly from product photography rather than UI tokens; their exact UI usage needs confirmation.
- Only two box-shadow values were measured (each used once); a fuller elevation scale is not available.
- Only the landing page was captured — product-detail, cart, and checkout surfaces are out of scope.
- Form validation states (error / success / focus) beyond the base `{component.input}` were not extracted.
- Animation and transition timings (carousel paging, modal entrance, tile hover-reveal) are not in scope.

<!-- Documented by Duply · real-world design systems as ready-to-use DESIGN.md for AI coding agents · https://duply.ai/peakdesign/design-md -->