Skip to main content

← The UX Guide Vol. 1: Luxury Ecommerce

beauty · Shopify ·

Hourglass

Started in Los Angeles in 2004, Hourglass is known for its Ambient Lighting Powder and for reformulating its whole range as vegan. Unilever bought the brand in 2017.

The pages

desktop1440 x 900

Hourglass homepage on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Homepage
Hourglass collection: all on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Collection: All
Hourglass product page on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Product page

mobile390 x 844

Hourglass homepage on mobile, Shopify luxury beauty storefront captured at 390 x 844
Homepage
Hourglass collection: all on mobile, Shopify luxury beauty storefront captured at 390 x 844
Collection: All
Hourglass product page on mobile, Shopify luxury beauty storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

92.4%
92.4% #f5f2e5 page
5.1% #000000 dark bands
2.5% #f2efe8 panels and cards

Ink, by share of text set in it

59.7%
20.5%
15.8%
59.7% #000000 body and headings
20.5% #ffffff reversed on dark
15.8% #f5f2e5 reversed on dark
4% #2c2c2c emphasis

Imagery, by share of the page it covers

37.1% photograph, the rest is surface

Typography

sans-serif · everything

Lausanne-300

sans-serif · accent

Gotham-Bold

of all text on the page

100% sans-serif

The icon set

cart
Search loupe
search
Hamburger Menu
menu
Close
close

Ecommerce components, rebuilt to spec

Add to cart
Type
Gotham-Book 14px / 600 / uppercase
Color
rgb(245, 242, 229) on rgb(0, 0, 0)
Shape
0px radius, 12px 24px padding, 44px tall
Width
532px as rendered
Vegan Leather Luggage Tag $34 2 Shades
Phantom Blur Balm $34 2 Shades
Unlocked Satin Crème Lipstick Sample Card $34 2 Shades
Product card
Grid
10 across, 372px wide
Image
1 : 1 crop, cover
Line 1
13px / 400 / uppercase, rgb(0, 0, 0)
Line 2
14px / 300, rgb(0, 0, 0)
Line 3
13px / 300, rgb(0, 0, 0)
Line 4
13px / 300, rgb(0, 0, 0)