Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

leather · Shopify · Paris, 1717

Fauré Le Page

A Parisian maison founded in 1717, selling on Shopify in six languages with a single sans-serif, a square crop and no reviews anywhere.

The pages

desktop1440 x 900

Fauré Le Page homepage on desktop, Shopify luxury leather storefront captured at 1440 x 900
Homepage
Fauré Le Page collection: all bags on desktop, Shopify luxury leather storefront captured at 1440 x 900
Collection: All Bags
Fauré Le Page product page on desktop, Shopify luxury leather storefront captured at 1440 x 900
Product page

mobile390 x 844

Fauré Le Page homepage on mobile, Shopify luxury leather storefront captured at 390 x 844
Homepage
Fauré Le Page collection: all bags on mobile, Shopify luxury leather storefront captured at 390 x 844
Collection: All Bags
Fauré Le Page product page on mobile, Shopify luxury leather storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

76.9%
9.2%
76.9% #ffffff page
9.2% #fbba00 call to action
7.6% #f5f5f5 panels and grid cells
4.8% #142449 footer navy
1.6% #000000 announcement bar

Ink, by share of text set in it

78.2%
12.3%
78.2% #000000 body and headings
12.3% #ffffff reversed on dark
6.6% #696969 captions
2.9% #757575 secondary

Imagery, by share of the page it covers

30.5% photograph, the rest is surface

Typography

sans-serif · everything

EuclidFlex

sans-serif · accent

BeaufortforLOL

of all text on the page

100% sans-serif

The icon set

The house ships one icon font, icomoon.

cart
search
user
close
arrow
double-arrow
heart
heart-empty
play
pause
globe
info

Ecommerce components, rebuilt to spec

Add to cart
Type
EuclidFlex 12px / 500 / 1px tracking / uppercase
Color
#FBBA00 on #000000
Shape
2px radius, 1px border, 12px 20px padding, 40px tall
Width
100% of its column
Add to cart Double Battle 35 Bag 5 color(s) $1,890 USD
Add to cart Daily Battle 35 Zip Bag 7 color(s) $1,720 USD
Add to cart Daily Battle 35 Bag 2 color(s) $1,770 USD | WEB EXCLUSIVE

Hover a card to raise the add to cart bar.

Product card
Image
1:1 crop on #F5F5F5, no padding
Title
12px / 600 / uppercase / .4px tracking, black
Colors
12px / 400, #757575, directly beneath
Price
12px / 400, black, currency spelled out
Flag
Pipe then WEB EXCLUSIVE, uppercase, grey
Hover
#FBBA00 bar across the image foot, black uppercase
Rail
25px gaps, Swiper carousel with arrows and dots

Color : Paris Blue — Scale Canvas and Calfskin Leather

Color swatches
Dot
20px circle filled with the color, no border
Chosen
32px ring, 1px #FBBA00, centered on the dot
Spacing
24px cell, 2px pad, 16px between
Label
12px / 400, the color named in full above the row
Markup
Screen reader radio plus a colored label, one CSS variable per color

Size :

19 27 35 41 Size guide
Size selector
Type
12px / 400, #696969, no box and no underline
Current
32px ring, 1px #FBBA00, the same mark the swatches use
Spacing
32px row, 30px between numbers
Behavior
Each size is a separate product, so the row is links rather than variants