---
version: alpha
name: "Vitra"
description: "Museum-grade achromatic editorial — warm cream canvas, proprietary Futura at weight 400, zero border-radius, and furniture photography as the only decoration"

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f5f5f5"
  surface-warm: "#f0ede8"    # warm off-white used in editorial panels /* estimated — site's warm section tone */

  # Text / ink
  ink: "#333333"              # primary text — warm dark charcoal, not pure black
  ink-dark: "#101010"         # near-black used on filled buttons and high-contrast headings
  ink-muted: "#767676"        # secondary text, meta labels
  on-background: "#333333"
  on-surface: "#333333"

  # Brand accent — Vitra is achromatic; hover/CTA red from link hover data
  primary: "#333333"          # no chromatic brand accent; filled button uses charcoal
  on-primary: "#ffffff"
  primary-hover: "#101010"    # button hover darkens to near-black

  # Interaction states
  text-hover: "#d43e42"       # link hover — from extracted data (rgb(212, 62, 66))
  focus-ring: "#333333"

  # Semantic
  error: "#d43e42"            # red also serves as error indicator

  # Borders
  border: "#333333"           # bottom-border rule on nav/lists (1px solid)
  border-muted: "#cccccc"     # lighter divider for subtle structural lines

  # Shadow tints
  shadow-soft: "#000000"      # rgba(0,0,0,0.16) flattened to opaque tint reference /* was rgba(0,0,0,0.16) — Google format requires hex */

  # Gradient overlay used on hero images
  scrim-dark: "#000000"       # linear-gradient start rgba(0,0,0,0.33) flattened /* was rgba(0,0,0,0.33) — Google format requires hex */

typography:
  display-hero:
    fontFamily: "vitraFuturaV2, Futura, Arial, sans-serif"
    fontSize: 50px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  display:
    fontFamily: "vitraFuturaV2, Futura, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
  heading-section:
    fontFamily: "vitraFuturaV2, Futura, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  heading-sub:
    fontFamily: "vitraFutura, Futura, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.47
    letterSpacing: 0px
  body-large:
    fontFamily: "vitraFuturaV2, Futura, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "vitraFuturaV2, Futura, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.9
    letterSpacing: 0px
  nav-link:
    fontFamily: "vitraFutura, Futura, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 500
    lineHeight: 1.9
    letterSpacing: 0px
  button-ui:
    fontFamily: "vitraFutura, Futura, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 2.1px
  label-caps:
    fontFamily: "vitraFutura, Futura, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 2.31
    letterSpacing: 2.1px
  caption:
    fontFamily: "vitraFutura, Futura, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 2.48
    letterSpacing: 0px
  caption-tracked:
    fontFamily: "vitraFutura, Futura, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 2.48
    letterSpacing: 1px

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

rounded:
  none: 0px

components:
  button-primary:
    backgroundColor: "{colors.ink-dark}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 9px 21px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 9px 21px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 9px 21px
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 9px 21px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
  card-elevated:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 16px
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 10px
  nav-item:
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
  nav-item-hover:
    textColor: "{colors.text-hover}"
    typography: "{typography.nav-link}"
---

# Vitra Design System

## Overview

Vitra's website is the digital extension of the company's curatorial identity — a gallery wall rather than a shop floor. The canvas is a luminous white (`{colors.background}`) that reads more like museum-quality paper stock than browser default, warmed by occasional sections in a quiet off-white (`{colors.surface-warm}`) that recalls the linen walls of Vitra's Weil am Rhein campus. Against this background, architectural furniture photography does all the decorative work: a Panton Chair in silhouette, an Eames lounge in three-quarter view, still-life arrangements that belong in Architectural Digest. The site's governing principle is that the objects themselves are the spectacle; the interface exists only to frame them.

The proprietary `vitraFuturaV2` typeface is geometric and precise — a calibrated digitization of Paul Renner's 1927 Futura — rendered exclusively at weight 400 for all display and body text. The 50px hero headline sits at line-height 1.0, producing a tightly stacked mass of geometry that channels the Bauhaus without quoting it. Navigation and button labels shift to the slightly heavier `vitraFutura` at weights 500–600 with `{typography.label-caps}` letter-spacing of 2.1px in uppercase — a tension between the reading voice (regular, geometric, spacious) and the action voice (compact, tracked, emphatic). This is a Modernist typographic split: the editorial voice is warm and open, the functional voice is spare and commanding.

The chromatic palette is almost entirely achromatic. `{colors.ink}` — a warm charcoal `#333333` rather than pure black — carries the entire weight of primary interaction. The only color in the extracted palette is `{colors.text-hover}` (`#d43e42`), a muted brick-red that appears exclusively on link hover states. There are no primary CTA buttons in a brand color, no accent chips, no semantic success-green. Buttons are charcoal-filled squares with zero border-radius, uppercase tracked labels, and a hover that simply darkens to `{colors.ink-dark}`. Depth is communicated by a single subtle shadow token (`box-shadow: rgba(0,0,0,0.16) 0px 10px 30px 0px`) used sparingly on elevated card surfaces, and a gradient scrim on photography overlays. The result is a system that reads as simultaneously Swiss and Japanese — rigorous, unfussy, entirely subordinate to the work it presents.

**Key Characteristics:**
- Proprietary `vitraFuturaV2` at weight 400 for all display and body text — geometric restraint as editorial voice
- Zero border-radius across the entire system — every container, button, and card is a hard rectangle
- Achromatic palette: warm charcoal `{colors.ink}`, near-black `{colors.ink-dark}`, white, two grey surfaces
- The only chromatic color is `{colors.text-hover}` (`#d43e42`) — muted brick-red on link hover states only
- `{typography.button-ui}` uses 2.1px letter-spacing in uppercase — distinct functional voice against the editorial body
- Full-bleed furniture photography as the primary visual differentiator, not surface decoration
- Bottom-border rule (`1px solid {colors.border}`) as the structural vocabulary — no box decorations, only edge lines
- Gradient scrim (`rgba(0,0,0,0.33)` → transparent) over photography for text legibility without masking the object
- Card elevation via `rgba(0,0,0,0.16) 0px 10px 30px` — used sparingly, never as default surface treatment
- Motion: 0.5s `cubic-bezier(0.17, 0.16, 0, 0.6)` ease-out for card transitions; 0.2s ease for link color
- 8px spacing base with generous section-level rhythm (80–120px between major editorial blocks)
- Breakpoints at 768 / 769 / 820 / 1023 / 1024 / 1200px — fine-grained responsive precision

## Colors

### Primary Surfaces
- **Pure White** (`{colors.background}`): The default canvas — product photography, article bodies, product sheets. Never warm-tinted, always optically clean.
- **Light Grey** (`{colors.surface}`): Alternate section background for secondary content, filter panels, footer columns.
- **Warm Off-White** (`{colors.surface-warm}`): Editorial panels and campaign moments where the canvas needs warmth without surface noise. Recalls the linen tones of Vitra's physical spaces.

### Text & Ink
- **Warm Charcoal** (`{colors.ink}`): Primary text, nav labels, all body copy. Warm dark grey `#333333` — softer than pure black, closer to printed ink on coated paper.
- **Near-Black** (`{colors.ink-dark}`): CTA button fills, high-contrast headline moments. The deepest functional tone.
- **Mid Grey** (`{colors.ink-muted}`): Secondary text, metadata, captions, price hints.

### Brand Accent
- **Brick Red on Hover** (`{colors.text-hover}`): The single chromatic note — a muted terracotta-red that appears only when the cursor activates a link. Not a brand color in the promotional sense; more like a subtle acknowledgment of contact. Applied consistently across all link hover states (white links, dark links, grey links) on the extracted site.

### Borders & Dividers
- **Solid Rule** (`{colors.border}`): The primary structural element — `1px solid #333333` bottom borders under navigation items, list separators, active tab indicators.
- **Muted Rule** (`{colors.border-muted}`): Lighter hairline for secondary structural lines, inactive states.

### Shadow & Overlay
- **Card Shadow** (`{colors.shadow-soft}`): Basis for `rgba(0,0,0,0.16)` elevation shadow on raised card surfaces. Applied at `0px 10px 30px` spread.
- **Photography Scrim** (`{colors.scrim-dark}`): Basis for the `linear-gradient(0deg, rgba(0,0,0,0.33), rgba(0,0,0,0))` overlay used on editorial hero images to ensure text legibility at the bottom of photographic panels.

## Typography

### Font Family
- **Primary Display**: `vitraFuturaV2`, fallbacks: `Futura, Arial, sans-serif`
- **Primary UI**: `vitraFutura`, fallbacks: `Futura, Arial, sans-serif`
- **Loading source**: Self-hosted WOFF2 files — `vfutura-light.woff2`, `vfutura-regular.woff2`, `vfutura-medium.woff2`, `vfutura-heavy.woff2`. No Google Fonts, no Adobe Fonts, no variable fonts.
- **OpenType features**: The `{typography.button-ui}` and `{typography.label-caps}` styles apply `letter-spacing: 2.1px` with `text-transform: uppercase` — the only tracked uppercase in the system. Standard body and display tokens use normal letter-spacing.

*Note: `vitraFuturaV2` is a proprietary digitization of Futura. For external implementations, Futura PT, Futura Now, or Jost (Google Fonts, geometric, free) are the closest structural equivalents. Avoid humanist grotesks (Inter, Gill Sans) — the Vitra voice requires geometric apertures.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Full-viewport hero statements — 50px / 400 / lh 1.0 |
| `display` | Section openers, campaign headlines — 40px / 400 / lh 1.1 |
| `heading-section` | Large sub-headings, product family names — 22px / 400 / lh 1.5 |
| `heading-sub` | Card titles, feature callouts — 22px / 600 / lh 1.47 |
| `body-large` | Lead paragraphs, feature descriptions — 20px / 400 / lh 1.5 |
| `body` | Standard reading copy — 17px / 400 / lh 1.9 |
| `nav-link` | Navigation links, inline links — 17px / 500 / lh 1.9 |
| `button-ui` | CTA labels, form actions — 14px / 600 / 2.1px tracking / uppercase |
| `label-caps` | Section eyebrows, category labels — 14px / 600 / 2.1px tracking / lh 2.31 |
| `caption` | Product metadata, footnotes — 13px / 500 / lh 2.48 |
| `caption-tracked` | Tracked micro-labels, catalog codes — 13px / 500 / 1px tracking |

### Principles
- Weight 400 is the display voice — `vitraFuturaV2` at regular weight carries every headline. Bold is not a Vitra register.
- The editorial/functional split: reading text uses `vitraFuturaV2` at 400; action text (buttons, labels, caps) uses `vitraFutura` at 500–600 with uppercase tracking.
- The 1.9 line-height at body (`{typography.body}`) is generous for a 17px font — producing a stately, unhurried reading pace appropriate for design-culture content.
- The 2.1px letter-spacing on `{typography.button-ui}` is the system's single expressive type treatment — it marks the boundary between editorial and transactional.
- Line-height 1.0 at display-hero creates typographic mass: words sit as geometric blocks, not floating phrases.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

Vitra's spacing personality is generous at the macro level and exacting at the micro level. Section-to-section vertical rhythm runs 80–120px; within components, the 8–16px increments are precise. The site breathes like a gallery — ample space around objects, nothing cluttered.

### Grid & Container
- Max content width: approximately 1200px (matches the widest breakpoint), centered
- Hero: full-bleed viewport photography with gradient scrim at bottom; headline overlay
- Product / collection grid: 3–4 column on desktop, with 32px gutters
- Editorial sections: 2-column (image + text) or full-width depending on campaign weight
- Footer: multi-column grid collapsing to stacked on mobile

### Whitespace Philosophy
- **Gallery negative space**: Whitespace in Vitra's system is not padding — it is the air around museum objects. Every component has more breathing room than a standard retail site.
- **Photography is the layout**: The grid exists to position photography, not to fill the viewport with content. Sections often contain a single large image with minimal surrounding text.
- **Tight chrome, generous canvas**: Navigation elements and button padding are compact (`{spacing.sm}` internal); section-level spacing is expansive (`{spacing.5xl}` between major editorial beats).

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default for all surfaces — navigation, cards, page background |
| Subtle Scrim | `linear-gradient(0deg, rgba(0,0,0,0.33), rgba(0,0,0,0))` | Overlay on editorial photography to ensure text legibility |
| Card (Level 2) | `rgba(0,0,0,0.16) 0px 10px 30px 0px` | Elevated product cards, modal overlays |
| Bottom Rule | `0px 0px 1px solid {colors.border}` | Navigation items, list separators, tab active indicators |
| Focus Ring | `border: 1px solid {colors.focus-ring}` | Focused interactive elements — keyboard accessibility |

**Shadow Philosophy**: Vitra's shadow system is minimal by design. The dominant "depth" mechanism is the bottom-border rule — a `1px solid #333333` line that appears under navigation items and list elements. The single box-shadow token (`rgba(0,0,0,0.16) 0px 10px 30px`) appears only twice in the production site. The gradient photography scrim is the most visible depth tool, but it serves legibility rather than decorative elevation. This shadow restraint is consistent with the brand's material culture: Vitra's chairs sit on floors, not on plinths.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Every component in the system — buttons, cards, inputs, badges, modals |

Vitra's shape language is absolutely binary: every surface is a hard rectangle. There are no rounded corners anywhere on the extracted site — zero. Buttons are rectangular, product cards are rectangular, cookie modals are rectangular. This is not an omission; it is the typographic discipline of the Bauhaus applied to screen components. The right angle is the only angle. Any introduction of border-radius would constitute a fundamental misread of the system.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing them.

### Button variants

- **`button-primary`** — Charcoal-filled rectangle (`{colors.ink-dark}` background), white text, uppercase tracked label (`{typography.button-ui}`), zero radius. The CTA button is a stamp, not a badge. Used for primary purchase and navigation actions.
- **`button-primary-hover`** — Deepens to near-black (`{colors.primary-hover}`). Minimal state change; the form doesn't animate, just darkens.
- **`button-secondary`** — White background with charcoal border (`{colors.border}`), charcoal text. The outlined ghost variant for secondary actions on light surfaces.
- **`button-secondary-hover`** — Inverts: charcoal fill, white text. The hover inversion is the most decisive visual move in the system.

### Cards

- **`card`** — Pure white on white, no border, no shadow at rest, zero radius. Product photography provides all visual delineation. Cards are invisible containers for objects.
- **`card-elevated`** — Adds `rgba(0,0,0,0.16) 0px 10px 30px 0px` shadow for raised contexts (drawers, overlays, promotional spotlights).

### Inputs

- **`input`** — White background, charcoal bottom border only (`1px solid {colors.border}` on the bottom edge — not a full box border), zero radius, `{typography.body}` at 17px.
- **`input-focus`** — Border darkens to `{colors.focus-ring}`, no glow, no shadow.

### Badges / Tags

- **`badge`** — Light grey (`{colors.surface}`) background, charcoal text, zero radius. Used for product category labels and metadata chips. `{typography.caption}` at 13px.

### Navigation

- Top bar: white or transparent-over-photography, fixed, zero chrome. Vitra wordmark left-aligned.
- Links: `{typography.nav-link}` — vitraFutura 17px weight 500; hover shifts to `{colors.text-hover}` (`#d43e42`) via `0.2s ease` transition.
- Active indicator: `1px solid {colors.border}` bottom border.
- No hamburger icon styling extracted — hamburger transition inferred from breakpoints at 768–1024px.

## Do's and Don'ts

### Do
- Use `vitraFuturaV2` weight 400 for all display and body text — the regular weight carries the editorial authority
- Apply `{rounded.none}` to every component — zero border-radius is non-negotiable
- Use `{colors.ink}` (`#333333`) as primary text — never pure `#000000` for body reading; the warmth matters
- Reserve `{colors.text-hover}` (`#d43e42`) exclusively for link hover states — it is the only chromatic accent
- Apply `{typography.button-ui}` uppercase with 2.1px tracking to all CTA labels — this is the functional-voice marker
- Use `1px solid {colors.border}` bottom-border rules for structural dividers — not full box borders
- Let full-bleed photography carry the visual weight of each section — the interface is only the frame
- Apply the gradient scrim (`rgba(0,0,0,0.33)` → transparent) over editorial photography when placing text overlays
- Maintain generous section spacing (80–120px) — the gallery pace is part of the brand identity
- Use `{typography.label-caps}` with uppercase transform for category eyebrows and section labels

### Don't
- Don't add border-radius to any component — even `2px` breaks the system's geometric discipline
- Don't introduce a brand accent color into button fills or hero backgrounds — Vitra's palette is intentionally achromatic
- Don't use `{colors.text-hover}` (`#d43e42`) for buttons, badges, or decorative accents — it belongs only on link hover
- Don't use weight 700 (`vfutura-heavy.woff2`) for display text — the heavy weight exists but is not the editorial register
- Don't apply box borders to cards — product photography provides visual separation; box borders create prison bars around objects
- Don't reduce section spacing below 48px between major editorial blocks — density is antithetical to the gallery aesthetic
- Don't introduce gradient surface fills or tinted backgrounds beyond `{colors.surface-warm}` — solid tonal surfaces only
- Don't use mixed-case or sentence-case button labels — uppercase tracking is the functional-voice contract

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <768px | Single-column, compact nav, stacked editorial sections |
| Mobile L | 768–769px | Two-column grids begin; nav transitions |
| Tablet | 769–820px | Wider two-column; editorial photography expands |
| Tablet L | 820–1023px | Near-desktop layout; 3-column product grids |
| Desktop | 1023–1200px | Full horizontal nav; 3–4 column grids; editorial 2-up |
| Large Desktop | ≥1200px | Maximum container width; maximum section spacing |

*Vitra has six tracked breakpoints — notably they use adjacent 768/769px and 1023/1024px pairs, suggesting precise layout transitions at those thresholds rather than coarse three-stop responsive design.*

### Touch Targets
- Buttons: `9px` vertical padding × 2 + `14px` font height ≈ 32px minimum; likely supplemented by CSS min-height
- Navigation links: `17px` at `1.9` line-height provides approximately 40px effective tap height
- Product cards: large touch targets by virtue of card scale — entire card is typically tappable

### Collapsing Strategy
- **Navigation**: Horizontal link row collapses to hamburger drawer below 1024px; wordmark persists; icon cluster (search, wishlist, cart) stays visible
- **Hero**: Full-bleed photography maintained at all widths; headline scale reduces from 50px → 40px → 22px through breakpoints
- **Product grids**: 4-column → 3-column → 2-column → single-column
- **Editorial 2-column**: Image + text stack vertically on mobile; image always leads
- **Spacing**: Section vertical padding scales from 120px → 80px → 48px across breakpoints

### Image Behavior
- Hero photography: full-bleed at all widths via `object-fit: cover`
- Product photography: contained within grid cells, no edge bleed
- Gradient scrims: maintained at all breakpoints wherever photography underlies text
- No art direction breakpoints detected — single image serves all viewports

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Near-black CTA: `{colors.ink-dark}`
- Secondary text: `{colors.ink-muted}`
- Link hover: `{colors.text-hover}`
- Border/rule: `{colors.border}`
- Surface alt: `{colors.surface}`
- Button text: `{colors.on-primary}`

### Example Component Prompts

- "Create a Vitra-style hero section: full-bleed furniture photograph covering the entire viewport with a `linear-gradient(0deg, rgba(0,0,0,0.33), rgba(0,0,0,0))` scrim from bottom to mid-frame. In the lower-left, a headline in `vitraFuturaV2` (fallback: Futura, Arial) 50px weight 400, line-height 1.0, color `#ffffff`. Below it, a primary button: background `#101010`, white text, `vitraFutura` 14px weight 600, uppercase, `2.1px` letter-spacing, padding `9px 21px`, `0` border-radius, no box-shadow."

- "Design a Vitra product card: white (`#ffffff`) background, `0` border-radius, no box-shadow, no border. Square product photograph at top fills the card. Below: category label in `vitraFutura` 13px weight 600, uppercase, `2.1px` letter-spacing, color `#767676`. Product name in `vitraFuturaV2` 22px weight 400, line-height 1.5, color `#333333`. Short description in 17px weight 400, line-height 1.9, color `#767676`. On hover, add `box-shadow: rgba(0,0,0,0.16) 0px 10px 30px 0px`."

- "Build a Vitra navigation bar: white background, full-width. Left: Vitra wordmark SVG. Center: horizontal navigation links — `vitraFutura` 17px weight 500, color `#333333`, no decoration; hover → color `#d43e42` via `0.2s ease`. Active item: `1px solid #333333` bottom border. Right: search, wishlist, cart icons. Height approximately 56px."

- "Create a Vitra-style editorial section: white background, `120px` vertical padding. Left column (60%): eyebrow label in `vitraFutura` 14px weight 600, uppercase, `2.1px` letter-spacing, color `#767676`. Below, display heading in `vitraFuturaV2` 40px weight 400, line-height 1.1, color `#333333`. Body paragraph in 17px weight 400, line-height 1.9, color `#333333`. A primary button: `#101010` background, white text, `vitraFutura` 14px weight 600 uppercase tracked, `9px 21px` padding, `0` radius. Right column (40%): full-height product photograph, no border."

- "Design a Vitra form input: white background, no full border — only a `1px solid #333333` bottom border. `vitraFuturaV2` 17px weight 400, color `#333333`, line-height 1.9, padding `10px 0`. Placeholder in `#767676`. On focus: bottom border stays `#333333`, no glow, no radius, no box-shadow. Submit button: `#101010` fill, white text, `vitraFutura` 14px weight 600 uppercase `2.1px` tracking, `9px 21px` padding, `0` radius."

- "Create a Vitra-style product collection section: `{colors.surface-warm}` (#f0ede8) background, `80px` vertical padding. Section heading: `vitraFutura` 14px weight 600 uppercase `2.1px` tracking color `#767676` as eyebrow. Below: `vitraFuturaV2` 22px weight 400 line-height 1.5 in `#333333` as subtitle. 3-column product grid with `32px` gutters. Each card: no border, no shadow, no radius. Card hover: `box-shadow: rgba(0,0,0,0.16) 0px 10px 30px 0px` via `0.5s cubic-bezier(0.17, 0.16, 0, 0.6)`."

### Iteration Guide

1. Start with a pure white canvas — `{colors.background}`. Introduce `{colors.surface-warm}` only for full-width editorial sections that need warmth.
2. Every component is a hard rectangle — `border-radius: 0` on all elements, no exceptions.
3. Typography is achromatic: `{colors.ink}` (`#333333`) for all text, `{colors.ink-muted}` (`#767676`) for secondary. The type palette has no colorful notes.
4. Reserve `{colors.text-hover}` (`#d43e42`) for link hover transitions only — `0.2s ease` — never for static elements.
5. Button labels use `{typography.button-ui}`: uppercase, `2.1px` letter-spacing, vitraFutura weight 600. This is the only uppercase in the system.
6. Depth is a bottom border (`1px solid {colors.border}`) for structural lines and `rgba(0,0,0,0.16) 0px 10px 30px` for elevated surfaces. No other shadow tokens.
7. Photography is the page decoration — design the grid to hold objects, not to fill space with color or pattern.

---

## 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 Vitra. Brand names and trademarks belong to their respective owners.