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

# Outdoor Voices · Design System

> Clean commerce with an outdoorsy, editorial feel.

**Theme:** light · **Industry:** fashion · **Source:** https://www.outdoorvoices.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._

Outdoor Voices pairs a restrained monochrome storefront with expressive campaign photography and a prominent seasonal sale feature. Product carousels and activity-led image grids make browsing feel visual, relaxed, and easy to scan.

## North star

Keep the interface quiet and spacious so lifestyle photography and product imagery carry the visual energy.

## Overview

The page uses a white canvas and near-black typography as a quiet frame for large, image-led merchandising. The first viewport introduces the sale with a blue announcement strip, a simple centered wordmark, and a large blush-pink campaign visual; that pink is campaign imagery rather than a measured brand token. Measured surface gray appears in softly differentiated content bands, while deep blue is used sparingly for the shipping announcement and focus accents. TTCommonsPro gives navigation, buttons, and display moments a clean, rounded sans-serif voice; NordiquePro supplies the distinctive, lightly tracked body and heading style. The layout moves from a wide hero into centered product carousels, alternating lifestyle features, and compact category grids. Generous white space separates these modules, while product photography supplies most of the color and texture. Black pill-shaped CTAs provide clear, consistent actions without adding heavy borders or shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, header background, and light text on the blue announcement bar and dark CTA buttons. |
| Soft Ink | `#202020` | `--color-soft-ink` | brand | Primary headings, navigation, product links, icons, and the background of primary pill-shaped shopping buttons. |
| Cloud Gray | `#f8f8f8` | `--color-cloud-gray` | surface | Subtle section surface that differentiates feature bands from the white canvas without strong contrast. |
| Quiet Gray | `#737373` | `--color-quiet-gray` | neutral | Muted supporting text, including secondary product information and small descriptive copy. |
| Outdoor Blue | `#2b54ab` | `--color-outdoor-blue` | accent | Announcement strip and focus accent; use sparingly rather than as a large general-purpose surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f8f8f8` (Cloud Gray) · `--color-text` → `#202020` (Soft Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#737373` (Quiet Gray) · `--color-border` → `#ffffff` (Gallery White) · `--color-accent` → `#2b54ab` (Outdoor Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#202020` | `#ffffff` | 16.29:1 | AAA |
| `#202020` | `#f8f8f8` | 15.34:1 | AAA |
| `#ffffff` | `#f8f8f8` | 1.06:1 | fail |
| `#737373` | `#ffffff` | 4.74:1 | AA |
| `#737373` | `#f8f8f8` | 4.46:1 | AA-large |
| `#2b54ab` | `#ffffff` | 7.1:1 | AAA |
| `#2b54ab` | `#f8f8f8` | 6.68:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| TTCommonsPro | `--font-display` | webfont | 500, 400, 600 | Display text, navigation, captions, and button labels. | DM Sans |
| NordiquePro | `--font-body` | webfont | 400 | Headings, body copy, and text links. | Jost |

- **TTCommonsPro:** Use clean sans-serif forms; navigation is medium weight and buttons are medium weight, generally in sentence case.
- **NordiquePro:** Regular-weight headings and body; body and links have noticeable positive tracking, with natural capitalization.

### Type scale — Augmented Fourth (ratio ≈ 1.38, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 400 | 1.1 | -0.025em | — | TTCommonsPro | Prominent campaign and display messaging. |
| h1 | 70px | 400 | 1.15 | 0.009em | — | NordiquePro | Primary hero and page-level heading. |
| h2 | 60px | 400 | 1.15 | 0.01em | — | NordiquePro | Major section headings above product and feature modules. |
| h3 | 48px | 400 | 1.2 | 0.012em | — | NordiquePro | Secondary headings within editorial feature content. |
| h4 | 36px | 400 | 1.2 | 0.017em | — | NordiquePro | Smaller subheadings and supporting module titles. |
| body | 16px | 400 | 1.4 | 0.038em | — | NordiquePro | Product descriptions and general explanatory copy. |
| caption | 13px | 500 | 1.4 | -0.154em | — | TTCommonsPro | Compact labels and secondary product details. |
| button | 16px | 500 | 1.2 | 0.013em | — | TTCommonsPro | Shopping and collection call-to-action labels. |
| nav | 16px | 500 | 1.4 | 0 | — | TTCommonsPro | Header navigation and utility links. |
| link | 16px | 400 | 1.4 | 0.038em | — | NordiquePro | Product names and inline text links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 8, 10, 12, 14, 16, 18, 20, 21, 24, 32, 35, 40, 48, 50 px.
- Section rhythm 48px · element gap 4px · card padding — · max content width 1280px.

Use a centered, wide desktop composition with a measured maximum content width of 1280px. Keep the header and announcement bar compact, then alternate full-width campaign imagery with contained merchandising modules. Product sections use horizontally browsable rows and centered headings; category and activity modules use four-column image grids. Feature stories alternate image and text placement. The measured spacing scale supports a comfortable rhythm, with a 48px section gap and small, tidy gaps within controls and product details.

## Shape & elevation

- Radius: button `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease-in-out` on interactive elements.

The page is predominantly flat: white and soft-gray section surfaces provide separation instead of shadows. The measured data contains no shadows and no decorative gradients. Use restrained boundaries and spacing to organize content, with black rounded CTAs as the strongest component shape. Images provide most of the depth and contrast.

## Imagery

Use authentic lifestyle and apparel photography rather than illustration or 3D. Show garments on people and in outdoor or activity settings, mixing close product views with full-body framing. Let campaign imagery introduce seasonal color, while product grids remain visually consistent and clean. Keep photography large and edge-aligned within its module; avoid decorative image filters that compete with the clothing.

## Components

### Announcement bar

A slim Outdoor Blue (#2b54ab) strip at the top with centered white shipping copy and small directional controls.

### Store header

White header with left-aligned category links, centered wordmark, and compact search, account, and bag icons on the right.

### Campaign hero

Large campaign image paired with a headline, supporting sale copy, and dark pill-shaped shopping CTAs.

### Product carousel

Centered section title above a horizontal product-image row with product names, color availability, and carousel controls.

### Editorial feature

Image-and-copy feature modules that alternate composition, use concise descriptions, and end with a dark rounded collection link.

### Image category grid

Four-column image tiles for popular categories or activities, each with a short centered label.

### Social gallery

A wide, compact row of lifestyle images below a centered heading, with simple carousel arrows.

### Measured component styles

- **Primary button** (“Shop — Women”): background #202020 · text #ffffff · radius 100px · padding 14px 24px · 500 16px TTCommonsPro
- **Link** (“CloudKnit Off Shoulder Top”): transparent background · text #202020 · radius 0px · padding 0px · 400 16px TTCommonsPro
- **Navigation item** (“Women Men OV Extra Sale”): transparent background · text #202020 · radius 0px · padding 0px · 400 16px Times New Roman

## Do

- Keep the canvas predominantly white and uncluttered.
- Use Soft Ink (#202020) for primary text and shopping actions.
- Reserve Outdoor Blue (#2b54ab) for announcements and focus accents.
- Let lifestyle photography provide seasonal color and texture.
- Center section titles above product and category collections.
- Use rounded, high-contrast primary shopping buttons.
- Leave clear breathing room between distinct merchandising modules.

## Don't

- Do not treat campaign pink as a measured brand color token.
- Do not add gradients or prominent shadows.
- Do not crowd the header with extra controls or copy.
- Do not use heavy borders to divide every card.
- Do not let decorative elements overpower apparel photography.
- Do not make every section use the same image-and-text arrangement.

## Agent prompt

Build a new Outdoor Voices-style commerce page with a calm, image-led editorial feel. Use Gallery White (#ffffff) as the main canvas, Soft Ink (#202020) for headings and primary pill CTAs, Cloud Gray (#f8f8f8) for occasional section bands, and Quiet Gray (#737373) for secondary copy. Use Outdoor Blue (#2b54ab) sparingly for a slim announcement or focus treatment. Pair TTCommonsPro-like clean sans-serif navigation and buttons with NordiquePro-like lightly tracked headings and body text. Create a compact header, spacious campaign feature, centered product carousels, alternating lifestyle features, and image-led category grids. Keep the structure wide and comfortable, favor photography over decoration, and rely on whitespace rather than shadows or borders. Make calls to action obvious and concise.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Wide campaign image followed by left-aligned sale copy and two right-aligned shopping CTAs. | Seasonal promotion, Shop by audience | Large campaign image, Bold headline, Dark pill CTAs |
| 2 | product-grid | Centered heading above a horizontally browsable product row with compact product details. | Product discovery, Carousel navigation, Color availability | Product photography, Arrow controls, Centered shop CTA |
| 3 | product-grid | Centered heading above a horizontal men’s product carousel. | Product discovery, Carousel navigation, Color availability | Product photography, Arrow controls, Centered shop CTA |
| 4 | feature-split | Lifestyle image and centered text content share a soft, spacious feature band. | Collection discovery, Editorial storytelling | Lifestyle photography, Short description, Rounded collection CTA |
| 5 | feature-split | Alternating image-and-copy arrangement within a wide feature area. | Collection discovery, Outdoor use case | Outdoor photography, Centered copy, Rounded collection CTA |
| 6 | category-nav | Centered section title above four evenly spaced image tiles. | Visual category browsing, Direct category links | Four-column grid, Apparel photography, Short tile labels |
| 7 | category-nav | Centered title above a four-column activity-led photo grid. | Browse by activity, Direct category links | Four lifestyle tiles, Short labels, Image-first navigation |
| 8 | feature-grid | Two large side-by-side lifestyle images with centered overlaid shopping labels. | Audience selection, Direct shopping links | Two-column imagery, Centered overlay text, Lifestyle photography |
| 9 | gallery | Centered heading followed by a wide, compact horizontal image gallery. | Social proof, Carousel browsing | Lifestyle image strip, Arrow controls, Centered gallery title |

## Source CSS custom properties (selected)

```css
--color-black: #202020;
--color-dark-grey: #737373;
--color-dark-grey-80: #737373cc;
--color-grey: #d2d2d2;
--color-light-grey: #efefef;
--color-extra-light-grey: #f8f8f8;
--color-blue: #2B54AB;
--color-white: #fff;
--color-error: #b72121;
--color-final-sale: #dd000d;
--color-overlay: rgba(0,0,0,0.2);
--color-focus: #2B54AB;
--space-2: 2px;
--space-4: 4px;
--space-5: 5px;
--space-8: 8px;
--space-10: 10px;
--space-12: 12px;
--space-15: 15px;
--space-16: 16px;
--space-18: 18px;
--space-20: 20px;
--space-24: 24px;
--space-32: 32px;
--space-25: 25px;
--space-30: 30px;
--space-35: 35px;
--space-40: 40px;
--space-45: 45px;
--space-50: 50px;
--space-55: 55px;
--space-60: 60px;
--space-65: 65px;
--space-70: 70px;
--space-75: 75px;
--space-80: 80px;
--space-85: 85px;
--space-90: 90px;
--space-100: 100px;
--space-110: 110px;
```

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