Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

beauty · not disclosed ·

Diptyque

The Diptyque storefront measured page by page: homepage, collection and product at desktop and mobile, every color weighted by the share of the page it paints, with photography covering 34 percent of the page, typeset in Apercu Pro, Diptyque Saint Germain.

The pages

desktop1440 x 900

Diptyque homepage on desktop, not disclosed luxury beauty storefront captured at 1440 x 900
Homepage
Diptyque collection: toutes les bougies & maison on desktop, not disclosed luxury beauty storefront captured at 1440 x 900
Collection: Toutes les Bougies & Maison
Diptyque product page on desktop, not disclosed luxury beauty storefront captured at 1440 x 900
Product page

mobile390 x 844

Diptyque homepage on mobile, not disclosed luxury beauty storefront captured at 390 x 844
Homepage
Diptyque collection: toutes les bougies & maison on mobile, not disclosed luxury beauty storefront captured at 390 x 844
Collection: Toutes les Bougies & Maison
Diptyque product page on mobile, not disclosed luxury beauty storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

61.4%
38.6%
61.4% #ffffff page
38.6% #f8f8f8 panels and cards

Ink, by share of text set in it

63.3%
29.1%
63.3% #000000 body and headings
29.1% #717171 secondary
6.2% #5f5f5f emphasis
1.4% #ffffff reversed on dark

Imagery, by share of the page it covers

34% photograph, the rest is surface

Typography

sans-serif · everything

Apercu Pro

sans-serif · accent

Diptyque Saint Germain

of all text on the page

75% sans-serif25% serif

Ecommerce components, rebuilt to spec

Add to cart
Type
Arial 13.3333px / 400
Color
rgb(0, 0, 0) on rgb(255, 255, 255)
Shape
999px radius, 8px padding, 36px tall
Width
36px as rendered
Product card
Grid
4 across, 274px wide
Image
1.3 : 1 crop, cover