Skip to main content

← The UX Guide Vol. 1: Luxury Ecommerce

beauty · Shopify ·

Serge Lutens

French perfume house built around the work of Serge Lutens and backed by Shiseido, with a boutique in the Palais Royal in Paris. Its dense wood and spice compositions anchor niche perfumery.

The pages

desktop1440 x 900

Serge Lutens homepage on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Homepage
Serge Lutens collection: all best-sellers on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Collection: ALL BEST-SELLERS
Serge Lutens product page on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Product page

mobile390 x 844

Serge Lutens homepage on mobile, Shopify luxury beauty storefront captured at 390 x 844
Homepage
Serge Lutens collection: all best-sellers on mobile, Shopify luxury beauty storefront captured at 390 x 844
Collection: ALL BEST-SELLERS
Serge Lutens product page on mobile, Shopify luxury beauty storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

62.7%
37.3%
62.7% #ffffff page
37.3% #000000 dark bands

Ink, by share of text set in it

49.4%
48%
49.4% #000000 body and headings
48% #ffffff reversed on dark
1.7% #1a1a1a emphasis
0.4% #333232 emphasis
0.4% #5f5f5f emphasis

Imagery, by share of the page it covers

25.8% photograph, the rest is surface

Typography

sans-serif · everything

Work Sans

sans-serif · accent

Oswald

of all text on the page

100% sans-serif

The icon set

cart
search
account
close

Ecommerce components, rebuilt to spec

Serge Lutens add to cart button photographed on its product page
photographed on sergelutens.com
Add to cart
Type
Oswald 14px / 300 / 0.88px tracking / uppercase
Color
rgb(255, 255, 255) on #7e7e7e, painted over #ffffff
Shape
0px radius, 366 by 40px
Label
center, rebuild matched the photograph at 0.896
Refill Féminité du Bois 8 reviews Mascara Mascara - Deep black brown price:
GWP - Miniature La Nuit Tombée 5ml 8 reviews Mascara Mascara - Deep black brown price:
Fleurs d'oranger 8 reviews Mascara Mascara - Deep black brown price:
Product card
Grid
3 across, 427px wide
Image
1 : 1 crop, cover
Line 1
14px / 300 / uppercase, rgb(0, 0, 0)
Line 2
16px / 400, rgb(0, 0, 0)
Line 3
24px / 300 / uppercase, rgb(0, 0, 0)
Line 4
14px / 300 / uppercase, rgb(0, 0, 0)
Line 5
16px / 300, rgb(0, 0, 0)