← The UX Guide Vol. 1: Luxury Ecommerce
beauty · Shopify ·
SK-II
Japanese skincare brand owned by Procter & Gamble and built on Pitera, a yeast ferment traced to observations at a sake brewery. Facial Treatment Essence is the product the range revolves around.
The pages
desktop1440 x 900
mobile390 x 844
Palette
Surfaces, by share of painted area
48.3%
23.6%
13.4%
12.8%
48.3%
#ffffff
page
23.6%
#161616
dark bands
13.4%
#fffcfa
panels and cards
12.8%
#f8f4ed
panels and cards
1.3%
#fbf4ed
panels and cards
0.4%
#ea0429
secondary surface
Ink, by share of text set in it
43.2%
34.2%
15.8%
43.2%
#161616
body and headings
34.2%
#ffffff
reversed on dark
15.8%
#1b1212
emphasis
4.8%
#000000
emphasis
1.5%
#808080
secondary
0.6%
#666666
emphasis
Imagery, by share of the page it covers
19.3% photograph, the rest is surface
Typography
sans-serif · everything
AvenirNextLTProRegular
sans-serif · accent
AvenirNextLTPro
of all text on the page
92% sans-serif8% serif
The icon set
Ecommerce components, rebuilt to spec
Add to cart
- Type
- AvenirNextLTProRegular 14px / 700 / 1.12px tracking / uppercase
- Color
- rgb(255, 255, 255) on rgb(234, 4, 41)
- Shape
- 0px radius, 5px 12px padding, 45px tall
- Width
- 500px as rendered
SKINPOWER Re-New Essence
SKINPOWER Eye + Line Filler Cream
SKINPOWER Re-New Airy Cream
Product card
- Grid
- 4 across, 262px wide
- Image
- 1.06 : 1 crop, contain
- Line 1
- 12px / 400, rgb(22, 22, 22)