← The UX Guide for Luxury Ecommerce Vol. 1
beauty · Shopify ·
Living Proof
The Living Proof 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.7 percent of the page, typeset in Suisse Intl, Documenta Regular.
The pages
desktop1440 x 900
mobile390 x 844
Palette
Surfaces, by share of painted area
60.8%
18.7%
11.9%
8.6%
60.8%
#f8f5f2
page
18.7%
#030909
dark bands
11.9%
#ebedec
panels and cards
8.6%
#313821
secondary surface
Ink, by share of text set in it
72.8%
9.2%
72.8%
#000000
body and headings
9.2%
#f9f5f4
reversed on dark
5.8%
#ebedec
reversed on dark
5.1%
#ffffff
reversed on dark
2.8%
#293037
emphasis
2.6%
#030909
emphasis
Imagery, by share of the page it covers
13.7% photograph, the rest is surface
Typography
sans-serif · everything
Suisse Intl
sans-serif · accent
Documenta Regular
of all text on the page
100% sans-serif
Ecommerce components, rebuilt to spec
Add to cart
- Type
- Suisse Intl 14px / 400 / 0.28px tracking
- Color
- rgb(255, 255, 255) on rgb(3, 9, 9)
- Shape
- 30px radius, 13.6px 32px padding, 44px tall
- Width
- 335px as rendered
Living Proof dry shampoo bottle
Living Proof dry shampoo bottle
Living Proof dry shampoo bottle
Product card
- Grid
- 3 across, 470px wide
- Image
- 1 : 1 crop, cover
- Line 1
- 16px / 400, rgb(0, 0, 0)