← The UX Guide for Luxury Ecommerce Vol. 1
home and design · Shopify ·
Augarten
The Augarten 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 28.2 percent of the page, typeset in Moderat, GT Super Display.
The pages
desktop1440 x 900
mobile390 x 844
Palette
Surfaces, by share of painted area
56.7%
40%
56.7%
#ffffff
page
40%
#00205c
dark bands
1.9%
#9eb0be
accent
1.1%
#f4f2e6
panels and cards
0.2%
#212121
dark bands
Ink, by share of text set in it
75.6%
24.4%
75.6%
#212121
body and headings
24.4%
#ffffff
reversed on dark
Imagery, by share of the page it covers
28.2% photograph, the rest is surface
Typography
sans-serif · everything
Moderat
sans-serif · accent
GT Super Display
of all text on the page
86% sans-serif14% serif
Ecommerce components, rebuilt to spec
Add to cart
- Type
- Moderat 14px / 400
- Color
- rgb(255, 255, 255) on rgb(33, 33, 33)
- Shape
- 0px radius, 12px 13.6px padding, 44px tall
- Width
- 274px as rendered
Kaffeetasse Mozart
40% Rabatt
Kaffeetasse Mozart
40% Rabatt
Kaffeetasse Mozart
40% Rabatt
Product card
- Grid
- 3 across, 443px wide
- Image
- 1 : 1 crop, cover
- Line 1
- 16px / 400, rgb(33, 33, 33)
- Line 2
- 14px / 400, rgb(33, 33, 33)