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

# Vuori · Design System

> Performance apparel in a calm, editorial frame

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

Vuori pairs a restrained monochrome interface with expansive lifestyle photography to make activewear feel equally suited to training and everyday life. The homepage alternates full-bleed campaign imagery with compact product and category carousels, then closes with a quiet, information-dense footer.

## North star

Keep the interface quiet and monochrome so expansive, authentic lifestyle photography carries the brand’s energy.

## Overview

The visual identity is built on a white canvas and near-monochrome interface rather than a strong decorative brand colour. White (#ffffff) carries the page and keeps the photography prominent; pale grays (#f8f8f8 and #ededed) distinguish cards and fine boundaries without creating heavy panels. Text moves from deep charcoal (#212121) to softer gray (#333333 and #727272), while #c6c6c6 and #e0e0e0 appear as subtle interface hairlines. Aktiv Grotesk is used throughout: compact navigation and product details sit beside large, lightly tracked campaign headings, all in sentence case. Layout alternates edge-to-edge photographic campaigns with horizontal product and category strips, giving the page a clear browsing rhythm. Images supply most of the color and emotional contrast: natural settings, active models, and neutral or richly colored apparel are treated as campaign content, not as interface palette. The result is polished, calm, and commerce-focused.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, navigation background, and white campaign buttons; also appears as text over dark imagery. |
| Soft Boundary | `#ededed` | `--color-soft-boundary` | surface | Pale product-card surfaces and subtle card or navigation separators. |
| Cloud Surface | `#f8f8f8` | `--color-cloud-surface` | surface | Alternate light card and content surfaces, providing a barely visible shift from white. |
| Quiet Gray | `#727272` | `--color-quiet-gray` | neutral | Muted links, footer details, and understated outlined controls. |
| Soft Charcoal | `#333333` | `--color-soft-charcoal` | neutral | Primary navigation, product names, links, and other standard interface text. |
| Deep Ink | `#212121` | `--color-deep-ink` | neutral | Darker heading and text emphasis, especially in footer and content copy. |
| Pale Divider | `#c6c6c6` | `--color-pale-divider` | semantic | Subtle navigation hairlines; a measured border colour rather than a prominent brand accent. |
| Button Line | `#e0e0e0` | `--color-button-line` | semantic | Light outlined newsletter sign-up control; avoid treating it as a filled CTA colour. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f8f8f8` (Cloud Surface) · `--color-surface-2` → `#ededed` (Soft Boundary) · `--color-text` → `#212121` (Deep Ink) · `--color-text-muted` → `#333333` (Soft Charcoal) · `--color-text-subtle` → `#727272` (Quiet Gray) · `--color-border` → `#ededed` (Soft Boundary)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#212121` | `#ffffff` | 16.1:1 | AAA |
| `#212121` | `#f8f8f8` | 15.16:1 | AAA |
| `#212121` | `#ededed` | 13.75:1 | AAA |
| `#333333` | `#ffffff` | 12.63:1 | AAA |
| `#333333` | `#f8f8f8` | 11.9:1 | AAA |
| `#333333` | `#ededed` | 10.79:1 | AAA |
| `#727272` | `#ffffff` | 4.81:1 | AA |
| `#727272` | `#f8f8f8` | 4.53:1 | AA |
| `#727272` | `#ededed` | 4.11:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| aktiv-grotesk | `--font-body` | webfont | 400, 300, 700, 500 | Site-wide typeface for navigation, headings, body copy, product labels, links, and buttons. | Inter |

- **aktiv-grotesk:** Measured styles range from light body text to medium headings; use restrained negative tracking, sentence case, and no routine all-caps.

### Type scale — Augmented Fourth (ratio ≈ 1.375, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 50px | 500 | 1.2 | -0.05em | — | aktiv-grotesk | Large campaign headline over hero imagery. |
| h2 | 40px | 400 | 1.14 | -0.03em | — | aktiv-grotesk | Primary section titles and major campaign headings. |
| h3 | 28px | 400 | 1.33 | -0.03em | — | aktiv-grotesk | Secondary campaign or feature headings. |
| h4 | 21px | 400 | 1.31 | -0.03em | — | aktiv-grotesk | Smaller subheadings within supporting content. |
| body | 14px | 300 | 1.71 | -0.01em | — | aktiv-grotesk | Descriptions, explanatory copy, and newsletter text. |
| caption | 12px | 400 | 1.5 | -0.01em | — | aktiv-grotesk | Compact product details, labels, and legal notes. |
| button | 18px | 400 | 1.5 | -0.01em | — | aktiv-grotesk | Shop actions and other prominent button labels. |
| nav | 14px | 400 | 1.71 | -0.01em | — | aktiv-grotesk | Main navigation and compact utility links. |
| link | 15px | 400 | 1.75 | -0.009em | — | aktiv-grotesk | Product titles and category or editorial links. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 4, 6, 8, 16, 20, 22, 24, 28, 32, 40, 120 px.
- Section rhythm 32px · element gap 4px · card padding — · max content width 1376px.

Use a broad, centered desktop canvas capped at the measured 1376px maximum width, with campaign media allowed to run edge to edge. The page alternates full-bleed hero panels, a dense multi-item product rail, split campaign imagery, and horizontally browsable category strips. Align section headings to the left and keep text overlays close to the lower or left edges of campaign images. The measured spacing scale spans 4–120px, with a compact overall density and 32px section gap; use larger pauses between major image-led bands.

## Shape & elevation

- Radius: button `50%` · nav `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.25s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is largely flat, with no measured shadows. Separate content through whitespace, image boundaries, and pale gray hairlines or card surfaces rather than floating panels. Navigation and cards stay crisp and square-edged; only specified controls use fully rounded shapes. Image overlays and carousel arrows sit directly on top of photography as lightweight controls.

## Imagery

Photography defines the experience: use full-width or paired lifestyle campaign images featuring people in activewear, natural light, and recognizable urban or home settings. Product and category rails crop portraits into vertical cards, with products visible in context rather than isolated against a blank studio field. Keep image color and contrast natural; the measured dominant navy and earth tones belong primarily to photography, not interface chrome.

## Components

### Utility and primary navigation

A slim utility row sits above a white main navigation bar. Use 14px Aktiv Grotesk navigation text in charcoal and preserve the spacious, uncluttered header arrangement.

### Campaign hero

Full-bleed lifestyle image with a large, left-aligned heading, short supporting line, and white rectangular shop buttons. Keep the text legible over the photograph.

### Product carousel

Horizontal rail of tall product photographs with compact 14px names and prices beneath; use light #ededed or #f8f8f8 card surfaces where needed.

### Campaign split

Two adjacent photographic promotions with short overlaid labels, titles, and shop links or buttons. Keep the imagery dominant and copy concise.

### Category and gifting rails

Image-led horizontal cards with concise white labels over the lower image area, paired with simple carousel arrows and category or audience selectors.

### Newsletter and footer

Email sign-up sits alongside three link columns. Use subtle gray borders and muted copy, then finish with compact legal text and social icons.

### Measured component styles

- **Primary button**: background #999999 · text #ffffff · border 1px solid #ffffff · radius 50% · padding 8px · 400 24px Arial
- **Secondary button** (“Ask Vuori”): transparent background · text #333333 · border 1px solid #727272 · radius 3996px · padding 0px 8px · 400 18px Arial
- **Link** (“Vuori Galaxy High Rise Wideleg $128”): transparent background · text #333333 · radius 0px · padding 0px · 300 14px aktiv-grotesk
- **Input**: transparent background · text #000000 · radius 0px · padding 6px 4px 6px 24px · 400 14px aktiv-grotesk
- **Card**: background #ededed · text #333333 · radius 0px · padding 0px · 300 14px aktiv-grotesk
- **Navigation item** (“New Women Men Accessories Gifting Explor”): transparent background · text #333333 · radius 0px · padding 0px · 300 14px aktiv-grotesk

## Do

- Use #ffffff as the dominant canvas.
- Let campaign photography span the full content width.
- Keep interface text and separators neutral and understated.
- Use Aktiv Grotesk or a close, clean sans-serif substitute.
- Keep product labels compact and directly attached to imagery.
- Use whitespace to distinguish major campaign bands.

## Don't

- Do not introduce a bright interface accent absent from the measured palette.
- Do not add decorative gradients or prominent drop shadows.
- Do not place campaign photography inside rounded floating cards.
- Do not make headings shouty with routine all-caps.
- Do not mistake colors inside apparel photography for UI palette colors.
- Do not overcrowd image overlays with long blocks of copy.

## Agent prompt

Build a new Vuori-style commerce page with a white #ffffff canvas and restrained gray interface colors. Use #333333 for navigation and ordinary links, #212121 for stronger headings, #727272 for muted details, and #ededed or #f8f8f8 only for quiet card surfaces. Use #c6c6c6 and #e0e0e0 as subtle borders, not decorative accents. Set type in Aktiv Grotesk or Inter, with compact navigation and product details, light body copy, and large sentence-case campaign headings. Organize the page as broad photographic campaign bands alternating with horizontal product or category rails. Make lifestyle imagery the main source of color, and overlay concise copy and simple white shop buttons directly on campaign photography. Keep components flat, spacing deliberate, and the footer compact and practical.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width photographic carousel with copy and shop actions overlaid toward the left. | campaign carousel, shop links, slide indicators | full-bleed photography, white buttons, text overlay, carousel arrows |
| 2 | product-grid | Left-aligned heading above a horizontal rail of product image cards. | horizontal product browsing, price labels | portrait product photography, compact captions, carousel control |
| 3 | feature-split | Single full-bleed campaign image with collection copy positioned over the image. | collection introduction, shop now link | full-width image, short copy overlay |
| 4 | feature-split | Two adjacent photographic campaign panels, each with an overlay title and shop actions. | paired campaigns, audience-specific shopping | two-column photography, lower image overlays, white buttons |
| 5 | category-nav | Section title and audience tabs above a horizontal image-card category rail. | audience tabs, category browsing, carousel navigation | image tiles, overlaid category labels, arrow control |
| 6 | category-nav | Gift-focused heading and audience selectors above a horizontally browsable image rail. | gift discovery, audience tabs, carousel navigation | campaign tiles, white image labels, arrow control |
| 7 | gallery | Compact horizontal strip of color-themed photographic cards with carousel arrows. | browse by color, carousel navigation | photo tiles, small labels, arrow controls |
| 8 | feature-split | Full-bleed training campaign image with left-aligned heading and two shop actions. | brand positioning, men's and women's shop links | full-width lifestyle image, text overlay, stacked white buttons |
| 9 | footer | Newsletter block beside three columns of links, followed by social icons and legal details. | email sign-up, support navigation, social links | flat white surface, subtle input border, compact link columns |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--ais-text-color-rgb: 38,38,38;
--ais-text-color-alpha: 1;
--ais-primary-color-rgb: 30,89,255;
--ais-primary-color-alpha: 1;
--ais-muted-color-rgb: 82,82,82;
--ais-muted-color-alpha: 1;
--ais-button-text-color-rgb: 255,255,255;
--ais-button-text-color-alpha: 1;
--ais-border-color-rgb: 150,150,150;
--ais-border-color-alpha: 1;
--ais-background-color-rgb: 255,255,255;
--ais-background-color-alpha: 1;
--ais-overlay-color-rgb: 115,114,129;
--ais-overlay-color-alpha: 0.4;
--ais-shadow-color-rgb: 23,23,23;
--ais-spacing-factor: 1;
--ais-spacing: calc(16 * 1 * 1px);
--ais-shadow-xs: 0px 1px 2px 0px rgba(23,23,23,0.15);
--ais-shadow-sm: 0px 0px 0px 1px rgba(23,23,23,0.05),0px 1px 3px 0px rgba(23,23,23,0.25);
--ais-shadow-md: 0px 0px 0px 1px rgba(23,23,23,0.05),0px 4px 8px -2px rgba(23,23,23,0.25);
--ais-shadow-lg: 0 0 0 1px rgba(23,23,23,0.05),0 6px 16px -4px rgba(23,23,23,0.15);
--ais-border-radius-sm: 4px;
--ais-border-radius-md: 8px;
--ais-border-radius-lg: 16px;
--ais-border-radius-full: 9999px;
--ais-font-size: calc(16 * 1px);
--ais-font-weight-medium: 500;
--ais-font-weight-semibold: 600;
--ais-font-weight-bold: 700;
--ais-transition-duration: 0.3s;
--kl-reviews-color-light-gray: #e9e9eb;
```

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