# Bottega Veneta · Design system migration spec

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

> The site is a premier example of 'quiet luxury' digital design, using extreme restraint to emphasize quality and craftsmanship.

## 1. Identity DNA

The Bottega Veneta design system is constructed like a high-end fashion magazine, where every element serves the image. The visual language operates on a principle of absolute restraint, letting the product photography provide the emotional weight while the interface itself remains deliberately quiet.

**One-liner:** A clean, image-driven luxury fashion portal with restrained typography and a monochromatic palette.
**Keywords:** Luxury · Fashion · Minimal · Editorial · Sophisticated
**Analogy:** A high-end fashion magazine translated into a digital experience.

## 2. Color

The color system is built on a strict high-contrast monochrome of black and white. This intentional absence of color in the interface ensures that the editorial photography becomes the sole chromatic element, commanding full attention.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#333333` | secondary text |
| `--muted` | `#767676` | placeholder |
| `--line` | `rgba(0, 0, 0, 0.1)` | divider |

**Color principle:** High-contrast monochrome relying on photography for color.

The guiding principle is that color belongs to the content, not the container.

## 3. Typography

Typography is treated as a structural element rather than decoration. A transitional serif for the brand identity pairs with a geometric sans-serif for all interface text, creating a clear hierarchy through weight and case rather than decorative flourishes.

- **Display:** transitional-serif
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 23px | 1.2 | 400 | 1px | Brand Logo |
| body | 14px | 1.57 | 400 | 0px | General UI and Text |
| caption | 12px | 1.34 | 400 | 0px | Small UI Elements |

**Type rules:**
- Typography is strictly uppercase for navigation and labels.
- Font weights are minimal, restricted to regular and bold.

## 4. Spacing

The spacing system establishes a generous, breathable rhythm that gives each element room to be considered independently.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace provides a refined, breathable layout.

## 5. Surfaces

Surfaces are deliberately flat, relying on spacing and subtle borders rather than shadows to establish hierarchy. The visual depth comes from the layering of typography over expansive photographic fields.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** Minimal 1px borders are used primarily for buttons and interactive elements.

## 6. Layout

The layout is anchored by a grid that supports full-bleed editorial photography, allowing images to define the visual experience. Generous whitespace creates natural reading paths and gives the composition a magazine-like quality.

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

**Skeleton:** A grid-based layout anchored by full-bleed editorial photography.

## 7. Motion & Interaction

Motion is implemented with precise restraint, using only subtle fades and smooth slides. The philosophy is that movement should feel like a natural extension of the content's arrival, never as a performance in itself.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 1, 0.5, 1)`
- **Patterns:**
  - Subtle fade-in for text overlays.
  - Smooth vertical slide for menu reveals.

- **Hover:** Subtle opacity reduction or underline appearance.
- **Click:** Immediate visual state change with no exaggerated feedback.
- **Transition:** Smooth transitions on color and transform properties (0.2s to 0.5s).
- **Keyboard:** Visible focus states for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident, quiet, and authoritative. All headlines and calls-to-action are set in uppercase, reinforcing the system's disciplined, no-nonsense aesthetic.

- **Tone:** Confident, quiet, and authoritative.
- **Headline style:** Short, evocative, and predominantly uppercase.
- **CTA style:** Direct, simple, and completely capitalized.
- **Avoid:** Exclamation marks / Salesy language / Overly decorative fonts

### Don'ts
- ❌ don't use bright or saturated accent colors — screenshot shows a strict monochromatic palette.
- ❌ don't use rounded corners on buttons — screenshot shows sharp, rectangular edges.
- ❌ don't use lowercase for primary navigation — screenshot shows all-caps text.
- ❌ don't use heavy drop shadows — screenshot shows completely flat surfaces.
- ❌ don't use busy backgrounds — screenshot shows clean white backgrounds or large photos.
- ❌ don't use playful or rounded typography — screenshot shows refined geometric and transitional fonts.

What this system deliberately avoids is any visual element that would compromise the perception of crafted, timeless quality.

## System Prompt (paste into AI tool)

```
Bottega Veneta's design DNA is a masterclass in restrained luxury. The positioning is ultra-premium fashion, utilizing a stark monochromatic palette (#000000, #333333, #FFFFFF) to allow editorial photography to command attention. The typography combines a transitional-serif for the logo with a geometric-sans for all UI elements, maintaining a clean and authoritative presence. Critical don'ts include avoiding bright accent colors, avoiding rounded corners on UI components, and never using lowercase for primary navigation. The layout is spacious, grid-based, and intentionally minimal, ensuring the focus remains entirely on the product and brand imagery.
```