# Vitsœ · Design system migration spec

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

> A perfect example of 'less, but better' design, demonstrating how high contrast and generous white space can elevate a product catalog.

## 1. Identity DNA

The Vitsœ design system is a digital expression of Dieter Rams' principle of 'less, but better.' It operates as a curated, gallery-like product catalog, where timeless restraint is the primary material.

**One-liner:** A heritage furniture brand website built on Dieter Rams' principles of modular design and functional minimalism.
**Keywords:** Dieter Rams · Modular furniture · Minimalism · Longevity · Functional
**Analogy:** A curated, gallery-like product catalog with timeless restraint.

## 2. Color

The palette is deliberately monochromatic, built from a foundation of black, white, and mid-gray. A single functional blue accent is reserved solely for interactive elements, marking them with precise utility.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-quiet` | `#F0F0F0` | quiet area |
| `--ink` | `#000000` | body text |
| `--muted` | `#696969` | placeholder |
| `--accent` | `#0073B1` | single accent |
| `--line` | `rgba(194, 194, 194, 1)` | divider |

**Color principle:** Monochromatic with a single functional blue accent for interactivity.

This strict color discipline ensures the focus remains on product photography and functional clarity.

## 3. Typography

All typographic needs are met by a single typeface, Linotype Univers W01. The hierarchy is expressed through weight—heavy for display and light for body—maintaining a clean, geometric voice throughout.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 40px | 1.1 | 700 | -0.5px | Main product headlines |
| heading | 32px | 1.2 | 700 | -0.25px | Section headers |
| body | 16px | 1.5 | 400 | 0px | Main descriptive text |

**Type rules:**
- Use Linotype Univers W01 for all text layers.
- Maintain a strict typographic hierarchy with heavy weights for display and light for body.
- Keep letter spacing tight for large display sizes.

## 4. Spacing

A generous vertical rhythm governs the interface, built on consistent 32px and 64px increments to create clear, unhurried section separation.

- **Base unit:** 8px
- **Scale:** 8 / 16 / 24 / 32 / 48 / 64 / 96 / 128 px
- **Rhythm:** Generous vertical rhythm driven by 32px and 64px increments for clear section separation.

## 5. Surfaces

Depth is conveyed through contrast, not decoration. Surfaces are defined by thin, high-contrast borders or subtle gray dividers, rejecting ornamental shadows.

- **Radius:** sm 2px · md 3px · lg 0px · pill 999px
- **Borders:** Thin, high-contrast borders (1px) or subtle gray dividers (1px solid #C2C2C2).

## 6. Layout

The layout is founded on a 12-column grid, structured to alternate between full-width product showcases and tighter, split-column informational sections. This framework prioritizes large-format imagery and unambiguous content blocks.

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

**Skeleton:** Grid-based layout with 12 columns, featuring alternating full-width and split-column sections.

## 7. Motion & Interaction

Motion is used with functional restraint, limited to smooth fades for content reveals and simple linear transitions for interactive state changes. The philosophy is to inform the user of a change in state without becoming an event itself.

- **Durations:** micro 200ms · small 300ms · medium 600ms
- **Easing:** `cubic-bezier(0.19, 1.12, 0.26, 0.97)`
- **Patterns:**
  - Smooth fade-in for content reveals.
  - Simple linear transitions for interactive states.

- **Hover:** Subtle opacity change on interactive text elements.
- **Click:** Direct navigation via text links and buttons.
- **Transition:** Opacity transitions at 0.2s to 0.3s for smooth state changes.
- **Keyboard:** Standard tab-based navigation across all interactive elements.

## 8. Voice & Don'ts

The editorial voice is authoritative, understated, and highly functional, mirroring the directness of the products themselves. Headlines are declarative product names, and calls to action are subtle text links, avoiding any aggressive or emotive language.

- **Tone:** Authoritative, understated, and highly functional.
- **Headline style:** Direct, declarative product names (e.g., '606 Universal Shelving System').
- **CTA style:** Subtle text links accompanied by directional arrows.
- **Avoid:** Emotional or flowery language. / Excessive use of exclamation marks. / Aggressive sales copy. / Complex jargon or buzzwords.

### Don'ts
- ❌ Don't use decorative illustrations — screenshot shows photography and a single functional red lips icon.
- ❌ Don't use soft drop shadows — screenshot shows flat, borderless images or thin solid dividers.
- ❌ Don't use bright, multi-colored gradients — screenshot shows a monochrome palette with one blue accent.
- ❌ Don't use heavy, ornate serif fonts — screenshot shows a clean, geometric sans-serif throughout.
- ❌ Don't use cluttered navigation — screenshot shows a minimal, text-based top menu.
- ❌ Don't use rounded pill buttons — screenshot shows rectangular buttons and simple text links.

The system deliberately omits decorative illustrations, complex shadows, and typographic ornament to uphold a commitment to honest, functional presentation.

## System Prompt (paste into AI tool)

```
Design DNA for Vitsœ, a heritage furniture brand rooted in Dieter Rams' minimalist philosophy. The system uses a monochromatic palette (#000000, #FFFFFF, #F0F0F0) with a single functional blue accent (#0073B1). Typography is exclusively a clean grotesque sans-serif (Linotype Univers W01) with heavy weights for display and light for body. Critical donts: 1) Never use decorative illustrations, as the site relies on honest photography. 2) Avoid complex shadows or rounded borders, as the system is defined by flat, rectilinear surfaces. 3) Do not use multiple accent colors; maintain strict restraint with only one high-chroma blue for interactive elements. Positioning is premium and functional, focusing on modular longevity over trendy aesthetics.
```
