Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

beauty · Shopify ·

La Prairie

The La Prairie storefront measured page by page: homepage, collection and product at desktop and mobile, every color weighted by the share of the page it paints, typeset in La Prairie.

The pages

desktop1440 x 900

La Prairie homepage on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Homepage
La Prairie collection: all skincare products on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Collection: ALL SKINCARE PRODUCTS
La Prairie product page on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Product page

mobile390 x 844

La Prairie homepage on mobile, Shopify luxury beauty storefront captured at 390 x 844
Homepage
La Prairie collection: all skincare products on mobile, Shopify luxury beauty storefront captured at 390 x 844
Collection: ALL SKINCARE PRODUCTS
La Prairie product page on mobile, Shopify luxury beauty storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

90.8%
9.2%
90.8% #ffffff page
9.2% #3e3e47 secondary surface

Ink, by share of text set in it

69.3%
11.9%
10.7%
69.3% #3e3e47 body and headings
11.9% #6f6f75 secondary
10.7% #b5b5be secondary
7.3% #ffffff reversed on dark
0.8% #969696 secondary

Typography

sans-serif · everything

La Prairie

of all text on the page

100% sans-serif

Ecommerce components, rebuilt to spec

Add to cart
Type
La Prairie 14px / 300 / 0.84px tracking / uppercase
Color
rgb(255, 255, 255) on rgb(62, 62, 71)
Shape
0px radius, 10.5px 13.125px padding, 44px tall
Width
298px as rendered
Product card
Grid
3 across, 412px wide
Image
1 : 1 crop, contain