← The UX Guide Vol. 1: Luxury Ecommerce
beauty · Shopify ·
Viktor&Rolf Fragrance
Fragrance arm of the Dutch design duo Viktor Horsting and Rolf Snoeren, produced under license by L'Oréal. Flowerbomb and Spicebomb are the two pillars the business is built on.
The pages
desktop1440 x 900
mobile390 x 844
Palette
Surfaces, by share of painted area
65.2%
19.6%
13.3%
65.2%
#f5f5f5
page
19.6%
#efe6d5
secondary surface
13.3%
#ffffff
panels and cards
1.9%
#000000
dark bands
Ink, by share of text set in it
61.2%
23.6%
61.2%
#191919
body and headings
23.6%
#000000
emphasis
7.9%
#ffffff
reversed on dark
7.3%
#959595
secondary
Imagery, by share of the page it covers
41.9% photograph, the rest is surface
Typography
sans-serif · everything
Neuzeit S LT Std
of all text on the page
100% sans-serif
The icon set
Ecommerce components, rebuilt to spec
Add to cart
- Type
- Neuzeit S LT Std 12px / 400 / 0.5px tracking
- Color
- rgb(255, 255, 255) on #000000, painted over #f5f5f5
- Shape
- 0px radius, 414 by 36px
- Label
- right, rebuild matched the photograph at 0.983
Product card
- Grid
- 4 across, 360px wide
- Image
- 0.67 : 1 crop, cover
Size and color
XS
S
M
L
XL
Size selector
- Control
- radio list with text labels, 5 values
- Label
- size
- Type
- Neuzeit S LT Std 12px / 400
- Cell
- 12 by 14px, 25px apart
- Chosen
- 9x1px underline bar, #000000
- On load
- nothing is chosen
Color selector
- Control
- links to sibling products, 3 swatches
- Swatch
- square, 14 by 14px, 10px apart
- Chosen
- 14x1px underline bar, #000000