# Peak Design · Design system migration spec

> Source: https://www.peakdesign.com  ·  Curated by OpenDesign  ·  en

> This site is a prime example of how minimalist UI design can effectively frame and elevate premium, tangible products.

## 1. Identity DNA

Peak Design's interface operates on a core principle: the product is the protagonist. The system provides a high-contrast, neutral frame of charcoal and off-white, ensuring the site functions like a meticulously curated gallery where the user's own photography and the crafted gear are the true sources of color and story.

**One-liner:** A visually driven, product-centric brand that blends rugged outdoor aesthetics with refined, minimalist design.
**Keywords:** premium · photographic · utilitarian · adventure · minimalist
**Analogy:** A high-end outdoor gear catalog meets a modern design portfolio.

## 2. Color

The color system is one of intentional restraint. A strict neutral palette of dark gray and off-white acts as a high-contrast stage, designed to subordinate UI color entirely to the primary palette of product photography.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FBFDFC` | main background |
| `--bg-quiet` | `#EEF1F0` | quiet area |
| `--ink` | `#1A211E` | body text |
| `--muted` | `#606562` | placeholder |
| `--muted-soft` | `#E5E7EB` | weak hint |
| `--line` | `rgba(26,33,30,0.12)` | divider |

**Color principle:** Photography is the primary color source; the UI provides a neutral, high-contrast frame of dark and light grays.

The governing rule is that the interface never competes with the product; it serves only to present it.

## 3. Typography

The typographic voice is clean, geometric, and structured, utilizing humanist sans-serif categories for clarity and a premium tone. A hierarchy is established through scale and deliberate treatment: large headlines set with tight tracking, and functional labels delivered in uppercase with expanded tracking.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 40px | 1.1 | 700 | -1px | Primary marketing headlines and promotional pop-ups. |
| headline | 32px | 1.2 | 700 | -0.5px | Section headers and product names. |
| body | 16px | 1.5 | 400 | 0 | Standard body text and UI labels. |

**Type rules:**
- Use uppercase tracking for button labels and navigation links.
- Use tight negative letter-spacing for large display headlines.
- Maintain a high contrast ratio between ink and background elements.

## 4. Spacing

Layout rhythm is governed by a consistent 4px base grid.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64 px
- **Rhythm:** A consistent 4px base grid is used throughout for padding and gaps, ensuring a structured layout.

## 5. Surfaces

Surfaces are defined by near-absolute flatness. Depth is communicated through the most minimal means: a single, subtle box-shadow or a 1px border with low opacity, maintaining a tactile yet unobtrusive presence.

- **Radius:** sm 4px · md 8px · lg 32px · pill 9999px
- **Shadows:**
  - 0px 0px 4px 0px rgba(0, 0, 0, 0.04)
- **Borders:** Minimal 1px solid borders using the primary ink color with low opacity for subtle separation.

## 6. Layout

The structural skeleton is built for impact. A full-bleed photographic hero dominates the initial view, with content centered for focus, while a disciplined 12-column grid organizes product listings below.

- **Container max:** 1440px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A full-bleed photographic hero with centered content and a 12-column grid for product listings.

## 7. Motion & Interaction

Motion is strictly functional, designed to provide clear feedback without fanfare. Animations are limited to smooth opacity fades for overlays and quick, eased transforms for interactive elements, ensuring the interface remains responsive and quiet.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth opacity and visibility transitions for overlays and modals.
  - Quick transform (scale) transitions for interactive elements on hover and click.

- **Hover:** Subtle opacity changes or background-color shifts (0.2s cubic-bezier).
- **Click:** Immediate transform scale (0.15s ease-out) followed by an action.
- **Transition:** Elements primarily transition on transform, opacity, and color properties.
- **Keyboard:** Standard focus-visible outlines for interactive elements.

## 8. Voice & Don'ts

The editorial voice is confident, direct, and premium, mirroring the brand's utilitarian ethos. Copy is bold and high-contrast, especially in headlines and calls-to-action, where uppercase styling reinforces clarity and purpose.

- **Tone:** Confident, direct, and premium.
- **Headline style:** Bold, uppercase, and high-contrast.
- **CTA style:** Action-oriented, uppercase, and highly legible.
- **Avoid:** Excessive use of bright, artificial accent colors. / Cluttered layouts that compete with photography. / Rounded, 'bubbly' UI elements that feel too playful. / Small, delicate typography that lacks impact. / Complex gradients or decorative background patterns. / Inconsistent padding or spacing.

### Don'ts
- ❌ Don't use a multi-colored gradient background — the site relies on clean solid colors (#FBFDFC) or full-bleed photography.
- ❌ Don't use decorative serif fonts — the typography is strictly geometric and humanist sans-serif.
- ❌ Don't use heavily rounded, playful components — buttons and inputs use a subtle 4px to 8px border-radius.
- ❌ Don't use small, low-contrast text for calls-to-action — headlines and buttons are bold, uppercase, and highly legible.
- ❌ Don't use complex, multi-layered shadows — elevation is handled by a single, very subtle box-shadow.
- ❌ Don't use a busy, cluttered layout — every element has generous breathing room (16px to 24px gaps).

The system deliberately avoids decorative flourishes, playful components, and any visual noise that would distract from the product's inherent craft.

## System Prompt (paste into AI tool)

```
This is a premium, photography-driven e-commerce site for high-end outdoor gear. The design DNA is characterized by a minimal, neutral palette (dark gray #1A211E and off-white #FBFDFC) that serves as a frame for high-quality product photography. Typography is clean and structured, using geometric and humanist sans-serif categories for headlines and body text, with a strong emphasis on uppercase, tracked-out labels. The layout is spacious and grid-based, utilizing consistent 4px/8px spacing units. Critical design rules include: 1) Never use bright, artificial accent colors; 2) Never use complex gradients or decorative backgrounds; 3) Never use playful or bubbly UI components; 4) Maintain high contrast for all interactive elements; 5) Keep the focus strictly on the product imagery.
```
