# Byredo · Design system migration spec

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

> A masterclass in luxury restraint, demonstrating how a brand can achieve a premium feel by strictly limiting the UI palette and typography.

## 1. Identity DNA

Byredo's design system functions like a high-end art gallery dedicated to olfactory compositions. Its identity is built on strict monochromatic restraint, allowing the sculptural forms of fragrance bottles and evocative campaign imagery to command full attention.

**One-liner:** A premium fragrance house blending stark minimalism with sculptural typography.
**Keywords:** luxury · minimalist · scandinavian · fragrance · premium
**Analogy:** A high-end art gallery dedicated to olfactory compositions

## 2. Color

The palette is a disciplined study in black, white, and transitional grays. This chromatic austerity ensures no color competes with the product photography, which remains the sole source of visual warmth and complexity.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#f5f5f5` | card background |
| `--ink` | `#000000` | body text |
| `--muted` | `#767676` | placeholder |
| `--line` | `rgba(229, 231, 235, 1)` | divider |

**Color principle:** Strictly monochromatic typography to ensure the colorful product imagery remains the focal point

The governing principle is absolute neutrality: the interface is a quiet frame for the art within.

## 3. Typography

Typography serves a dual, structural voice. A custom stencil-sans anchors the logotype with graphic weight, while a geometric sans-serif delivers product titles and copy with uniform clarity.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 120px | 0.9 | 400 | 0.35px | Hero brand logotype |
| h1 | 28px | 1.2 | 400 | 0.35px | Primary product titles |
| body | 14px | 1.4 | 400 | 0.35px | General copy and labels |
| caption | 10px | 1.2 | 400 | 0.35px | Utility text and fine print |

## 4. Spacing

Rhythm is established through generous vertical breathing room and the precise, consistent padding of interactive zones.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 28 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical spacing in footer columns; consistent internal padding of 28px for cards and interactive areas

## 5. Surfaces

Surfaces are defined by almost imperceptible depth. Shadows are ghostly or absent, and borders are fine, neutral lines that suggest separation without visual noise.

- **Radius:** sm 4px · md 6px · lg 20px · pill 9999px
- **Shadows:**
  - rgba(0,0,0,0) 0 0 0 0
  - rgb(128,128,128) 0 0 5px 0
- **Borders:** 1px solid rgba(229, 231, 235, 1)

## 6. Layout

The layout skeleton is one of stark contrast: immersive, full-bleed photographic moments that dissolve into a dense, rigorously structured multi-column grid in the footer. This creates a journey from open, emotional imagery to organized, utilitarian information.

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

**Skeleton:** Full-bleed imagery overlays; strictly structured multi-column footer grid

## 7. Motion & Interaction

Motion is functional and discreet, focused on confirming interaction rather than embellishing it. Transitions are uniform in timing and easing, ensuring a consistent, unhurried cadence throughout the interface.

- **Durations:** micro 220ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle 300ms fades for opacity and transform interactions
  - Color and fill transitions on interactive elements

- **Hover:** Color and opacity shifts with 300ms cubic-bezier transition
- **Click:** Immediate visual response followed by state change
- **Transition:** 0.3s cubic-bezier(0.4, 0, 0.2, 1)
- **Keyboard:** Standard tab navigation with visible focus indicators

## 8. Voice & Don'ts

The editorial voice is authoritative and understated, using short, often uppercase headlines and text-based calls to action. It avoids promotional excess in favor of a quiet, assured luxury.

- **Tone:** Authoritative, understated, and luxury-focused
- **Headline style:** Short, punchy, and often uppercase
- **CTA style:** Subtle, text-based, and completely unobtrusive
- **Avoid:** Excessive exclamation points / Loud or promotional language / Decorative borders or ornaments

### Don'ts
- ❌ don't use a vibrant accent color — screenshot shows a strictly monochromatic palette
- ❌ don't apply heavy drop shadows — screenshot shows mostly flat surfaces or subtle gray shadows
- ❌ don't use highly decorative serif fonts — screenshot shows geometric sans and custom stencil fonts
- ❌ don't clutter the interface with multiple competing elements — screenshot shows a single dominant focal point
- ❌ don't use rounded card corners (large radius) — screenshot shows small 4px-6px radii on interactive elements
- ❌ don't use heavy font weights — screenshot shows a uniform 400 weight across all text elements

The system deliberately omits decorative elements, accent colors, and complex animations, proving that premium positioning is defined as much by what is excluded as by what is included.

## System Prompt (paste into AI tool)

```
Design a premium, minimalist luxury e-commerce interface that prioritizes editorial photography over UI elements. Use a strict monochromatic palette with a white (#ffffff) background, deep black (#000000) typography, and subtle grays (#767676, #f5f5f5) for secondary elements; do not introduce any vibrant accent colors. Utilize a geometric sans-serif for body text and a custom stencil-sans for bold logotypes, maintaining a uniform 400 font weight. Critical constraints: never use heavy drop shadows, avoid large border-radius values, and ensure the UI recedes to let the product imagery command full attention. Typography should be widely tracked (0.35px) and predominantly uppercase to reinforce the luxury positioning.
```