CURATED · OPEN · FREE

Diptyque

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

01

Identity DNA

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

02

Color

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

03

Typography

transitional-serif · geometric-sans

• display32px · 400
• body14px · 400
• caption12px · 400

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.

04

Spacing

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.

05

Surfaces

Minimal, clean borders using rgba(229, 231, 235, 1). Buttons use 1px solid borders with sharp corners, except for occasionally pill-shaped inputs.

none · inset 0px -2px 0px 0px rgba(0, 0, 0, 1) on interactive elements

06

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.

07

Motion & Interaction

Smooth opacity transitions for menu overlays and banners. · Subtle easing on hover states for interactive elements. · Standard linear transitions for object positioning in carousels.

Underline text or subtle border transitions on buttons. · Immediate state change with no heavy feedback animations.

08

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.

09

Voice & Don'ts

• Tone Evocative, refined, and slightly poetic, typical of luxury fragrance marketing.
• Headlines Short, descriptive, and elegant phrases that set a mood rather than hard-sell.
• CTAs Understated, often framed with decorative dots or simple periods, inviting exploration rather than forcing action.

• 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
• Avoid: Avoid overly salesy language or exclamation points.
• Avoid: Avoid dense paragraphs or heavy text blocks.
• Avoid: Avoid harsh, bright accent colors.
• Avoid: Avoid cluttered layouts or busy UI elements.
• Avoid: Avoid playful or informal tone.
• Avoid: Avoid heavy drop shadows or complex gradients.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko