---
name: Diptyque
description: "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."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#717171"
  neutral: "#A1A1A1"
  bg-quiet: "#F8F8F8"
  muted-soft: "#808080"
  line: "rgba(229, 231, 235, 1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 32px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.2px"
  body:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: geometric-sans
    fontSize: 12px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A premium, editorial-first e-commerce experience for a luxury Parisian fragrance house, defined by generous whitespace, exquisite photography, and restrained typography.

*A curated gallery of artisanal scents, where every product is presented as a precious artifact against natural, textured backdrops.*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#717171`)** — uses `ink-soft` token
- **Muted (`#A1A1A1`)** — uses `muted` token
- **Borders (`rgba(229, 231, 235, 1)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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.

*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.

## Elevation & Depth

- 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.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 9999px

## Components

- **button:** Sharp, rectangular outlines with 1px black borders, uppercase or mixed-case serif text, and no fill. No border-radius except for pill variants.
- **card:** Image-first cards with minimal UI; text is typically placed outside the image boundary in a clean, unstructured layout.
- **chip:** Not prominently featured.
- **input:** Minimalist fields with simple black borders, focusing on clean lines without heavy background fills.
- **hero:** Dominant, full-bleed photographic banners with overlaid or centered CTA buttons.

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```