Editorial, roomy and deliberately undecorated — a printed lookbook rather than an interface, and notably COOL rather than the warm coastal palette the brand suggests. The canvas is #ffffff with pure grey blocks (#f8f8f8, #ededed, #e9e9e9) and nothing warm anywhere; the single colour moment is a pale sky blue #e0f0ff carrying two full-bleed editorial bands, with #333333 ink over photography and 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 and zero WebGL — the only two keyframes on the page are Material UI internals, so there is no authored animation at all. One grotesque does everything (aktiv-grotesk) and it leans LIGHT, with weight 300 as the default UI weight, which is what lets the chrome recede behind the imagery. Two typographic rules carry the feeling and travel well: 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, the opposite of the usual approach. Buttons are 60px, square and shadowless with MUI uppercase deliberately turned off, and the contained variant INVERTS on hover (#ffffff to #333333) rather than tinting. Inputs are underline only, with a 2px #006dff rule held at scaleX(0) that grows to scaleX(1) over 200ms — the only saturated colour on the page.
Browse Vuori in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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 carriesMuiBox-root mui-style-<hash>, styles are Emotion-injected, and there are zero:rootcustom 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) andrgba(0,0,0,.54)are MUI defaults (text.primary/text.secondary), not authored values, while#006dffon the input focus underline is an override (MUI's default primary is#1976d2) and so is brand. Excluded as third-party: the greens#346e4a/#468254and#f9fffaare the OneTrust cookie banner, not Vuori colours; also Klarna, Swiper and accessibility-widget chrome. Recorded rather than promoted:#27455cnavy 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#e0f0ffon 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 (onlymsapplication-TileImage), so the thumb is the hero video's fallback poster.
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.
| 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.
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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds / Effects / WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.