# Vitra · Design system migration spec

> Source: https://www.vitra.com  ·  Curated by OpenDesign  ·  en

> A benchmark for high-end product sites that use restraint and photography to convey brand value.

## 1. Identity DNA

Vitra's design system functions like the construction of a premium architectural catalog, where every element is precisely measured to serve the whole. A strict monochrome palette and geometric typography provide the framework, while high-contrast photography supplies the texture and narrative depth. The result is a visual language of restrained minimalism that lets product design speak with clarity.

**One-liner:** Premium modern furniture brand showcasing high-end design through cinematic imagery and restrained minimalism.
**Keywords:** design furniture · modern office · sustainable · high-end · architectural
**Analogy:** A premium architectural catalog brought to the web, blending product showcase with editorial storytelling.

## 2. Color

The color system is defined by absolute restraint, employing a strict monochrome palette of black, white, and graduated grays. This absence of hue places the full visual weight on photography, making each product image the sole source of chromatic interest.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F7F7F7` | card background |
| `--bg-quiet` | `#E6E6E6` | quiet area |
| `--ink` | `#101010` | body text |
| `--ink-soft` | `#333333` | secondary text |
| `--muted` | `#767676` | placeholder |
| `--line` | `rgba(204,204,204,1.0)` | divider |

**Color principle:** Strict monochrome palette relying on high-contrast photography for visual interest.

The governing principle is to let imagery provide all visual richness, using color only as a neutral, structural element for typography and interface.

## 3. Typography

Typography employs a single geometric sans-serif category, used at a consistent medium weight (500) for all primary text. This creates a uniform, authoritative voice where hierarchy is established through scale and spacing rather than weight variation.

- **Display:** geometric-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1px | Hero product names |
| headline | 40px | 1.1 | 500 | 0px | Section titles |
| body | 17px | 1.9 | 500 | 0px | Navigation and primary text |
| small | 15px | 1.8 | 500 | 2px | Secondary descriptions |
| micro | 13px | 1.8 | 500 | 1px | Metadata and labels |

**Type rules:**
- Use geometric sans-serif throughout
- Maintain a weight of 500 for primary text
- Uppercase tracking for small labels
- Left-aligned paragraphs with generous line-height

## 4. Spacing

Spacing follows an 8px base unit, creating a consistent rhythm that scales up to generous section intervals of 64px to 96px. This vertical breathing room is essential to the system's editorial pacing.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px base unit with generous 64px-96px section spacing.

## 5. Surfaces

Surfaces are defined by flat planes and thin, 1px solid borders in light gray for subtle separation. The design deliberately avoids drop shadows, relying on the inherent depth of photography and the contrast of elements against backgrounds.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Thin 1px solid borders in light gray for subtle separation, no drop shadows.

## 6. Layout

The layout skeleton is built on full-bleed hero sections that present cinematic photography with centered text overlays. Below, content organizes into tight, symmetric two-column product grids, establishing a clear visual rhythm from expansive introduction to detailed examination.

- **Container max:** 1440px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-bleed hero images with centered text, followed by tight two-column product grids.

## 7. Motion & Interaction

Motion is philosophy of subtle enhancement, using slow, smooth cubic-bezier transitions (0.5s) for all state changes. The patterns are simple: text fades in, and interactive elements shift color linearly, avoiding any animation that distracts from the content.

- **Durations:** micro 150ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.17, 0.16, 0, 0.6)`
- **Patterns:**
  - Smooth fade-ins for text overlays
  - Linear color transitions on interactive elements

- **Hover:** Subtle color shifts to muted gray for text and icons.
- **Click:** Immediate response with minimal micro-interactions.
- **Transition:** All elements use 0.5s cubic-bezier transition for smooth state changes.
- **Keyboard:** Standard focus outlines on interactive elements.

## 8. Voice & Don'ts

The editorial voice is authoritative and visionary, using short, impactful headlines and direct calls to action. This tone matches the visual restraint, avoiding casual language, emoji, and any clutter that would dilute the premium, architectural narrative.

- **Tone:** Authoritative, refined, and visionary.
- **Headline style:** Short, impactful product names or conceptual questions.
- **CTA style:** Direct and action-oriented, such as 'Discover now' or 'More details'.
- **Avoid:** Avoid casual language or emojis / Avoid cluttering the visual hierarchy with too much text / Avoid using bright, saturated accent colors

### Don'ts
- ❌ Don't use drop shadows — screenshot shows flat design relying on photography depth.
- ❌ Don't use rounded corners on buttons or cards — screenshot shows sharp, square edges.
- ❌ Don't use bright accent colors — screenshot shows a strict monochrome palette.
- ❌ Don't use bold font weights for body text — screenshot shows medium weight (500) for all text.
- ❌ Don't use dense text blocks — screenshot shows generous line-height and paragraph spacing.
- ❌ Don't use decorative borders — screenshot shows only thin, functional 1px lines.

The system deliberately forgoes bright accent colors, rounded corners, and decorative shadows, using restraint as its primary tool for communicating sophistication.

## System Prompt (paste into AI tool)

```
Vitra's visual system is a premium, editorial-driven furniture showcase. It uses a strict monochrome palette centered on white (#FFFFFF), near-black ink (#101010), and soft grays (#F7F7F7, #333333, #767676). Typography is a clean geometric sans-serif used consistently at a medium weight (500) with generous line-heights and letter-spacing for labels. The layout is defined by full-bleed, cinematic photography and minimal, sharp-edged UI components. Critical constraints: never use drop shadows, never use bright accent colors, and never use rounded corners on UI elements like buttons or cards.
```
