---
version: alpha
name: Vuori
description: "Sun-warmed coastal performance wear, cut into hard right angles and a whisper-quiet grotesk."
colors:
  on-surface-variant: "#5A5A5A"
  on-surface: "#333333"
  surface: "#FFFFFF"
  outline: "#000000"
  primary: "#0066CC"
  muted-gray: "#727272"
  off-white: "#F8F8F8"
  light-gray: "#EDEDED"
  mist: "#C6C6C6"
  steel: "#949596"
  pale-blue: "#E0F0FF"
typography:
  legal-micro:
    fontFamily: Aktiv Grotesk
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  utility-label:
    fontFamily: Aktiv Grotesk
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  small:
    fontFamily: Aktiv Grotesk
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  body-nav:
    fontFamily: Aktiv Grotesk
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body-large-button:
    fontFamily: Aktiv Grotesk
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  subheading:
    fontFamily: Aktiv Grotesk
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
  heading-small:
    fontFamily: Aktiv Grotesk
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
  heading:
    fontFamily: Aktiv Grotesk
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
  heading-large:
    fontFamily: Aktiv Grotesk
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0em
  display:
    fontFamily: Aktiv Grotesk
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.01em
  hero-display:
    fontFamily: Aktiv Grotesk
    fontSize: 50px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.01em
rounded:
  buttons-cards-hero-ctas-links: 0px
  search-form-input: 2px
spacing:
  3xs: 4px
  2xs: 8px
  xs: 16px
  sm: 21px
  md: 24px
  lg: 32px
---
# Vuori — Style Reference
> Sun-warmed coastal performance wear, cut into hard right angles and a whisper-quiet grotesk.

**Theme:** light

Vuori runs almost entirely on ink and paper: a single warm-neutral gray (`#333333`) does the work of a brand color, laid on pure white, with pure black reserved for maximum-contrast moments. The one signature move is the refusal of roundness — buttons, cards, and hero CTAs all sit at a literal `0px` radius; only the search field softens to `2px` and utility icons to a full circle. The type is Aktiv Grotesk at Light (300), Regular (400), and Medium (500) — no bold, no italics, no drama — so the voice stays understated while the imagery carries the heat. Layout is photograph-first: a full-bleed multi-panel collage of sun-drenched lifestyle shots fills the fold, with white overlay text and flat white buttons the only chrome. The only chromatic event on the entire page is the small spectral-gradient wordmark tile; everything else is a disciplined grayscale with one functional link blue held in reserve.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Ink | `#333333` | `--color-ink` | Primary text, nav, body copy, and the logo fill — the brand's de-facto black; softer than true black on purpose. |
| True Black | `#000000` | `--color-black` | Max-contrast headings, search-field input text, and the hardest hairline borders; used sparingly against Ink. |
| Slate | `#5A5A5A` | `--color-slate` | Secondary text and a mid-gray dark surface; never a headline color. |
| Muted Gray | `#727272` | `--color-muted` | Tertiary/utility labels and small text buttons — the quietest legible step. |
| White | `#FFFFFF` | `--color-white` | Page canvas, solid CTA fill, and overlay text on photography; the ground everything sits on. |
| Off-White | `#F8F8F8` | `--color-surface` | Subtle raised surface — section bands and cards that need a hair of separation. |
| Light Gray | `#EDEDED` | `--color-surface-2` | Second surface step and the default hairline border; the workhorse divider. |
| Mist | `#C6C6C6` | `--color-border` | Outline-button border and mid-weight dividers. |
| Steel | `#949596` | `--color-border-strong` | Form-input border — the strongest neutral hairline. |
| Pale Blue | `#E0F0FF` | `--color-tint` | Tinted surface for promo/selection states; the palette's only soft chroma. |
| Link Blue | `#0066CC` | `--color-link` | Functional link color only — never a CTA fill; the chrome has no other accent. |

## Tokens — Typography
### Aktiv Grotesk — the entire type system: nav, display headings, body, and buttons · `--font-sans`
- **Substitute:** Neue Haas Grotesk, Helvetica Now, Arial (the declared system fallback)
- **Weights:** 300 (Light), 400 (Regular), 500 (Medium) — no bold in the brand chrome
- **Sizes:** 10, 12, 13, 14, 15, 18, 21, 28, 36, 40, 50 px
- **Line height:** tight on display (~1.0–1.1), ~1.4–1.5 on body
- **Letter spacing:** near-neutral; large display sizes read tight and confident (tracking not measured in scan)
- **Role:** One family carries everything. Light (300) handles large display and airy body; Regular (400) is the default for nav and headings; Medium (500) adds just enough weight for emphasis. The restraint is the point.

*Note: the scan also loaded Open Sans and Poppins — those belong to embedded review/marketing widgets, not the Vuori type system, and are excluded here.*

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Legal / micro | 10px | 1.5 | normal | `--text-3xs` |
| Utility label | 12px | 1.4 | normal | `--text-2xs` |
| Small | 13px | 1.4 | normal | `--text-xs` |
| Body / nav | 14px | 1.5 | normal | `--text-sm` |
| Body large / button | 15px | 1.4 | normal | `--text-base` |
| Subheading | 18px | 1.3 | normal | `--text-lg` |
| Heading small | 21px | 1.3 | normal | `--text-xl` |
| Heading | 28px | 1.2 | normal | `--text-2xl` |
| Heading large | 36px | 1.1 | normal | `--text-3xl` |
| Display | 40px | 1.1 | tight | `--text-4xl` |
| Hero display | 50px | 1.0 | tight | `--text-5xl` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable / editorial

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 3xs | 4px | `--spacing-3xs` |
| 2xs | 8px | `--spacing-2xs` |
| xs | 16px | `--spacing-xs` |
| sm | 21px | `--spacing-sm` |
| md | 24px | `--spacing-md` |
| lg | 32px | `--spacing-lg` |

### Border Radius
| Element | Value |
|---------|-------|
| Buttons, cards, hero CTAs, links | 0px (`--radius-none`) |
| Search / form input | 2px (`--radius-input`) |
| Utility icons / avatar | 50% (`--radius-full`) |

### Shadows
None. The system is deliberately flat — depth comes from hairline borders and luminance steps, not elevation.

### Layout
- **Page max-width:** contained content bands over a full-bleed photographic hero
- **Section gap:** generous, ~32px+ between bands
- **Card padding:** minimal — product cards run edge-to-edge with ~4px caption offsets
- **Element gap:** 8–16px between controls; nav items spaced comfortably

## Components
### Primary CTA (Solid)
**Role:** The hero call-to-action — "Shop Women's New," "Shop Men's New."
Solid white fill (`#FFFFFF`) with Ink text (`#333333`), `0px` radius, ~16px padding, 13–15px Regular (400). Flat, no shadow, hard corners. Reads as a confident tile over dark photography rather than a glossy button.

### Secondary CTA (Outline)
**Role:** Lower-emphasis actions on light surfaces.
Transparent fill, Ink text (`#333333`), a 1px Mist border (`#C6C6C6`), `0px` radius, ~7px/21px padding, 15px Regular. The outline is the entire treatment — no fill, no rounding.

### Text Button
**Role:** Utility and inline actions (account, help, small links).
No fill, no border, Muted Gray (`#727272`) or Ink text, `0px` radius, tight ~1px/8px padding, 12px Regular. The quietest interactive element in the system.

### Search Field
**Role:** The header "Search Vuori" input.
White fill (`#FFFFFF`), True Black input text (`#000000`) at 300 weight, a 1px Steel border (`#949596`), `2px` radius, left padding ~16px. The only softened corner on the page.

### Inline / Form Input
**Role:** Underline-style form fields.
Transparent fill, True Black text (`#000000`) at 300 weight, no border (bottom-rule style), `0px` radius, 14–15px. Airy and minimal.

### Navigation Link
**Role:** Top-level nav (New, Women, Men, Accessories, Explore).
Ink text (`#333333`), 14px at 300–400 weight, `0px` radius, ample vertical padding (~28px) for a tall, breathable header. No underline at rest.

### Hero Collage
**Role:** The above-the-fold statement — a full-bleed multi-panel grid of lifestyle photography.
Four adjacent image panels fill the viewport width; white overlay text ("Just In," "New Arrivals" at ~50px Light) and flat white CTAs sit lower-left. No gradient scrims beyond what the photography carries.

### Product Card
**Role:** New-arrivals and category grids.
Image-forward with `0px` radius, Ink caption text (`#333333`) at 300 weight, 14px, offset ~4px below the image. No border, no shadow — the photograph is the card.

### Utility Bar
**Role:** The slim top strip — "New To Vuori? Start here," Sign Up, Find a Store, region (CA).
Off-white/light band, Muted Gray text (`#727272`) at 12px, centered promo with right-aligned utilities.

### Logo Mark
**Role:** The "vuori" wordmark with its small spectral-gradient tile.
Ink (`#333333`) lowercase grotesk wordmark preceded by a rectangular tile carrying a blue-to-yellow spectral gradient — the single chromatic accent in the entire interface.

### Dark Surface / Footer
**Role:** Full-width dark bands (footer, occasional feature sections).
Near-black fill (`#141414`) with White text (`#FFFFFF`), `0px` radius, hairline dividers. The inverse of the default light chrome.

## Do's and Don'ts
### Do
- Keep corners hard — `0px` on buttons, cards, and CTAs; `2px` only on the search field.
- Use `#333333` as your default "black"; reserve `#000000` for genuine max-contrast moments.
- Let photography carry all the color — chrome stays grayscale on white.
- Stay within Aktiv Grotesk at 300/400/500. Lean on weight and size, never on a second family.
- Convey depth with hairline borders (`#EDEDED`, `#C6C6C6`) and luminance steps, not shadows.
- Fill primary CTAs solid white over imagery; use the outline (`#C6C6C6`) treatment on light surfaces.

### Don't
- Don't round buttons or cards — a pill or an 8px radius breaks the brand instantly.
- Don't introduce a brand accent color into the chrome; the spectral logo tile and functional `#0066CC` link are the only chroma.
- Don't add drop shadows or elevation — the system is flat by law.
- Don't reach for bold or italic weights; the heaviest brand weight is Medium (500).
- Don't pull Open Sans or Poppins into the design — they are third-party widget fonts, not the type system.
- Don't tint large surfaces with `#E0F0FF`; it's a soft accent state, not a background.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Default page ground and solid CTA fill. |
| 1 | Subtle | `#F8F8F8` | Faint section bands and low-emphasis cards. |
| 2 | Raised | `#EDEDED` | Second surface step; doubles as the default hairline. |
| Tint | Pale Blue | `#E0F0FF` | Promo / selection state — the one soft-chroma surface. |
| Dark | Near-Black | `#141414` | Footer and inverse dark feature bands. |

## Elevation
Flat by design — the scan records zero shadows. Depth is expressed three ways: a small luminance step between white (`#FFFFFF`) and off-white (`#F8F8F8`/`#EDEDED`) surfaces; hairline borders (`#EDEDED` light, `#C6C6C6` mid, `#949596` strong) to separate zones; and photographic contrast, where dark imagery sits directly against white chrome. No blur, no offset, no layering illusion.

## Imagery
Photography is the entire art direction. Full-bleed lifestyle shots — athletes on sun-bleached coastal rock, warm golden light, muted earth-and-black apparel — are grouped into an edge-to-edge multi-panel collage at the fold. The mood is aspirational-but-grounded: real movement, natural light, no studio slickness. Product imagery is clean and edge-to-edge with `0px` corners. The only graphic element is the spectral-gradient logo tile (blue → yellow), a deliberate single spark against the otherwise monochrome system.

## Layout
Full-bleed photographic hero over contained content bands. The header is a tall, breathable white bar (wordmark left, five-item nav, right-aligned search/account/bag icons) sitting under a slim utility strip. Below the hero, sections alternate white and faint-gray bands with generous vertical rhythm; product grids run image-forward with minimal caption chrome. Navigation is a classic top horizontal bar — no sidebars, no sticky drama. Alignment is left-led for editorial text (hero copy lower-left), centered for promo utility strips.

## Typography Signature
One family, three weights, doing everything — that's the move. Aktiv Grotesk Light (300) at 50px gives the hero a calm, oversized elegance that never shouts; the same family at 14px Regular runs the nav and body without a visible seam. Because there is no serif, no bold, and no second typeface, hierarchy is built almost entirely from size and generous whitespace. The grotesk's neutral, slightly humanist letterforms keep the whole system feeling athletic and modern rather than fashion-cold — premium through restraint, not ornament.

## Agent Prompt Guide
## Quick Color Reference
- background: `#FFFFFF` / text: `#333333` / surface: `#F8F8F8` / border: `#C6C6C6` / accent: `#0066CC` (functional link only) / primary action: `#FFFFFF` solid fill with `#333333` text (no colored CTA)

## Example Component Prompts
1. **Hero Collage**: Build a full-bleed hero as a 4-panel horizontal image collage of sun-drenched athletic lifestyle photography. Overlay lower-left: "Just In" at 15px and "New Arrivals" at 50px in Aktiv Grotesk Light 300, `#FFFFFF`. Below, two flat CTAs — solid `#FFFFFF` fill, `#333333` text, `0px` radius, 16px padding — reading "Shop Women's New" and "Shop Men's New."
2. **Primary CTA**: A solid white button, background `#FFFFFF`, text `#333333` at 15px Aktiv Grotesk Regular 400, `0px` radius, 16px padding, no border, no shadow. Hard corners, flat, confident.
3. **Header Bar**: A tall white header (`#FFFFFF`) with a lowercase "vuori" grotesk wordmark (`#333333`) preceded by a small blue-to-yellow spectral-gradient tile; five nav links (New, Women, Men, Accessories, Explore) at 14px `#333333`; right-aligned search field with `#949596` 1px border and `2px` radius, plus account and bag icons. Slim utility strip above in `#727272` 12px text.
4. **Product Card**: Image-forward product card, `0px` radius, no border, no shadow; caption in `#333333` Aktiv Grotesk Light 300 at 14px offset ~4px below the photo. The image runs edge-to-edge.
5. **Outline Button**: A transparent secondary button with 1px `#C6C6C6` border, `#333333` text at 15px Regular, `0px` radius, 7px/21px padding — no fill, no rounding.

## Similar Brands
- **Aritzia** — same understated grayscale-on-white editorial chrome that lets full-bleed photography supply all the warmth.
- **Everlane** — kindred minimalist neutral palette, flat surfaces, and a single quiet grotesk carrying the whole system.
- **Alo Yoga** — shared premium-activewear register: photography-forward, near-monochrome, hard-cornered restraint.
- **Lululemon** — parallel athletic-lifestyle art direction with disciplined type and imagery over decoration.
- **COS** — the same anti-ornament stance: sharp corners, one grotesk, and paper-white space as the primary material.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-ink: #333333;
  --color-black: #000000;
  --color-slate: #5A5A5A;
  --color-muted: #727272;
  --color-white: #FFFFFF;
  --color-surface: #F8F8F8;
  --color-surface-2: #EDEDED;
  --color-border: #C6C6C6;
  --color-border-strong: #949596;
  --color-tint: #E0F0FF;
  --color-link: #0066CC;
  --color-dark: #141414;

  /* Typography — Families */
  --font-sans: 'aktiv-grotesk', 'Neue Haas Grotesk', Arial, ui-sans-serif, system-ui, sans-serif;

  /* Typography — Scale */
  --text-3xs: 10px;
  --text-2xs: 12px;
  --text-xs: 13px;
  --text-sm: 14px;
  --text-base: 15px;
  --text-lg: 18px;
  --text-xl: 21px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 40px;
  --text-5xl: 50px;
  --leading-tight: 1.05;
  --leading-snug: 1.3;
  --leading-normal: 1.5;

  /* Font weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;

  /* Spacing */
  --spacing-3xs: 4px;
  --spacing-2xs: 8px;
  --spacing-xs: 16px;
  --spacing-sm: 21px;
  --spacing-md: 24px;
  --spacing-lg: 32px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-input: 2px;
  --radius-full: 50%;
}
```
### Tailwind v4
```css
@theme {
  /* Colors */
  --color-ink: #333333;
  --color-black: #000000;
  --color-slate: #5A5A5A;
  --color-muted: #727272;
  --color-white: #FFFFFF;
  --color-surface: #F8F8F8;
  --color-surface-2: #EDEDED;
  --color-border: #C6C6C6;
  --color-border-strong: #949596;
  --color-tint: #E0F0FF;
  --color-link: #0066CC;
  --color-dark: #141414;

  /* Typography — Families */
  --font-sans: 'aktiv-grotesk', 'Neue Haas Grotesk', Arial, ui-sans-serif, system-ui, sans-serif;

  /* Typography — Scale */
  --text-3xs: 10px;
  --text-2xs: 12px;
  --text-xs: 13px;
  --text-sm: 14px;
  --text-base: 15px;
  --text-lg: 18px;
  --text-xl: 21px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 40px;
  --text-5xl: 50px;

  /* Spacing */
  --spacing-3xs: 4px;
  --spacing-2xs: 8px;
  --spacing-xs: 16px;
  --spacing-sm: 21px;
  --spacing-md: 24px;
  --spacing-lg: 32px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-input: 2px;
  --radius-full: 50%;
}
```