Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

drinks · Shopify ·

Louis XIII

The Louis XIII 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 24.1 percent of the page, typeset in Fira Sans, SangBleu Kingdom light.

The pages

desktop1440 x 900

Louis XIII homepage on desktop, Shopify luxury drinks storefront captured at 1440 x 900
Homepage
Louis XIII collection: all products on desktop, Shopify luxury drinks storefront captured at 1440 x 900
Collection: All Products
Louis XIII product page on desktop, Shopify luxury drinks storefront captured at 1440 x 900
Product page

mobile390 x 844

Louis XIII homepage on mobile, Shopify luxury drinks storefront captured at 390 x 844
Homepage
Louis XIII collection: all products on mobile, Shopify luxury drinks storefront captured at 390 x 844
Collection: All Products
Louis XIII product page on mobile, Shopify luxury drinks storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

91.4%
91.4% #ffffff page
7.9% #000000 dark bands
0.4% #a57350 accent
0.2% #f7f7f7 panels and cards

Ink, by share of text set in it

67.8%
12%
8.4%
67.8% #000000 body and headings
12% #101010 emphasis
8.4% #ffffff reversed on dark
4% #5f5f5f emphasis
2.9% #be9a5a secondary
2.8% #333333 emphasis

Imagery, by share of the page it covers

24.1% photograph, the rest is surface

Typography

sans-serif · everything

Fira Sans

sans-serif · accent

SangBleu Kingdom light

of all text on the page

100% sans-serif

Ecommerce components, rebuilt to spec

Product card
Grid
3 across, 353px wide
Image
1.01 : 1 crop, contain