# Diptyque · Design system migration spec

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

> Worth including as a prime example of a luxury retail design system where the UI deliberately steps back to let the artistry of the product photography and editorial storytelling take center stage.

## 1. Identity DNA

The design system for Diptyque is constructed like a curated gallery of artisanal scents, where every interface element is designed to recede and let the product stand as a precious artifact. A strict monochrome UI frame defers entirely to the rich, natural color palettes within editorial photography.

**One-liner:** A premium, editorial-first e-commerce experience for a luxury Parisian fragrance house, defined by generous whitespace, exquisite photography, and restrained typography.
**Keywords:** luxury · refined · artisanal · heritage · fragrance
**Analogy:** A curated gallery of artisanal scents, where every product is presented as a precious artifact against natural, textured backdrops.

## 2. Color

The palette is a disciplined monochrome of black, white, and light gray, engineered to act as a neutral stage. This high-contrast foundation ensures that the emotional weight is carried solely by the multi-colored product imagery.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-quiet` | `#F8F8F8` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#717171` | secondary text |
| `--muted` | `#A1A1A1` | placeholder |
| `--muted-soft` | `#808080` | weak hint |
| `--line` | `rgba(229, 231, 235, 1)` | divider |

**Color principle:** High-contrast monochrome UI (black on white) that defers entirely to rich, natural color palettes within editorial photography.

The principle is one of absolute deference: the interface provides the frame, never the subject.

## 3. Typography

Typography voice is bifurcated to serve distinct purposes: a transitional-serif establishes elegant, evocative headlines, while a geometric-sans provides clarity for all functional UI text and navigation. This pairing balances editorial flourish with utilitarian legibility at a deliberate 14px body size.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 32px | 1.1 | 400 | -0.2px | Hero and section headlines |
| body | 14px | 1.5 | 400 | 0px | Primary text and descriptions |
| caption | 12px | 1.4 | 400 | 0px | Secondary text, navigation links, and disclaimers |

**Type rules:**
- Use transitional-serif for evocative headlines to establish elegance.
- Use geometric-sans for all functional UI text and navigation for clarity.
- Keep body copy at 14px to maintain an editorial, uncluttered feel.

## 4. Spacing

Rhythm is defined by generous whitespace and padding, creating a pervasive sense of calm and luxury.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace and padding define the layout, creating a sense of luxury and calm. Vertical rhythm is primarily established through large section dividers and image margins.

## 5. Surfaces

Depth is communicated almost exclusively through clean, minimal borders rather than shadows. The surface treatment is flat and graphic, using subtle inset lines on interactive elements to denote state.

- **Radius:** sm 0px · md 0px · lg 0px · pill 9999px
- **Shadows:**
  - none
  - inset 0px -2px 0px 0px rgba(0, 0, 0, 1) on interactive elements
- **Borders:** Minimal, clean borders using rgba(229, 231, 235, 1). Buttons use 1px solid borders with sharp corners, except for occasionally pill-shaped inputs.

## 6. Layout

The layout skeleton begins with full-bleed hero imagery that transitions into centered content blocks with expansive margins. A grid is used sparingly, primarily for product carousels, while single-column editorial layouts are the default for creating impact.

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

**Skeleton:** Full-bleed hero imagery transitioning into centered content blocks with generous margins. Grid is used sparingly, mostly for product carousels, relying on single-column editorial layouts for impact.

## 7. Motion & Interaction

Motion philosophy is one of calm refinement, utilizing smooth, almost imperceptible transitions for menus and UI overlays. Interactivity relies on subtle easing and linear animations, preserving the serene aesthetic.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 1, 1)`
- **Patterns:**
  - Smooth opacity transitions for menu overlays and banners.
  - Subtle easing on hover states for interactive elements.
  - Standard linear transitions for object positioning in carousels.

- **Hover:** Underline text or subtle border transitions on buttons.
- **Click:** Immediate state change with no heavy feedback animations.
- **Transition:** Smooth, almost imperceptible transitions for menus and UI overlays to maintain the calm aesthetic.
- **Keyboard:** Standard focusable elements, likely styled with visible focus rings for accessibility.

## 8. Voice & Don'ts

The editorial voice is evocative, refined, and slightly poetic, using short, elegant phrases to set a mood rather than hard-sell. Calls to action are understated, often framed with simple punctuation, inviting exploration rather than demanding it.

- **Tone:** Evocative, refined, and slightly poetic, typical of luxury fragrance marketing.
- **Headline style:** Short, descriptive, and elegant phrases that set a mood rather than hard-sell.
- **CTA style:** Understated, often framed with decorative dots or simple periods, inviting exploration rather than forcing action.
- **Avoid:** Avoid overly salesy language or exclamation points. / Avoid dense paragraphs or heavy text blocks. / Avoid harsh, bright accent colors. / Avoid cluttered layouts or busy UI elements. / Avoid playful or informal tone. / Avoid heavy drop shadows or complex gradients.

### Don'ts
- ❌ don't use rounded corners on buttons — screenshot shows sharp rectangular borders
- ❌ don't use drop shadows on cards or elements — screenshot shows flat, border-based separation
- ❌ don't use bright, high-chroma accent colors — screenshot shows strictly monochrome UI with color coming only from photography
- ❌ don't use dense text layouts — screenshot shows generous whitespace and short, evocative copy
- ❌ don't use heavy, bold sans-serif for headlines — screenshot shows delicate serif typography for display text
- ❌ don't use playful or rounded typography — screenshot shows structured, elegant fonts with sharp edges

The system deliberately rejects rounded corners, drop shadows, bright accents, and playful tone in favor of structured, elegant restraint.

## System Prompt (paste into AI tool)

```
Diptyque Paris is a premium luxury fragrance e-commerce site defined by its restrained, editorial approach. The design relies on a strict monochrome UI (pure black #000000 and white #FFFFFF) to let rich, naturalistic product photography carry the emotional weight. Typography is a careful balance between a transitional-serif for elegant display headlines and a clean geometric-sans (like Apercu) for functional body and navigation text, maintaining a 14px base for readability. Layouts are expansive, utilizing full-bleed imagery and generous whitespace to create a gallery-like feel. Key critical donts include: never use rounded corners on buttons or cards, avoid any bright accent colors that compete with the photography, and never clutter the interface with dense text blocks or heavy drop shadows. The overall system must preserve a sense of quiet luxury and refined restraint.
```