← The UX Guide for Luxury Ecommerce Vol. 1
jewelry · Shopify ·
Aurate
The Aurate 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 37.4 percent of the page, typeset in gt-america-standard-webfont, gt-america-extended-webfont.
The pages
desktop1440 x 900
mobile390 x 844
Palette
Surfaces, by share of painted area
57.4%
12.8%
12.4%
57.4%
#ffffff
page
12.8%
#304038
secondary surface
12.4%
#fdfcfc
panels and cards
6.1%
#efeae6
panels and cards
6.1%
#bfccb8
secondary surface
3.3%
#f7f7f8
panels and cards
Ink, by share of text set in it
70.1%
12.6%
9.2%
8.1%
70.1%
#42544f
body and headings
12.6%
#5f6a66
secondary
9.2%
#ffffff
reversed on dark
8.1%
#bfccb8
secondary
Imagery, by share of the page it covers
37.4% photograph, the rest is surface
Typography
sans-serif · everything
gt-america-standard-webfont
sans-serif · accent
gt-america-extended-webfont
of all text on the page
100% sans-serif
Ecommerce components, rebuilt to spec
Add to cart
- Type
- gt-america-extended-webfont 12px / 500 / 1.6px tracking / uppercase
- Color
- rgb(255, 255, 255) on rgb(48, 64, 56)
- Shape
- 1px radius, 18px 82px padding, 56px tall
- Width
- 320px as rendered
WHITE SAPPHIRE TENNIS NECKLACE
WHITE SAPPHIRE TENNIS NECKLACE
WHITE SAPPHIRE TENNIS NECKLACE
Product card
- Grid
- 4 across, 254px wide
- Image
- 0.74 : 1 crop, cover
- Line 1
- 10px / 500 / uppercase, rgb(95, 106, 102)