---
title: "Peak Design design system"
variant: extended
source: https://www.peakdesign.com/
captured_at: 2026-10-12
theme: light
industry: ecommerce
generator: Design DNA (https://four.wiralomi.com/style/peakdesign-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Peak Design · Design System

> Purpose-built carry, presented with editorial clarity

**Theme:** light · **Industry:** ecommerce · **Source:** https://www.peakdesign.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Peak Design’s storefront pairs a restrained monochrome interface with vivid product and lifestyle photography. Editorial typography, modular shopping grids, and strong black feature bands make the broad gear catalog easy to explore.

## North star

Keep the storefront interface quiet and precise so striking gear photography and clear editorial hierarchy carry the experience.

## Overview

The page uses a white canvas and near-black text as a quiet frame for gear photography, with black announcement and campaign bands supplying strong contrast. Pale gray-green surfaces distinguish controls and selected product areas without introducing a loud interface accent; warm yellow and earthy colors belong mainly to the hero artwork and product imagery, not the measured UI palette. Typography mixes expressive editorial headings with practical sans-serif navigation, product details, and forms. Some campaign headlines use uppercase display lettering, while section titles retain a more literary feel. The layout alternates wide, image-led campaign blocks with compact product and category grids, then returns to editorial split panels and a restrained footer. Generous white space separates these modules, while cards remain mostly flat and rely on image content, alignment, and subtle borders rather than shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, navigation background, light button faces, and light text on inverse bands. |
| Deep Black | `#000000` | `--color-deep-black` | brand | Announcement strip, footer, dark campaign panels, and high-contrast headings or controls. |
| Soft Concrete | `#e0e0e0` | `--color-soft-concrete` | surface | Measured neutral surface; use for subdued supporting areas, not as a dominant campaign color. |
| Forest Ink | `#1a211e` | `--color-forest-ink` | semantic | Primary interface text on light backgrounds, including navigation, product links, and button labels. |
| Mist Sage | `#eef1f0` | `--color-mist-sage` | surface | Pale gray-green button, card, and section surface for low-emphasis interface groupings. |
| Slate Moss | `#606562` | `--color-slate-moss` | semantic | Muted supporting text and subdued footer copy. |
| Quiet Line | `#cccfcd` | `--color-quiet-line` | neutral | Thin input outlines and understated separators. |
| Graphite Dust | `#363537` | `--color-graphite-dust` | neutral | Minor navigation text tone; keep subordinate to Forest Ink. |
| Night Panel | `#15151a` | `--color-night-panel` | surface | Near-black promotional card and inverse content background, distinct from pure black. |
| Pale Divider | `#e6e9e8` | `--color-pale-divider` | neutral | Very light navigation hairline or subtle boundary between interface regions. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#e0e0e0` (Soft Concrete) · `--color-surface-2` → `#000000` (Deep Black) · `--color-surface-3` → `#eef1f0` (Mist Sage) · `--color-surface-4` → `#15151a` (Night Panel) · `--color-text` → `#000000` (Deep Black) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#1a211e` (Forest Ink) · `--color-border` → `#cccfcd` (Quiet Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#e0e0e0` | 15.91:1 | AAA |
| `#000000` | `#eef1f0` | 18.48:1 | AAA |
| `#ffffff` | `#e0e0e0` | 1.32:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#eef1f0` | 1.14:1 | fail |
| `#1a211e` | `#ffffff` | 16.4:1 | AAA |
| `#1a211e` | `#e0e0e0` | 12.43:1 | AAA |
| `#1a211e` | `#000000` | 1.28:1 | fail |
| `#1a211e` | `#eef1f0` | 14.43:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist | `--font-body` | webfont | 400, 700 | Body copy, navigation, product details, links, and form text | Inter |
| bryant | `--font-display` | webfont | 700, 500 | Display headlines, uppercase section labels, and CTA buttons | Montserrat |
| Exposure-10 | `--font-exposure-10` | webfont | 400 | Editorial H1 and H2 headings | Cormorant Garamond |
| Geist Mono | `--font-mono` | webfont | 400 | Code-style or technical microcopy where present | IBM Plex Mono |

- **Geist:** Functional sans-serif; mostly regular weight with bold emphasis, sentence case, and clear compact labels.
- **bryant:** Bold display presence; uppercase headlines and buttons, with noticeably expanded button tracking.
- **Exposure-10:** Regular-weight expressive display face with tight negative tracking and natural mixed case.
- **Geist Mono:** Monospaced regular face; use sparingly for technical details rather than primary interface text.

### Type scale — Perfect Fourth (ratio ≈ 1.355, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 700 | 1.1 | -0.005em | uppercase | bryant | Large uppercase campaign headlines and prominent promotional statements. |
| h1 | 48px | 400 | 1.1 | -0.01em | — | Exposure-10 | Primary editorial heading within a campaign or feature panel. |
| h2 | 40px | 400 | 1.1 | -0.01em | — | Exposure-10 | Section-level editorial titles such as product and story introductions. |
| h3 | 32px | 700 | 1.1 | 0 | uppercase | Bryant | Bold uppercase category or feature titles. |
| h4 | 25.5px | 700 | 1.4 | 0 | — | Geist | Supporting card headings and secondary content titles. |
| body | 14px | 400 | 1 | 0 | — | Geist | Compact product descriptions, helper copy, and supporting text. |
| button | 14px | 500 | 1 | 0.057em | uppercase | Bryant | Uppercase shopping and action labels. |
| nav | 16px | 400 | 1.5 | 0 | — | Geist | Main navigation and utility links. |
| link | 16px | 400 | 1.5 | 0 | — | Geist | Product names and inline destinations. |
| eyebrow | 16px | 700 | 1.2 | 0.038em | uppercase | Bryant | Small uppercase labels above campaign or editorial headings. |
| code | 14px | 400 | 1 | 0 | — | Geist Mono | Occasional technical or code-like details. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 4, 8, 12, 16, 20, 24, 40, 64 px.
- Section rhythm 64px · element gap 24px · card padding — · max content width 1312px.

Use a full-width announcement strip and a clean horizontal navigation, followed by broad campaign imagery. Keep the main content within the measured 1312px maximum width and align sections to a consistent page grid. Product collections use dense multi-column rows; editorial stories switch to two- or three-column image-led blocks. Alternate compact shopping bands with spacious campaign sections, preserving the measured 64px section rhythm and 24px element rhythm. The overall density is comfortable, not sparse.

## Shape & elevation

- Radius: button `4px` · input `4px` · card `8px` · media `8px` · xs `4px` · sm `8px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s ease-out` on interactive elements.

The interface is largely flat: no measured shadows, with separation coming from white space, image boundaries, dark bands, and thin pale borders. Cards use restrained rounded corners, while controls have tighter corners. Keep image panels visually layered through cropping and contrast rather than artificial drop shadows.

## Imagery

Photography is the primary visual asset: isolated gear product shots sit beside outdoor, travel, and workshop lifestyle scenes. Use large edge-to-edge campaign images and tightly aligned product thumbnails; category tiles crop photography to fill their cards and apply dark overlays where white labels need contrast. The hero’s warm yellow field and colorful case lineup are artwork within the promotion, not a general interface palette. No decorative illustration system is needed.

## Components

### Announcement strip

Slim black top band with a mission link, centered shipping and warranty message, and store-finder utility in light text.

### Primary navigation

White horizontal bar with logo, product categories, search field, support, account, and cart utilities; use Geist for navigation.

### Campaign hero

Large split promotion pairing colorful product artwork with a #15151a text panel, uppercase eyebrow, oversized heading, and contrasting CTAs.

### Product carousel

Best-seller row with category filters, isolated product images, compact names and pricing, and simple directional controls.

### Category tiles

Image-filled gear category cards with bottom-aligned uppercase labels and small circular arrow affordances.

### Editorial feature split

Two-part story panels combine lifestyle or factory photography with concise editorial copy and a clear action.

### Newsletter form

Footer subscription area with compact heading, supporting sentence, outlined email input, and dark signup button.

### Measured component styles

- **Primary button** (“TRAVEL”): background #eef1f0 · text #1a211e · border 1px solid #eef1f0 · radius 4px · padding 8px 16px · 500 14px Bryant · uppercase
- **Secondary button** (“SHOP NEW ARRIVALS”): background #fbfdfc · text #1a211e · border 1px solid #fbfdfc · radius 4px · padding 12px 24px · 700 16px bryant · uppercase
- **Link** (“SlimLink Case for iPhone SlimLink™ & Mag”): transparent background · text #1a211e · radius 0px · padding 0px · 400 16px Geist
- **Input**: transparent background · text #606562 · border 1px solid #cccfcd · radius 4px · padding 2px 12px 2px 38px · 400 16px Geist
- **Card** (“STRAPS”): background #000000 · text #1a211e · radius 8px · padding 0px · 400 16px Geist
- **Navigation item** (“Camera Gear Luggage Bags Mobile Wallets ”): transparent background · text #1a211e · radius 0px · padding 0px · 400 16px Geist

## Do

- Use white space to separate clear, purposeful content bands.
- Keep navigation and shopping controls quiet and readable.
- Let real product photography provide most visual color.
- Use near-black panels for focused campaign contrast.
- Pair editorial display headings with practical sans-serif details.
- Make product grids easy to scan with consistent alignment.

## Don't

- Do not add gradients or decorative shadows.
- Do not treat hero artwork colors as global UI accents.
- Do not crowd product cards with excess copy.
- Do not replace the restrained palette with bright interface colors.
- Do not use one typeface for every hierarchy level.
- Do not round large panels more than the measured card treatment.

## Agent prompt

Build a new Peak Design-style ecommerce page with a quiet, precise interface around expressive gear photography. Use Gallery White (#ffffff) as the primary canvas, Forest Ink (#1a211e) for light-surface text, and Deep Black (#000000) or Night Panel (#15151a) for focused inverse sections. Reserve Mist Sage (#eef1f0) for subdued control or card surfaces and Quiet Line (#cccfcd) for thin input borders. Pair editorial display headings with practical Geist-like navigation, body copy, and product details. Structure the page as broad campaign panels, scannable product grids, and image-led category or story blocks within a consistent content width and generous section rhythm. Keep cards flat, use photography rather than decorative graphics, and avoid inventing accent colors or shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Full-width white header area with a compact dark announcement band above the primary navigation. | utility links, store finder, global search | black announcement strip, horizontal category navigation, outlined search field |
| 2 | product-grid | Wide product carousel with filters and a row of product cards. | category filters, carousel arrows, quick product scanning | product photography, compact price text, minimal card chrome |
| 3 | category-nav | Image-led category gallery arranged in a multi-column grid. | category discovery, direct category links | full-image cards, bottom-aligned labels, round arrow affordances |
| 4 | feature-split | Three-column editorial feature with lifestyle image, product display, and copy panel. | campaign discovery, shop-now action | split imagery, editorial headline, pale content surface |
| 5 | product-showcase | Dark, wide product campaign area with copy and new-arrival action. | new-product discovery, shop new arrivals | black band, editorial headline, light CTA |
| 6 | feature-grid | Three image cards in a single row below an editorial section heading. | mission exploration, impact report access, film viewing | photo cards, uppercase captions, circular arrow markers |
| 7 | feature-split | Two-column feature pairing a wide factory photograph with a dark text panel. | watch film, learn about sourcing | factory photography, inverse copy panel, light action button |
| 8 | contact | Two-column location finder with form and retail-store photograph. | location search, find nearby retailer | outlined location input, editorial copy, store image |
| 9 | footer | Multi-column footer with store links, newsletter signup, and company navigation. | newsletter signup, support navigation, store links | small link lists, email form, compact headings |
| 10 | footer | Compact full-width utility row beneath the main footer. | region selection, currency context | small text link, minimal divider |
| 11 | footer | Bottom footer row with legal links, brand mark, and certification graphics. | policy navigation, accessibility information | small legal copy, brand signature, certification marks |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/peakdesign-com