---
version: alpha
name: "Vuori"
description: "Coastal California athleisure. AktivGrotesk at featherlight 300 weight over a warm white canvas — unhurried, open, built to move in and live in."

colors:
  background: "#ffffff"
  surface: "#f8f8f8"
  ink: "#333333"
  # ink is the dominant text color across body, nav links, and headings — a warm near-black rather than pure #000
  ink-secondary: "#727272"
  # ink-secondary is the mid-grey used for labels, captions, and muted helper text (MUI form labels, bottom-nav links)
  on-primary: "#ffffff"
  primary: "#333333"
  primary-container: "#000000"
  # primary-container is the deepened hover/active state for filled black buttons
  border: "#333333"
  border-subtle: "#ededed"
  # border-subtle is the nav toolbar divider and input underline resting state — a light separator
  border-input: "#000000"
  # border-input is the 1px underline on active form inputs (MUI standard variant)
  focus-ring: "#727272"
  # focus-ring is the visible outline color on focused interactive elements (estimated from mid-grey system)
  error: "#d02e2e"
  # error is #D02E2E — used for form validation error states on inputs (MUI Mui-error)
  disabled: "#c6c6c6"
  # disabled is #C6C6C6 — the disabled state color for buttons and interactive controls
  shadow-soft: "#000000"
  # shadow-soft flattened from rgba(0,0,0,0.20) — the base tint for MUI elevation shadows

typography:
  display-hero:
    fontFamily: "AktivGrotesk, Barlow, ui-sans-serif, system-ui, sans-serif"
    fontSize: 43px
    fontWeight: 400
    lineHeight: 1.14
    letterSpacing: -0.03em
  display:
    fontFamily: "AktivGrotesk, Barlow, ui-sans-serif, system-ui, sans-serif"
    fontSize: 35px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.03em
  heading-section:
    fontFamily: "AktivGrotesk, Barlow, ui-sans-serif, system-ui, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.214
    letterSpacing: -0.03em
  heading-sub:
    fontFamily: "AktivGrotesk, Barlow, ui-sans-serif, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.02em
  body-large:
    fontFamily: "AktivGrotesk, Barlow, ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.73
    letterSpacing: -0.01em
  body:
    fontFamily: "AktivGrotesk, Barlow, ui-sans-serif, system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 300
    lineHeight: 1.73
    letterSpacing: -0.01em
  body-medium:
    fontFamily: "AktivGrotesk, Barlow, ui-sans-serif, system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.75
    letterSpacing: 0px
  nav-link:
    fontFamily: "AktivGrotesk, Barlow, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "AktivGrotesk, Barlow, ui-sans-serif, system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.75
    letterSpacing: 0px
  label-upper:
    fontFamily: "AktivGrotesk, Barlow, ui-sans-serif, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.04em
  caption:
    fontFamily: "AktivGrotesk, Barlow, ui-sans-serif, system-ui, sans-serif"
    fontSize: 13px
    fontWeight: 300
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 100px

rounded:
  none: 0px
  sm: 4px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 24px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 24px
    borderColor: "{colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 24px
  button-text:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 0px
  button-icon:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    rounded: "{rounded.pill}"
    padding: 8px 8px
    size: 40px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 16px
  input:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 0px
    borderColor: "{colors.border-subtle}"
  input-focus:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 0px
    borderColor: "{colors.border-input}"
  input-error:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 0px
    borderColor: "{colors.error}"
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.sm}"
    padding: 2px 8px
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 0px 24px
    borderColor: "{colors.border-subtle}"
---

# Vuori Design System

## Overview

Vuori arrives as stillness. Where most activewear brands signal intensity through weight and density, Vuori's digital presence operates on the opposite register — a warm white canvas (`{colors.background}`), AktivGrotesk set at weight 300, generous line-heights, and barely any radius to speak of. The primary text color is not absolute black but a settled warm charcoal (`{colors.ink}`) that sits like dusk light rather than demanding attention. The whole site reads like a long exhale: coastal California distilled into a grid.

The typography is the brand's strongest design statement. AktivGrotesk runs the entire interface in three weights — Light (300), Regular (400), and Medium (500) — with headings set at featherlight weight 400 and body copy at 300. The result is a typographic voice that trusts the reader. Display headings arrive at 28–43px with tight −0.03em tracking and controlled 1.14–1.2 line-heights; the body system relaxes to 15px at a wide 1.73 line-height and −0.01em tracking. This contrast between compressed display and airy body text gives the pages a rhythmic quality, like the difference between a headline on a trail sign and a journal entry written at camp. The brand's identity text mark — the Vuori wordmark — sports a multicolor gradient icon (sky blue through ocean to amber to solar yellow) that echoes the coastal gradients of Carlsbad: an understated flash of character against the otherwise achromatic system.

Elevation and depth are minimal by design. MUI standard-variant inputs use a single underline rather than a boxed field — a shape decision that keeps the input layer as unobtrusive as a pencil line on paper. Buttons favor text and outlined variants; the primary contained button is black fill with no radius, reading as a typographic block rather than a traditional "button shape." Product cards are flat, edge-to-edge, and cornerless. Shadow appears only on overlaid dialogs and modals, delivered at low opacity. The system uses shape and whitespace as its organizing tools, not depth.

**Key Characteristics:**
- Warm white canvas (`{colors.background}`) with warm charcoal ink (`{colors.ink}`) — soft contrast, not absolute black
- AktivGrotesk in weights 300/400/500 only — single family, light weight as the personality register
- Display headings at weight 400 with −0.03em tracking; body at weight 300, −0.01em, 1.73 line-height
- Flat border radius everywhere — `{rounded.none}` on buttons, cards, and inputs; `{rounded.sm}` (4px) for small UI chips; `{rounded.pill}` for circular icon controls only
- Underline-style MUI inputs — no border box, just a bottom edge transitioning from `{colors.border-subtle}` to `{colors.border-input}` on focus
- Minimal shadow vocabulary — flat cards, shadows only on floating overlays
- Text and outlined buttons as the dominant CTA pattern — "Shop Now" appears as clean text, not a filled block
- 8px base spacing grid; generous body margins; sections breathe at 48–100px
- Colorful Vuori logomark gradient (sky blue → ocean blue → amber → solar yellow) — the one chromatic signature in an otherwise monochromatic UI
- MUI component infrastructure (1,300+ components), with Vuori's AktivGrotesk and flat aesthetic tokens layered over the top

## Colors

### Primary Canvas
- **Warm White** (`{colors.background}`): Page background, nav bar, card surfaces, modal backdrops. The entire UI rests on this field.
- **Off-White Grey** (`{colors.surface}`): Alternate section backgrounds, form container fills, product photography placeholder state. A step softer than the page.

### Text
- **Warm Charcoal** (`{colors.ink}`): Primary text — headings, body, nav links, button labels. A warm `#333333` rather than pure black; softens reading intensity without sacrificing legibility.
- **Mid Grey** (`{colors.ink-secondary}`): Placeholder text, muted labels, form helper copy, bottom navigation links. `#727272` — the lower tier in the two-level text hierarchy.

### Interaction
- **Charcoal Black** (`{colors.primary}`): Primary button fill, outlined button border, and link colors. Same `{colors.ink}` family.
- **True Black** (`{colors.primary-container}`): Deepened hover/active state for filled buttons — pressed intensity without introducing a new hue.

### Borders
- **Dark** (`{colors.border}`): Outlined button edges and hard UI borders.
- **Subtle** (`{colors.border-subtle}`): Toolbar divider lines, drawer separators, input resting-state underlines. `#ededed` — barely visible.
- **Input Active** (`{colors.border-input}`): Input bottom-border on focus and when filled — `#000000`. The one strong ink moment in the form layer.

### Semantic
- **Error Red** (`{colors.error}`): Form validation — input error borders and error state indicators. `#d02e2e`.
- **Disabled** (`{colors.disabled}`): Disabled button states and inactive controls. `#c6c6c6`.

## Typography

### Font Family
- **Primary (AktivGrotesk)**: Self-hosted in three weights — Light (300), Regular (400), Medium (500). Closest Google Font substitute: `Barlow`. Full fallback: `AktivGrotesk, Barlow, ui-sans-serif, system-ui, sans-serif`. Runs the entire interface — display, body, navigation, buttons, labels.

### Hierarchy

The complete type scale lives in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | Homepage hero headlines — ~43px, weight 400, −0.03em |
| `display` | Campaign section headlines and feature module titles — ~35px |
| `heading-section` | Section headers ("New Arrivals", "Men's New") — 28px |
| `heading-sub` | Card names, sub-section titles, product type labels — 20px |
| `body-large` | Lead-in paragraphs, tagline copy, modal intro text — 18px/300 |
| `body` | All body copy, nav flyouts, product descriptions — 15px/300 |
| `body-medium` | Emphasized body, button labels, active nav items — 15px/500 |
| `nav-link` | Desktop navigation links (New, Women, Men, Accessories) — 14px/400 |
| `button-ui` | CTA text, outlined button labels, Shop Now links — 15px/500 |
| `label-upper` | Uppercase product tags and category chips — 12px/500, positive tracking |
| `caption` | Price metadata, size identifiers, legal footnotes — 13px/300 |

### Principles
- Single typeface across all roles — hierarchy comes from weight and size alone, never font mixing
- Weight 300 is the resting voice; weight 400 is a heading; weight 500 is action-oriented text
- Negative tracking at display sizes (−0.03em for headings, −0.01em for body) — compressed and composed
- Wide body line-height (1.73) creates a reading experience that breathes; no pressure to consume quickly
- Uppercase labels at 12px/500 with positive tracking are the only departure from the flowing all-lowercase rhythm

## Layout

### Spacing System
The complete spacing scale lives in the `spacing:` token block above. Base unit: `{spacing.sm}` (8px).

Vuori's spacing personality is dual-natured: component-level spacing is tight and precise (4–16px), while section breaks are genuinely generous (48–100px). This creates a page rhythm where content modules feel editorial and intentional, not stacked out of necessity. The body has liberal margins — desktop nav sits at 24px padding; section containers breathe at 64–100px vertical gaps.

### Grid & Container
- Max content width: approximately 1536px (matches the largest MUI breakpoint)
- Product grids: responsive column layouts — 4-col at desktop, 2-col at tablet, 1-col on mobile
- Hero sections: full-bleed photography edge-to-edge with text overlay at lower-left
- Navigation: sticky top bar with left logo, center category links, right utility icons (search, bag, account)

### Whitespace Philosophy
- Whitespace is generous and intentional — the site does not compete for attention
- Section transitions at 64–100px ensure each content zone feels like a separate breath
- Component interior spacing stays minimal (8–16px) so the breathing happens between modules, not within them

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Default for all product cards, page sections, nav bar content areas |
| Subtle (Level 1) | `0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12)` | MUI Paper elevation — floating panels, drawers |
| Elevated (Level 2) | `0px 2px 20px 0px rgba(0,0,0,0.16)` | Modal dialogs and overlays (email capture, quiz) |
| Focus Ring | Outline inherited from `{colors.focus-ring}` | Keyboard focus on interactive controls |

**Shadow Philosophy**: Vuori's elevation model is nearly invisible in commerce contexts. Product cards carry no shadow — they are flat photographs on a flat canvas. The MUI shadow vocabulary appears only on transient surfaces: drawers, modals, and popovers. Even there, the opacity levels are conservative (max 0.20). The flatness isn't a limitation but a style choice — a still lake, not a cluttered desk.

## Shapes

The complete radius scale lives in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, cards, hero imagery containers, all primary UI surfaces |
| `sm` | 4px | Small chips, badge elements, minor UI controls |
| `pill` | 9999px | Circular icon buttons (account, search, burger) — 40×40px |

Vuori's shape language is deliberately minimal: three tiers only, and the dominant one is none. Buttons are rectangular blocks — not rounded, not pill-shaped. This is an unusual choice in activewear DTC, where competitors favor pill buttons. The flatness reads as confidence: we don't need a friendly shape to signal warmth; the photography and typography carry that weight. The only circles in the system are small icon controls, where the round form is purely functional (indicating an icon-only action, not a text label).

## Components

The complete component spec lives in the `components:` token block above.

### Button Variants

- **`button-primary`** — Flat black fill (`{colors.primary}`), white text, 0px radius. The contained CTA for e-commerce actions like "Add to Cart". Text in `{typography.button-ui}` (15px/500). No softening.
- **`button-primary-hover`** — Deepens to pure `{colors.primary-container}` (#000000) on hover. Near-imperceptible shift signals state without shape change.
- **`button-secondary`** — White fill, black 1px border, 0px radius. Used for secondary options like "Shop Women's" and "View All". Inverts to filled black on hover.
- **`button-text`** — No fill, no border. The "Shop Now" hero CTA pattern. Text-only link-style button for editorial contexts. Padding 8px top/bottom, 0 horizontal.
- **`button-icon`** — Circular (50% / `{rounded.pill}`), 40×40px. Transparent background, dark icon. Hamburger, search, bag, account in the nav bar.

### Cards
- **`card`** — Flat, 0px radius, no padding. Product photography fills edge to edge. The card is an invisible frame around the image.
- **`card-surface`** — Off-white surface (`{colors.surface}`), 0px radius, 16px interior padding. Used for contained editorial sections and promotional blocks.

### Inputs
- **`input`** — MUI standard variant: no border box, only a bottom edge in `{colors.border-subtle}`. Transparent background, 0px radius. Padding 8px vertical, 0 horizontal. Label floats above on focus (MUI floating label pattern).
- **`input-focus`** — Same geometry; bottom border transitions to `{colors.border-input}` (#000000) at full weight. No box shadow or glow — strictly a line weight change.
- **`input-error`** — Bottom border becomes `{colors.error}` (#d02e2e). Used for form validation feedback.

### Badges
- **`badge`** — Off-white `{colors.surface}` background, mid-grey text, 4px radius. Uppercase `{typography.label-upper}` style. Used for product availability tags and category labels.

### Navigation
- **`nav-bar`** — White sticky bar. Logo left (Vuori wordmark with gradient icon). Center: category links (New, Women, Men, Accessories) in `{typography.nav-link}`. Right: icon buttons (search, account, bag). Bottom edge: 1px `{colors.border-subtle}` divider. Sticky on scroll with `elevation4` MUI shadow.

## Do's and Don'ts

### Do
- Keep button corners at 0px (`{rounded.none}`) — the sharp rectangle is Vuori's CTA signature; never soften it
- Use `{colors.ink}` (#333333) for all body and heading text — never absolute `#000000` for prose; it reads warmer
- Apply weight 300 for all body copy (`{typography.body}`) — this featherlight body voice is the brand's most distinctive typographic choice
- Reserve weight 500 (`{typography.body-medium}`) exclusively for CTA labels, active states, and interactive button text
- Use full-bleed, edge-to-edge photography for all product cards and hero sections — never add padding or border-radius around product imagery
- Keep input fields as bottom-edge underlines (MUI standard variant) — never switch to outlined or filled input variants
- Use `{colors.border-subtle}` (#ededed) for all structural dividers (nav separators, drawer lines) — never a heavier grey
- Let section whitespace do the organizing — prefer 64–100px vertical breaks over divider lines or background color shifts

### Don't
- Don't round primary buttons or product cards — any radius between 1px and 9998px is outside the system
- Don't introduce a chromatic brand accent into buttons or UI chrome — the only non-neutral color in the UI is `{colors.error}` for validation
- Don't use weight 700 for headings — all display text is weight 400; heavy weights are absent from the system's personality
- Don't apply box-shadows or card elevation to product imagery — flat presentation is structural, not a missing feature
- Don't use absolute black (`#000000`) for body text — `{colors.ink}` (#333333) is the correct text color; pure black reads too harsh against the warm white canvas
- Don't tighten body line-height below 1.73 — the wide spacing is what makes the reading experience feel unhurried
- Don't mix border-radius values — the system is binary: flat (`{rounded.none}`) for surfaces and text actions, circle (`{rounded.pill}`) for icon-only controls

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <425px | Single column, stacked layout, hamburger navigation |
| Mobile | 425–600px | Single column with edge padding, full-bleed hero |
| Tablet | 600–900px | 2-column product grids return, condensed nav |
| Desktop | 900–1200px | Full horizontal navigation, 4-col grids |
| Large Desktop | >1200px | Max-width container, generous side margins |

H1 scales responsively: 28px (1.75rem) base → 31px (1.96rem) at 425px → 35px (2.2rem) at 600px → 40px (2.5rem) at 900px → 43px (2.667rem) at 1200px. Line-height tightens from 1.214 to 1.14 as size grows.

### Touch Targets
- Outlined and text buttons at 10px vertical padding meet 44px touch height with the 15px line-height and 1.75 ratio
- Circular icon buttons are 40×40px with 8px padding — borderline; rely on the visual target being clear
- Product cards are fully tappable surfaces — no small hit target risk on grid items

### Collapsing Strategy
- Navigation collapses to hamburger below ~600px; search and bag icons remain visible
- Hero display headlines scale from 28px (mobile) to 43px (desktop) — the tracking stays −0.03em throughout
- 4-column product grids collapse: 4-col → 2-col at 600px → 1-col at 425px
- Section gaps compress from 100px to 64px to 32px at mobile
- Button shape (0px radius) is preserved at all breakpoints

### Image Behavior
- Hero images are full-bleed at all breakpoints, art-directed between desktop landscape and mobile portrait crops
- Product card images fill the card edge-to-edge with no rounding; the card itself is a borderless frame
- CDN images served via `cdn.bfldr.com` with responsive `sizes` attributes and `?auto=webp` optimization

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (#ffffff)
- Primary text: `{colors.ink}` (#333333)
- Secondary text: `{colors.ink-secondary}` (#727272)
- CTA background: `{colors.primary}` (#333333)
- CTA text: `{colors.on-primary}` (#ffffff)
- Border / Outline: `{colors.border}` (#333333)
- Subtle divider: `{colors.border-subtle}` (#ededed)
- Error: `{colors.error}` (#d02e2e)

### Example Component Prompts

1. **Hero Section**: Full-bleed photography with text anchored lower-left. Headline in AktivGrotesk/Barlow 400 40px `{colors.ink}`, −0.03em letter-spacing, 1.14 line-height. Sub-copy in AktivGrotesk/Barlow 300 18px, 1.73 line-height. CTA as a text-style link — no background, no border, AktivGrotesk 500 15px `{colors.ink}` with underline on hover. No radius anywhere.

2. **Primary CTA Button (Add to Cart)**: background `{colors.primary}` (#333333), text `{colors.on-primary}` (#ffffff), border-radius 0px (`{rounded.none}`), padding 10px 24px, font AktivGrotesk/Barlow 500 15px. Hover: background `{colors.primary-container}` (#000000), 0.25s ease transition on background-color.

3. **Product Card Grid**: 4-column grid, 8px gap. Each card: no background fill, no border, no radius, no shadow. Product image fills the card frame edge-to-edge. Product name below in AktivGrotesk/Barlow 400 15px `{colors.ink}`. Price in AktivGrotesk/Barlow 300 14px `{colors.ink-secondary}`.

4. **Email Capture Input (MUI standard variant)**: transparent background, no border-box — only a 1px bottom edge in `{colors.border-subtle}`. On focus: bottom edge transitions to `{colors.border-input}` (#000000). Padding 8px 0. Font AktivGrotesk/Barlow 300 15px `{colors.ink}`. Label floats above the field in 12px `{colors.ink-secondary}`.

5. **Navigation Bar**: White `{colors.background}` sticky bar, 56–64px height. Vuori wordmark with gradient icon (sky blue → ocean blue → amber → solar yellow) left-aligned. Center: category links in AktivGrotesk/Barlow 400 14px `{colors.ink}`, 24px gap. Right: account/search/bag circular icon buttons (40×40px, transparent, `{colors.ink}` icons). Bottom edge: 1px `{colors.border-subtle}`. On scroll: MUI elevation4 shadow.

6. **Outlined Secondary Button**: transparent background, 1px solid `{colors.border}` (#333333), 0px radius, padding 10px 24px. Font AktivGrotesk/Barlow 500 15px `{colors.ink}`. Hover: background fills to `{colors.primary}` (#333333), text becomes `{colors.on-primary}` (#ffffff). Transition 0.25s cubic-bezier(0.4, 0, 0.2, 1) on background-color and color.

### Iteration Guide

1. Start with `{colors.background}` (#ffffff) and set body text in `{colors.ink}` (#333333) — not #000000; the warmth matters
2. Typography hierarchy is weight only: 300 for body, 400 for headings, 500 for actions — no 700 anywhere
3. Every button and card gets 0px radius (`{rounded.none}`) — if it's a text/label action, it gets `{rounded.pill}` only if it's a 40×40 icon control
4. Input fields are underline-only (MUI standard) — if you reach for a boxed input, step back to the design
5. Shadows appear only on floating overlays; flat layers stay flat regardless of their hierarchy
6. The single chromatic signature is the Vuori gradient logomark (blue → amber → yellow) — do not import this palette into UI chrome
7. Body line-height of 1.73 is non-negotiable — cutting it makes the brand feel like someone else

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Vuori. Brand names and trademarks belong to their respective owners.