← The UX Guide Vol. 1: Luxury Ecommerce
beauty · Shopify ·
Living Proof
Boston hair care company Living Proof was started by MIT scientists who put polymer research to work in styling products. Its No Frizz and Perfect Hair Day lines came out of that research.
The pages
desktop1440 x 900
mobile390 x 844
Palette
Surfaces, by share of painted area
60.8%
18.7%
11.9%
8.6%
60.8%
#f8f5f2
page
18.7%
#030909
dark bands
11.9%
#ebedec
panels and cards
8.6%
#313821
secondary surface
Ink, by share of text set in it
72.8%
9.2%
72.8%
#000000
body and headings
9.2%
#f9f5f4
reversed on dark
5.8%
#ebedec
reversed on dark
5.1%
#ffffff
reversed on dark
2.8%
#293037
emphasis
2.6%
#030909
emphasis
Imagery, by share of the page it covers
13.7% photograph, the rest is surface
Typography
sans-serif · everything
Suisse Intl
sans-serif · accent
Documenta Regular
of all text on the page
100% sans-serif
The icon set
Ecommerce components, rebuilt to spec
Add to cart
- Type
- Suisse Intl 14px / 400 / 0.28px tracking
- Color
- rgb(255, 255, 255) on #030909, painted over #f9f5f2
- Shape
- 30px radius, 335 by 44px
- Label
- center, rebuild matched the photograph at 0.989
No Frizz Wash Duo
Dry Shampoo Duo
Curl Definition + Moisture Set
Product card
- Grid
- 3 across, 470px wide
- Image
- 1 : 1 crop, cover
- Line 1
- 16px / 400, rgb(0, 0, 0)
Size and color
Travel 1.7 oz $18
Full 5 oz $32
Size selector
- Control
- radio list with text labels, 2 values
- Label
- Size
- Type
- Suisse Intl 14px / 400
- Cell
- 159 by 160px, 8px apart
- Chosen
- outline rgb(3, 9, 9) solid 1px
- On load
- one is already chosen
The email sign up popup
Email capture
- Placement
- centred centre, 780 x 560
- Asks for
- Offers
- 15% off
- Shown on
- both
- Dismissible
- no close control found