← The UX Guide for Luxury Ecommerce Vol. 1
beauty · Shopify ·
Biologique Recherche
The Biologique Recherche 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 31.4 percent of the page, typeset in Sohne.
The pages
desktop1440 x 900
mobile390 x 844
Palette
Surfaces, by share of painted area
54.6%
29.4%
11.9%
54.6%
#ffffff
page
29.4%
#0e2243
dark bands
11.9%
#f1f0eb
panels and cards
4.2%
#edeef0
panels and cards
Ink, by share of text set in it
43.9%
30.7%
14.5%
43.9%
#0e2243
body and headings
30.7%
#ffffff
reversed on dark
14.5%
#73767f
secondary
5.7%
#a1a6ae
secondary
4.4%
#6a6d75
secondary
0.7%
#c4c8ce
secondary
Imagery, by share of the page it covers
31.4% photograph, the rest is surface
Typography
sans-serif · everything
Sohne
of all text on the page
100% sans-serif
Ecommerce components, rebuilt to spec
Add to cart
- Type
- Sohne 14px / 400 / 0.2px tracking
- Color
- rgb(255, 255, 255) on rgb(14, 34, 67)
- Shape
- 24px radius, 10px 30px padding, 46px tall
- Width
- 480px as rendered
SUMMER ESSENTIALS
/
/
SUMMER ESSENTIALS
/
/
SUMMER ESSENTIALS
/
/
Product card
- Grid
- 4 across, 357px wide
- Image
- 1 : 1 crop, cover
- Line 1
- 17px / 400 / uppercase, rgb(14, 34, 67)
- Line 2
- 11px / 400, rgb(196, 200, 206)
- Line 3
- 11px / 400, rgb(196, 200, 206)