Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

beauty · Shopify ·

Philosophy

The Philosophy 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 33.7 percent of the page, typeset in Adobe Garamond Pro, Gill Sans MT.

The pages

desktop1440 x 900

Philosophy homepage on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Homepage
Philosophy collection: bath & body on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Collection: bath & body
Philosophy product page on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Product page

mobile390 x 844

Philosophy homepage on mobile, Shopify luxury beauty storefront captured at 390 x 844
Homepage
Philosophy collection: bath & body on mobile, Shopify luxury beauty storefront captured at 390 x 844
Collection: bath & body
Philosophy product page on mobile, Shopify luxury beauty storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

77.7%
12.3%
8.2%
77.7% #ffffff page
12.3% #f9f9f9 panels and cards
8.2% #f0dddf secondary surface
1.7% #000000 dark bands

Ink, by share of text set in it

84.6%
9.7%
84.6% #000000 body and headings
9.7% #747474 secondary
5.5% #ffffff reversed on dark
0.2% #888888 secondary

Imagery, by share of the page it covers

33.7% photograph, the rest is surface

Typography

serif · everything

Adobe Garamond Pro

sans-serif · accent

Gill Sans MT

of all text on the page

64% serif36% sans-serif

Ecommerce components, rebuilt to spec

Add to cart
Type
Gill Sans MT 12px / 600 / 1px tracking / uppercase
Color
rgb(255, 255, 255) on rgb(0, 0, 0)
Shape
0px radius, 5px 40px 0px padding, 38px tall
Width
164px as rendered