# Vuori — Marketing site Design Spec

> Source: vuoriclothing.com (live DOM, computed styles), 2026-07-26. 0 stylesheets
> blocked. **This is a Material UI (MUI) React app**, not a Shopify theme — every
> element carries `MuiBox-root mui-style-<hash>`, styles are Emotion-injected, and
> there are **zero `:root` custom properties**, so §2 is read from the colour census
> and §4 from the Emotion rules. That changes how the numbers read: `rgba(0,0,0,.87)`
> (840 uses) and `rgba(0,0,0,.54)` are **MUI defaults** (`text.primary` /
> `text.secondary`), not authored values, while `#006dff` on the input focus
> underline **is** an override (MUI's default primary is `#1976d2`) and so is brand.
> **Excluded as third-party:** the greens `#346e4a` / `#468254` and `#f9fffa` are
> the **OneTrust** cookie banner, not Vuori colours; also Klarna, Swiper and
> accessibility-widget chrome. **Recorded rather than promoted:** `#27455c` navy
> appears 10 times but only on zero-size `<span>` elements — **product colourway
> swatches** inside tiles, not site chrome.
> Reality check: **"relaxed editorial" holds; "warm coastal neutrals" does not.**
> The neutrals are **pure/cool greys** (`#f8f8f8`, `#ededed`, `#e9e9e9`, `#f4f4f4`)
> with nothing warm anywhere, and the single colour moment is a **pale sky blue
> `#e0f0ff`** on two full-bleed bands. The find neither hint mentions: this is the
> **flattest system captured so far** — zero CSS gradients, zero backdrop-filter,
> zero grain, zero canvas/WebGL, only two brand `@keyframes` (both MUI internals),
> and **radius 0 on every control**. No og:image exists (only
> `msapplication-TileImage`), so the thumb is the hero video's fallback poster.

## 1. Visual Theme &amp; Atmosphere

Editorial, roomy and deliberately undecorated. A white canvas, cool grey blocks, one pale sky-blue band, and photography or video doing all the emotional work. Everything is square — **radius 0 on every button and input** — and controls carry no shadow at all, so the page reads as a printed lookbook rather than an interface. One typeface (aktiv-grotesk) runs the whole site, and it leans **light**: weight 300 is the most common UI weight, with 400 for body and 500 only at display. Two things create the "relaxed" feeling and are worth copying: a **graded negative tracking scale** that tightens as type grows (-1% small → -5% display), and an unusually **airy 1.71 line-height on small text** that compresses to 1.2 at display size. Motion is entirely MUI's standard curve at 0.15–0.3s, with no authored animation whatsoever. Feels: editorial, airy, coastal, undecorated, premium-plain.

## 2. Color Palette &amp; Roles

| Token | Hex / value | Role / usage |
|---|---|---|
| white | #ffffff | body canvas + contained-button fill (46 fill / 102 text uses) |
| grey-f8 | #f8f8f8 | THE most common fill — announcement bar + image overlay (58) |
| grey-ed | #ededed | product-tile image placeholder (40) |
| grey-e9 | #e9e9e9 | secondary block fill (5) |
| grey-f4 | #f4f4f4 | minor fill (1) |
| sky | #e0f0ff | **the one colour moment** — two full-bleed editorial bands (1512×682, 1512×512) |
| ink | #333333 | primary authored text (813) + contained-button hover fill |
| ink-87 | rgba(0,0,0,.87) | MUI `text.primary` (840) — inherited, not authored |
| ink-54 | rgba(0,0,0,.54) | MUI `text.secondary` (15) |
| black | #000000 | occasional text (15) |
| grey-72 | #727272 | muted text (106) |
| grey-69 | #696969 | muted text (33) |
| grey-55 | #555555 | muted text (16) |
| grey-c6 | #c6c6c6 | **the button border** (38 text / 4 border uses) |
| grey-d8 | #d8d8d8 | 1px hairline (2) |
| hairline-12 | rgba(0,0,0,.12) | 1px hairline (1) |
| scrim | rgba(0,0,0,.5) | full-section image scrim (5 section-sized overlays) |
| scrim-10 | rgba(0,0,0,.1) | light overlay (1) |
| focus-blue | #006dff | MUI theme primary override — input focus underline only |

Product-swatch value, not chrome: **`#27455c`** navy (10 zero-size swatch spans). No warm value anywhere in the census — the palette is neutral-to-cool throughout.

## 3. Typography Rules

**One family: aktiv-grotesk** (Adobe Fonts, licensed — 1885 of 1986 elements). No serif, no mono, no second display face. Preview substitutes **Inter** (one webfont link). Arial appears only in third-party widget chrome.

| Role | Size / line | L-h ratio | Weight | Tracking | Tracking % |
|---|---|---|---|---|---|
| Display (largest) | 50 / 60 | 1.20 | 500 | -2.5px | **-5%** |
| Hero h1 | 40 / 45.6 | 1.14 | 400 | -1.2px | -3% |
| Section head | 28 / 37.24 | 1.33 | 400 | -0.84px | -3% |
| Sub-head | 21.008 / 27.52 | 1.31 | 400 | -0.63px | -3% |
| Collection label (h2) | 21 / 35.91 | **1.71** | **700** | -0.14px | -0.7% |
| Lede | 18 / 26.37 | 1.47 | 400 | -0.36px | -2% |
| UI / nav | 14 / 23.94 | **1.71** | **300** | -0.14px | -1% |
| Body | 14 / 23.94 | 1.71 | 400 | -0.14px | -1% |
| Button label | 15 / — | — | 400 | -0.14px (contained) / normal (outlined) | -1% / 0 |
| Product name / price | 12 / 18 | 1.50 | 400 | -0.12px | -1% |
| Micro | 10 / 14 | 1.40 | 300 | -0.1px | -1% |

Two portable rules. First, **graded negative tracking**: every size is tighter than normal and it scales with size — -1% at 10–15px, -2% at 18px, -3% at 21–40px, **-5% at 50px**. Second, **inverted line-height**: small text is very airy at **1.71** and display compresses to **1.20**, the opposite of the usual convention. Weight 300 is the default UI weight (47 uses vs 37 at 400), which is what makes the chrome recede behind the photography.

## 4. Component Stylings

**Buttons** — two variants, both **60px tall and `border-radius: 0`**, both with `box-shadow: none` and `text-transform: none` (a deliberate override — MUI uppercases buttons by default).

| Variant | Rest | Hover |
|---|---|---|
| Contained (`mui-style-u7sbz0`) | `#ffffff` fill, `#333333` label, no border, padding 8px 22px, 15px/400, -0.14px | fill → **`#333333`** (a full inversion) |
| Outlined (`mui-style-14zwk9r`) | transparent, `#333333` label, **1px `#c6c6c6`** border, padding 7px 21px, 15px/400, tracking normal | fill → `rgba(51,51,51,.04)`, border → `#333333` |

Both transition `background-color, box-shadow, border-color, color` at **0.25s `cubic-bezier(0.4,0,0.2,1)`**. Text links hover to `text-decoration: underline`. Disabled inherits MUI's `rgba(0,0,0,.26)`.

**Inputs — underline only, no box.** MUI `variant="standard"`: transparent fill, `border-radius: 0`, no side or top borders, 40px tall (36px for search), 15px text, 8px 0 padding. The underline is a two-pseudo-element mechanic worth copying: `::before` is `border-bottom: 1px solid rgba(0,0,0,.42)` at rest transitioning `border-bottom-color 200ms cubic-bezier(.4,0,.2,1)`, thickening to `2px solid rgba(0,0,0,.87)` on `:hover:not(.Mui-disabled,.Mui-error)`; `::after` is `border-bottom: 2px solid #006dff` held at **`transform: scaleX(0)`** and grown to **`scaleX(1)`** on `.Mui-focused` over `200ms cubic-bezier(0,0,.2,1)`. So focus is a **blue rule that grows out from the centre**, and it is the only saturated colour on the page.

**Focus — partly suppressed.** One authored rule sets `outline: 0px` on a styled element, but MUI's `:focus-visible { outline: auto }` survives on both button variants, so keyboard focus is the browser default ring rather than a brand treatment. Recommended brand-consistent replacement: `outline: 2px solid #333333; outline-offset: 2px`.

**Cards / product tiles** — borderless, radius 0, an `#ededed` image plate at 333×417, name and price at 12/18, colourway swatches as small circles (`50%` is one of the few non-zero radii on the page).

## 5. Layout Principles

A **12-column percentage grid** (MUI Grid): the recurring `max-width` values are `22.2222%` (19 uses), `20%` (16), `33.3333%` (10) and `8.3333%` (8) — so 4.5-up, 5-up, 3-up and single-column tracks rather than fixed pixel containers. Almost everything else is `max-width: 100%`, and the hero and editorial bands run the full 1512px viewport. Spacing is a clean **8px scale**: gaps of 4, 8, 12, 16, 24 and 40px (16px dominant, 17 uses). Sections are tall — the 630px video hero, then 682px and 512px full-bleed bands — over a 6868px page.

## 6. Depth &amp; Elevation

The flattest system in this library. **Radius: `0px` on every button and input.** The entire non-zero radius census is incidental: 2px (19), 1px (10), 50% (7 — swatch circles), 20px (4), 10px (2), 3px (2), 2.5px (1), 50px (1).

Shadows are equally scarce — six recipes, **none on a primary control**: MUI's elevation stack `rgba(0,0,0,.2) 0 5px 5px -3px, rgba(0,0,0,.14) …` (3 uses), `rgba(0,0,0,.16) 0 2px 20px 0` (2), and four one-offs — `#999999 0 2px 10px -3px`, `#c7c5c7 -3px -3px 5px -2px`, `#c7c5c7 0 0 12px 2px`, `rgba(0,0,0,.5) 0 1px 4px 0`. Borders carry the structure instead: 2px `rgba(0,0,0,.87)` (5 — the hovered input underline), 1px `#c6c6c6` (4 — buttons), 1px `#ffffff` (4 — on imagery), 1px `#d8d8d8` (2), 1px `rgba(0,0,0,.12)` (1).

## 7. Motion

Entirely MUI's own timing; **nothing authored**. The only two `@keyframes` on the page are `mui-auto-fill` and `mui-auto-fill-cancel` — internal autofill detection, not animation. Easings are MUI's standard `cubic-bezier(0.4,0,0.2,1)` and decelerate `cubic-bezier(0,0,0.2,1)`.

| Transition | Uses |
|---|---|
| `fill .2s cubic-bezier(.4,0,.2,1)` (icons) | 47 |
| `border-bottom, transform .3s cubic-bezier(.4,0,.2,1)` (input underline) | 45 |
| `background-color, box-shadow, border-color, color .25s cubic-bezier(.4,0,.2,1)` (buttons) | 38 |
| `margin .1s ease-in-out` / `background-color .15s cubic-bezier(.4,0,.2,1)` | 16 / 12 |
| `box-shadow .3s` / `color, transform, max-width .2s cubic-bezier(0,0,.2,1)` | 10 / 10 |

**No JS motion library** — no GSAP, Lenis, Framer Motion, Lottie or AOS. **0 reduced-motion blocks** (a gap, given two autoplaying hero videos).

## 8. Backgrounds / Effects / WebGL

Video and photography only. **Two `<video>` elements** (a mobile and a desktop hero cut, each with a PNG fallback poster). And then nothing: **zero CSS gradients, zero `backdrop-filter`, zero grain layers, zero `<canvas>`, no WebGL, no Three.js**, and a single raster background layer. Depth and atmosphere come from full-bleed imagery under `rgba(0,0,0,.5)` scrims, plus the one `#e0f0ff` band.

## 9. Do's and Don'ts

### Do
- Set **`border-radius: 0`** on every button and input, and give controls **no shadow**.
- Run one grotesque for everything, and default the UI to **weight 300**.
- Use a **graded negative tracking scale** (-1% at 10–15px, -2% at 18px, -3% at 21–40px, -5% at 50px) and invert the line-height convention: **1.71 on small text**, 1.20 at display.
- Keep neutrals pure/cool and let **one pale sky blue `#e0f0ff`** be the only colour band.
- Build inputs as **underline-only**, with the focus rule growing from `scaleX(0)` to `scaleX(1)` over 200ms.
- Invert the contained button on hover (white → `#333333`) rather than tinting it, and override MUI's uppercase to `text-transform: none`.

### Don't
- Don't warm the neutrals — nothing on this site is warm.
- Don't add gradients, blur, grain or WebGL; there are none. Don't round the corners or add elevation to controls.
- Don't set body type heavy — 300/400 at 14px with 1.71 leading is the register.
- Don't rely on MUI's inherited `rgba(0,0,0,.87)`; author `#333333` instead.
- Don't ship the focus behaviour as-is (one rule sets `outline: 0`, the rest fall back to the browser ring), and don't autoplay two hero videos without a `prefers-reduced-motion` block — the site has none.

## 10. Responsive Behavior

**21 breakpoints.** MUI's default ladder (0 / 600 / 900 / 1200 / 1536px) sits under a dense device-specific overlay:

| Breakpoint | What changes |
|---|---|
| 0px | MUI `xs` base |
| 400 / 425 / 426 / 500 / 530 / 550 / 564px | phone patches |
| **600px** | MUI `sm` |
| 601 / 640 / 663.95 / 768 / 896px | large-phone → tablet |
| **900px** (+901px) | MUI `md` |
| **1200px** | MUI `lg` |
| **1536px** | MUI `xl` |

**`darkSchemeBlocks: 0`** — no dark theme, no toggle. **0 container queries.** **0 reduced-motion blocks.**

## 11. Agent Prompt Guide

- Canvas `#ffffff` · Blocks `#f8f8f8` / `#ededed` / `#e9e9e9` · One band `#e0f0ff` sky · Ink `#333333` · Muted `#727272` / `#696969` · Button border `#c6c6c6` · Scrim `rgba(0,0,0,.5)`
- Font: **aktiv-grotesk** only (sub: Inter) · UI **14/23.94 weight 300** · Display **50/60 weight 500 at -5% tracking** · Graded tracking -1% → -5% · Line-height 1.71 small → 1.20 display
- **Radius `0` everywhere, no shadows on controls** · Buttons 60px tall, contained `#fff`→hover `#333`, outlined 1px `#c6c6c6`→hover `rgba(51,51,51,.04)`
- Inputs **underline only**: `::before` 1px rgba(0,0,0,.42) → hover 2px rgba(0,0,0,.87); `::after` 2px `#006dff` `scaleX(0)` → `scaleX(1)` 200ms · Focus: add `outline: 2px solid #333` — the site falls back to the browser ring
- Motion: MUI standard `cubic-bezier(.4,0,.2,1)` 0.15–0.3s, **no authored keyframes** · No gradients, blur, grain or WebGL

<vuori_design_language>
Editorial, roomy and deliberately undecorated — a lookbook rather than an
interface. Canvas is #ffffff with cool grey blocks (#f8f8f8, #ededed, #e9e9e9,
#f4f4f4) and NOTHING warm anywhere; the single colour moment is a pale sky blue
#e0f0ff carrying two full-bleed editorial bands, and everything else is #333333 ink
over photography and autoplaying video under rgba(0,0,0,.5) scrims. This is the
FLATTEST system in the library: border-radius 0 on every button and input, no
shadow on any primary control, and zero CSS gradients, zero backdrop-filter, zero
grain, zero canvas or WebGL. One grotesque does everything (aktiv-grotesk, 1885 of
1986 elements) and it leans LIGHT — weight 300 is the default UI weight, 400 for
body, 500 only at display. Two typographic rules carry the whole feeling: a GRADED
NEGATIVE TRACKING scale that tightens as size grows (-1% at 10-15px, -2% at 18px,
-3% at 21-40px, -5% at the 50/60 display) and an INVERTED line-height convention,
airy 1.71 on small text compressing to 1.20 at display. Buttons are 60px tall,
square, shadowless, text-transform none, in two variants: contained #ffffff with
#333333 label that INVERTS to a #333333 fill on hover, and outlined with a 1px
#c6c6c6 border that tints to rgba(51,51,51,.04) with a #333333 border. Inputs are
UNDERLINE ONLY — a ::before at 1px rgba(0,0,0,.42) thickening to 2px rgba(0,0,0,.87)
on hover, and a ::after 2px #006dff rule held at scaleX(0) that grows to scaleX(1)
over 200ms cubic-bezier(0,0,.2,1) on focus, the only saturated colour on the page.
Layout is a 12-column percentage grid (22.2222% / 20% / 33.3333% / 8.3333% tracks)
on an 8px spacing scale with 16px the dominant gap, over very tall full-bleed
sections. Motion is MUI's standard cubic-bezier(.4,0,.2,1) at 0.15-0.3s with NO
authored keyframes and no JS motion library. Feels: editorial, airy, coastal,
undecorated, premium-plain. Avoid: warming the neutrals, gradients, blur, grain or
WebGL, rounded or elevated controls, heavy body type, and shipping the focus
behaviour as-is (one rule sets outline: 0 and the rest fall back to the browser
ring) or two autoplaying videos with no prefers-reduced-motion block.
</vuori_design_language>