Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

drinks · Shopify ·

Bruichladdich

The Bruichladdich storefront measured page by page: homepage, collection and product at desktop and mobile, every color weighted by the share of the page it paints, typeset in Bruichladdich Sans, New Frank.

The pages

desktop1440 x 900

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

mobile390 x 844

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

Palette

Surfaces, by share of painted area

100%
100% #0f0f10 page

Ink, by share of text set in it

52%
22%
12.8%
8.4%
52% #ffffff body and headings
22% #9f9f9f secondary
12.8% #858586 secondary
8.4% #000000 emphasis
2% #ebebf5 reversed on dark
2% #0f0f10 emphasis

Typography

sans-serif · everything

Bruichladdich Sans

sans-serif · accent

New Frank

of all text on the page

100% sans-serif

Ecommerce components, rebuilt to spec

Add to cart
Type
New Frank 12px / 400 / 1.2px tracking / uppercase
Color
rgb(15, 15, 16) on rgba(235, 235, 245, 0.8)
Shape
4px radius, 9px 0px padding, 35px tall
Width
124px as rendered
Product card
Grid
4 across, 161px wide
Image
0.4 : 1 crop, cover