Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

leather goods · not disclosed ·

Serapian

The Serapian 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 49.9 percent of the page, typeset in Titling Gothic FB Nrm Reg, Nunito Sans.

The pages

desktop1440 x 900

Serapian homepage on desktop, not disclosed luxury leather goods storefront captured at 1440 x 900
Homepage
Serapian collection: man on desktop, not disclosed luxury leather goods storefront captured at 1440 x 900
Collection: Man
Serapian product page on desktop, not disclosed luxury leather goods storefront captured at 1440 x 900
Product page

mobile390 x 844

Serapian homepage on mobile, not disclosed luxury leather goods storefront captured at 390 x 844
Homepage
Serapian collection: man on mobile, not disclosed luxury leather goods storefront captured at 390 x 844
Collection: Man
Serapian product page on mobile, not disclosed luxury leather goods storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

93.7%
93.7% #ffffff page
6.3% #2a2a2a secondary surface

Ink, by share of text set in it

43.5%
21.8%
18.2%
12.2%
43.5% #2a2a2a body and headings
21.8% #888888 secondary
18.2% #666666 emphasis
12.2% #999999 secondary
4.2% #ffffff reversed on dark

Imagery, by share of the page it covers

49.9% photograph, the rest is surface

Typography

sans-serif · everything

Titling Gothic FB Nrm Reg

sans-serif · accent

Nunito Sans

of all text on the page

100% sans-serif

Ecommerce components, rebuilt to spec

Add to cart
Type
Titling Gothic FB Nrm Reg 14px / 400 / 1.16px tracking
Color
rgb(255, 255, 255) on rgb(42, 42, 42)
Shape
0px radius, 12.25px 61px padding, 50px tall
Width
389px as rendered
<img class="ProductItem__Image P
<img class="ProductItem__Image P
<img class="ProductItem__Image P
Product card
Grid
4 across, 360px wide
Image
1 : 1 crop, cover
Line 1
14px / 400, rgb(28, 27, 27)