Skip to main content

← The UX Guide Vol. 1: Luxury Ecommerce

drinks · Shopify ·

Bruichladdich

Islay distillery built in 1881 and reopened in 2001 after years of silence, owned by Rémy Cointreau and known for unpeated Bruichladdich, peated Port Charlotte and heavily peated Octomore.

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

The icon set

cart
search
account
menu
close

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