---
version: alpha
name: Peak Design
description: Utilitarian outdoor gear language built on a warm forest-near-black ink (#1a211e, never pure black), condensed uppercase Bryant display paired with a clean Geist body, tight 4px radii on category chips, and full-bleed photography of gear in the wild. Engineered, earthy, field-tested.

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#fbfdfc"           # off-white near-white band
  surface-soft: "#eef1f0"      # light category-chip fill, muted card
  surface-mute: "#e5e5e5"      # mid neutral surface, modal CTA fill

  # Ink / text — the warm forest-near-black is the signature
  ink: "#1a211e"               # warm forest near-black: headings, body, chip fill
  ink-deep: "#0c0c0c"          # deepest near-black, input text
  ink-secondary: "#363537"     # supporting copy
  ink-muted: "#606562"         # captions, metadata, muted button text
  on-dark: "#ffffff"           # text on the dark ink surfaces and over photography

  # Accent — warm/technical, used sparingly
  accent: "#3860be"            # link/interactive blue (hover state)
  accent-green: "#6cc04a"      # field green (utility/eco moments)
  accent-walnut: "#947051"     # warm walnut (a secondary brand neutral)

  # Borders
  border: "#e5e7eb"            # hairline dividers, card edges
  border-strong: "#cccfcd"     # input + outlined-control borders

  # Shadow tints (opaque approximations for the elevation table)
  shadow-soft: "#999999"       # was rgb(153,153,153) 0 2px 10px -3px — kept as hex
  shadow-ambient: "#000000"    # was rgba(0,0,0,0.3) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Bryant, Alia-Bryant-Pro, Geist, Helvetica, Arial, sans-serif"
    fontSize: 68px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -1px
  display:
    fontFamily: "Exposure-10, Bryant, Geist, Helvetica, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -1.28px
  display-sub:
    fontFamily: "Exposure-10, Bryant, Geist, Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.48px
  heading:
    fontFamily: "Bryant, Alia-Bryant-Pro, Geist, Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Bryant, Alia-Bryant-Pro, Geist, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0px
  body-large:
    fontFamily: "Geist, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body:
    fontFamily: "Geist, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-strong:
    fontFamily: "Geist, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  button:
    fontFamily: "Bryant, Alia-Bryant-Pro, Geist, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.5px
  label-mono:
    fontFamily: "Bryant, Alia-Bryant-Pro, Geist, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.6px
  caption:
    fontFamily: "Geist, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px
  4xl: 40px
  5xl: 56px
  6xl: 64px

rounded:
  xs: 2px
  sm: 4px
  md: 8px
  pill: 20px
  full: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
  button-primary-hover:
    backgroundColor: "{colors.ink-deep}"
    textColor: "{colors.on-dark}"

  button-light:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
  button-light-hover:
    backgroundColor: "{colors.surface-mute}"
    textColor: "{colors.ink}"

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
  button-outline-hover:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 16px
  card-soft:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 16px

  input:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-deep}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 16px 12px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-deep}"

  nav-bar:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.label-mono}"
    padding: 16px 24px

  link:
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 0px
  link-hover:
    textColor: "{colors.accent}"

  category-chip:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
  category-chip-light:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 8px 16px

  eyebrow:
    textColor: "{colors.ink}"
    typography: "{typography.label-mono}"
    padding: 0px
---

# Peak Design Design System

## Overview

Peak Design's site looks like the gear it sells: matte, rugged, and built for the field. The single most distinctive move is the ink color — not pure black, but a **warm forest near-black** `{colors.ink}` (`#1a211e`), a desaturated green-tinted charcoal that reads like anodized aluminium or waxed canvas. It's the dominant text color, the nav fill, and the category-chip fill, and it gives the whole interface an outdoor, technical warmth that pure `#000000` would lose. Against white (`{colors.background}`) and full-bleed photography of people hauling gear through forests and rivers, that warm-black ink is the through-line that ties the system together.

The typographic pairing carries the engineered-outdoor character. Display and labels run in **Bryant** (and the condensed Exposure for the largest heroes) — frequently **uppercase**, weighty (500–700), with tight negative tracking on the big sizes (`{typography.display}` at -1.28px). Body and UI copy switch to **Geist**, a clean, neutral sans that keeps long paragraphs readable. The contrast is the point: a chunky, uppercase, almost industrial display voice for headlines and category labels, and a calm, modern sans for everything you actually read. The mountain-peak logomark echoes the same blend of geometric confidence and field utility.

The geometry is tight and pragmatic. Category chips, buttons, inputs, and image frames carry a small **4px radius** (`{rounded.sm}`) — just enough to feel finished, never soft or playful. The chips themselves are a signature pattern: small uppercase-labeled rectangles in either the warm-black ink fill or a pale `{colors.surface-soft}` fill, used to navigate "Camera Gear", "Travel", "Bags". Color beyond the monochrome base is rationed — an interactive blue (`{colors.accent}`) for link hovers, a field green (`{colors.accent-green}`) for utility moments — so the photography and the warm-black chrome stay center stage. The result reads as engineered, earthy, and field-tested rather than precious.

**Key Characteristics:**
- **Warm forest near-black ink** (`{colors.ink}` `#1a211e`) — a green-tinted charcoal, never pure `#000000`; the system's signature color
- Pure white canvas (`{colors.background}`) with off-white (`{colors.surface}`) bands and full-bleed outdoor photography
- **Typeface pairing**: condensed/weighty **Bryant** (often uppercase) for display and labels + clean **Geist** for body and UI
- Tight negative tracking on large display (`{typography.display}` at -1.28px) — chunky, confident headlines
- **Category-chip pattern**: small uppercase rectangles, 4px radius, in warm-black or pale fill — the navigation signature
- Tight, pragmatic **4px radius** (`{rounded.sm}`) on chips, buttons, and inputs — finished, never soft
- Rationed accent color — interactive blue (`{colors.accent}`) for link hover, field green (`{colors.accent-green}`) for utility/eco moments
- Dark warm-black nav bar (`{nav-bar}`) with uppercase Bryant labels in white
- Body in Geist at a readable 16px / 400; uppercase Bryant labels carry the "rugged" voice
- Generous photography-led sections; chrome stays out of the way
- Mid-neutral surfaces (`{colors.surface-soft}`, `{colors.surface-mute}`) for cards and inputs, not pure gray
- Soft, low shadows reserved for occasional cards and floating chrome

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The dominant canvas.
- **Off-White** (`{colors.surface}`): Near-white section bands (`#fbfdfc`).
- **Soft Mist** (`{colors.surface-soft}`): Light category-chip fill and muted cards (`#eef1f0`).
- **Neutral** (`{colors.surface-mute}`): Mid surfaces and the modal CTA fill (`#e5e5e5`).

### Ink / Text
- **Forest Near-Black** (`{colors.ink}`): The signature warm green-tinted charcoal (`#1a211e`). Headings, body, nav fill, chip fill.
- **Deep Black** (`{colors.ink-deep}`): The deepest near-black (`#0c0c0c`) for input text.
- **Graphite** (`{colors.ink-secondary}`): Supporting copy (`#363537`).
- **Slate Green** (`{colors.ink-muted}`): Captions, metadata, muted button text (`#606562`).

### Accent
- **Interactive Blue** (`{colors.accent}`): Link hover and interactive states (`#3860be`). Used only on interaction.
- **Field Green** (`{colors.accent-green}`): Utility / eco moments (`#6cc04a`).
- **Walnut** (`{colors.accent-walnut}`): A warm secondary brand neutral (`#947051`).

### Borders & Shadow Tints
- **Hairline** (`{colors.border}`): Card edges and dividers (`#e5e7eb`).
- **Strong Border** (`{colors.border-strong}`): Input and outlined-control borders (`#cccfcd`).
- **Soft / Ambient** (`{colors.shadow-soft}`, `{colors.shadow-ambient}`): Stand-ins for the occasional low card shadow (`#999999` was rgb(153,153,153); ambient was rgba(0,0,0,0.3) — flattened for the Google spec).

## Typography

### Font Family
- **Display / Labels**: `Bryant` (with `Alia-Bryant-Pro` and condensed `Exposure-10` for the largest heroes), fallbacks `Geist, Helvetica, Arial, sans-serif`. Weighty (500–700), often uppercase.
- **Body / UI**: `Geist`, fallbacks `Helvetica, Arial, sans-serif`. A clean neutral sans for readable copy.
- **Tracking**: tight negative tracking on large display (-1px to -1.28px); positive 0.5–0.6px on uppercase Bryant labels and buttons.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 68px / 500 / uppercase / -1px — Bryant marquee headline |
| `display` | 64px / 400 / -1.28px — Exposure condensed display |
| `display-sub` | 48px / 400 / -0.48px — secondary display |
| `heading` | 32px / 700 — Bryant feature heading |
| `heading-sub` | 24px / 700 — Bryant sub-heading |
| `body-large` | 24px / 400 — Geist lead paragraphs |
| `body` | 16px / 400 — Geist standard body and inputs |
| `body-strong` | 16px / 700 — Geist emphasis |
| `button` | 18px / 500 / uppercase / 0.5px — Bryant button text |
| `label-mono` | 16px / 700 / uppercase / 0.6px — Bryant category labels and eyebrows |
| `caption` | 14px / 400 — Geist metadata, chip text |

### Principles
- **Two voices, two faces**: chunky uppercase Bryant for headlines and labels; calm Geist for everything you read.
- **Tighten the big**: heavy negative tracking on display sizes (-1.28px); near-zero on Geist body.
- **Uppercase is the rugged signature**: category labels, eyebrows, and buttons go uppercase in weighty Bryant.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px. Section rhythm is generous (`{spacing.6xl}` = 64px); component internals stay tight (`{spacing.sm}`–`{spacing.2xl}`).

### Grid & Container
- Max content width: ~1280px, with full-bleed outdoor photography breaking the container
- Common pattern: a full-bleed gear-in-the-wild photo with an uppercase Bryant headline and a row of category chips
- Product grids use soft-cornered image cards with Geist captions and uppercase chip tags

### Whitespace Philosophy
- **Photography-led**: full-bleed outdoor imagery carries the page; chrome recedes
- **Tight and pragmatic**: chips and controls are compact, finished, never soft or airy
- **Warm neutrals over stark contrast**: off-white and soft-mist surfaces keep it earthy, not clinical

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, hairline `{colors.border}` only | The default — most of the site |
| Hairline (Level 1) | `1px solid {colors.border-strong}` | Card edges, input borders, dividers |
| Card (Level 2) | `0 2px 10px -3px` at `{colors.shadow-soft}` | Resting cards, raised chips |
| Floating (Level 3) | `0 0 4px` + `0 0 12px` at ~30% black (`{colors.shadow-ambient}`) | Floating chrome / overlays |

**Shadow Philosophy**: Peak Design keeps elevation low and matte. Separation is mostly done with hairline borders and the warm-black/white contrast. The rare shadow is a soft, low spread (a tight 2px contact at low opacity) rather than a dramatic lift — fitting for a brand whose products are rugged and grounded, not glossy.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `xs` | 2px | Tiniest controls, close buttons |
| `sm` | 4px | **Chips, buttons, inputs, image cards** — the workhorse radius |
| `md` | 8px | Larger cards and image frames |
| `pill` | 20px | Soft pill toggles / filters |
| `full` | 9999px | Avatars, circular icon buttons |

The system is tight and pragmatic. The workhorse is **4px** (`{rounded.sm}`) on chips, buttons, and inputs — just enough to feel finished. Larger cards reach 8px; pills and circles are reserved for toggles and avatars. Nothing is heavily rounded — the geometry reads as engineered, not friendly.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Warm forest-black (`{colors.ink}`) fill, white text, **4px radius**, `8px 16px` padding. Hover deepens to `{colors.ink-deep}`.
- **`button-light`** — Soft-mist (`{colors.surface-soft}`) fill, warm-black text, 4px radius. The pale category-action variant. Hover fills `{colors.surface-mute}`.
- **`button-outline`** — White fill, warm-black text, `{colors.border-strong}` outline, 4px radius, roomier `12px 24px` padding. Hover fills `{colors.surface-soft}`.

### Cards
- **`card`** / **`card-soft`** — White or soft-mist surface, 8px radius, `16px` padding, hairline edge. Product and feature tiles, often photo-led.

### Inputs
- **`input`** — Soft-mist (`{colors.surface-soft}`) fill, deep-black text, `{colors.border-strong}` border, 4px radius, `16px 12px` padding. **`input-focus`** swaps to a white fill with a darkened border.

### Navigation
- **`nav-bar`** — Warm forest-black (`{colors.ink}`) fill with white **uppercase Bryant** labels (`{typography.label-mono}`). The dark bar is a brand signature.

### Chips, Links & Eyebrows
- **`category-chip`** / **`category-chip-light`** — Small uppercase rectangles in warm-black or pale fill, 4px radius — the navigation signature ("Camera Gear", "Travel").
- **`link`** — Warm-black text, hover shifts to interactive blue (`{colors.accent}`).
- **`eyebrow`** — Uppercase weighty Bryant label — the section-marker pattern.

## Do's and Don'ts

### Do
- Use the **warm forest near-black** `{colors.ink}` (`#1a211e`) for text, nav, and chip fills — never pure `#000000`
- Pair **uppercase Bryant** (weighty, 500–700) for headlines and labels with **Geist** for body and UI copy
- Keep the workhorse radius tight at **4px** (`{rounded.sm}`) on chips, buttons, and inputs
- Use the category-chip pattern (small uppercase rectangles in warm-black or pale fill) for navigation
- Lead with full-bleed outdoor photography of gear in the field; let chrome recede
- Apply tight negative tracking (-1px to -1.28px) on large display type
- Ration accent color — interactive blue (`{colors.accent}`) only on link hover, field green (`{colors.accent-green}`) only for utility moments
- Use the dark warm-black nav bar with white uppercase Bryant labels

### Don't
- Don't use pure black (`#000000`) for ink — the warm green-tinted `#1a211e` is the signature
- Don't set headlines or labels in a light or sentence-case style — chunky uppercase Bryant is the voice
- Don't heavily round controls — the tight 4px radius is what makes it read as engineered
- Don't let accent color spread into the base — blue and green are rationed interaction/utility moments
- Don't set body copy in Bryant — Geist carries readable text; Bryant is for display and labels
- Don't add glossy or dramatic shadows — elevation stays low and matte
- Don't replace the dark warm-black nav with a light transparent one — the dark bar is a brand cue

---

## Responsive Behavior

### Breakpoints
*(Many breakpoints surfaced in extraction; the table below summarizes the meaningful stops.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column; display type scales 68px → ~36px; nav collapses to a menu; category chips wrap; full-bleed photography |
| Tablet | 640–1023px | Two-column feature rows; chip rows scroll horizontally |
| Desktop | 1024–1279px | Full layout; large uppercase headlines over full-bleed gear photography |
| Large | ≥1280px | Max ~1280px container; biggest display sizes; generous section padding (`{spacing.6xl}`) |

### Touch Targets
- Buttons and chips run with `8px 16px`–`12px 24px` padding — compact but thumb-comfortable
- Geist body holds at 16px; nav and chip rows carry generous tap area

### Collapsing Strategy
- **Navigation**: dark warm-black nav → menu toggle on mobile; uppercase Bryant labels persist
- **Hero**: headline and gear photo go from side-by-side to stacked, image full-width
- **Chips**: category-chip rows scroll horizontally or wrap on narrow viewports
- **Spacing**: section padding compresses from 64px toward ~32px

### Image Behavior
- Outdoor gear photography is the hero — full-bleed on mobile, gridded on desktop, soft 4–8px corners on framed cards

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Text: Forest Near-Black (`{colors.ink}` `#1a211e`) — never pure black
- Brand accent: rationed — Interactive Blue (`{colors.accent}`) on hover, Field Green (`{colors.accent-green}`) for utility
- Secondary text: Slate Green (`{colors.ink-muted}`)
- Border: Hairline (`{colors.border}`)
- CTA: Forest Near-Black (`{colors.ink}`)

### Example Component Prompts

- "Create a hero: full-bleed outdoor gear photo with a 68px **uppercase Bryant** headline in white, letter-spacing -1px, over the image; below it a row of category chips in warm-black (`{colors.ink}` `#1a211e`) fill with 4px radius"
- "Build a primary button: warm forest-black (`{colors.ink}` `#1a211e`) fill, white text, **4px radius**, `8px 16px` padding, 18px uppercase Bryant at 0.5px tracking; hover deepens to `{colors.ink-deep}`"
- "Build a category chip: small rectangle, warm-black (`{colors.ink}`) fill (or pale `{colors.surface-soft}` fill), white/dark text, 4px radius, `8px 16px` padding, 14px uppercase Geist label — e.g. 'CAMERA GEAR'"
- "Create a product card: white (`{colors.background}`) surface, 8px radius, hairline `{colors.border}` edge, a soft-cornered photo on top, an uppercase Bryant title and a Geist caption beneath, low `0 2px 10px -3px` shadow"
- "Design an input: soft-mist (`{colors.surface-soft}`) fill, `{colors.border-strong}` border, 4px radius, `16px 12px` padding, deep-black (`{colors.ink-deep}`) text; on focus swap to a white fill with a darkened border"
- "Build the nav bar: warm forest-black (`{colors.ink}` `#1a211e`) fill, white **uppercase Bryant** labels (`{typography.label-mono}`), 0.6px tracking, `16px 24px` padding"

### Iteration Guide

1. Start on white (`{colors.background}`) with **forest near-black** (`{colors.ink}` `#1a211e`) text — if you used pure `#000000`, warm it to `#1a211e`.
2. Pair uppercase Bryant (display, labels) with Geist (body). If headlines aren't chunky uppercase Bryant, fix the voice.
3. Keep the workhorse radius tight at **4px** on chips, buttons, and inputs — don't over-round.
4. Use the category-chip pattern for navigation; it's the signature interaction.
5. Ration accent color — blue (`{colors.accent}`) only on link hover, green (`{colors.accent-green}`) only for utility.
6. Apply tight negative tracking (-1px to -1.28px) on large display type.
7. Lead with full-bleed outdoor photography and use the dark warm-black nav bar with white uppercase labels.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Peak Design. Brand names and trademarks belong to their respective owners.