Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

beauty · Shopify ·

Chantecaille

The Chantecaille 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 13.4 percent of the page, typeset in AvenirLT-Medium.

The pages

desktop1440 x 900

Chantecaille homepage on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Homepage
Chantecaille collection: all chantecaille on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Collection: all chantecaille
Chantecaille product page on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Product page

mobile390 x 844

Chantecaille homepage on mobile, Shopify luxury beauty storefront captured at 390 x 844
Homepage
Chantecaille collection: all chantecaille on mobile, Shopify luxury beauty storefront captured at 390 x 844
Collection: all chantecaille
Chantecaille product page on mobile, Shopify luxury beauty storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

83.3%
14.4%
83.3% #ffffff page
14.4% #fefaf9 panels and cards
1.3% #000000 dark bands
0.7% #ebe7e4 secondary surface
0.3% #ebeaea secondary surface

Ink, by share of text set in it

77.3%
19.2%
77.3% #000000 body and headings
19.2% #ffffff reversed on dark
2.3% #5b5a59 emphasis
1% #6e7071 secondary

Imagery, by share of the page it covers

13.4% photograph, the rest is surface

Typography

sans-serif · everything

AvenirLT-Medium

of all text on the page

100% sans-serif

Ecommerce components, rebuilt to spec

Add to cart
Type
AvenirLT-Medium 16px / 300 / 0.1px tracking
Color
rgb(0, 0, 0) on rgba(0, 0, 0, 0)
Shape
0px radius, 6px 0px 0px 5px padding, 29px tall
Width
328px as rendered
Iconic for a reason | Future Ski
Iconic for a reason | Future Ski
Iconic for a reason | Future Ski
Product card
Grid
1 across, 300px wide
Image
1.5 : 1 crop, fill
Line 1
14px / 300, rgb(0, 0, 0)