← The UX Guide Vol. 1: Luxury Ecommerce
beauty · Shopify ·
Kylie Cosmetics
Kylie Jenner started the brand in 2015 selling lip kits, a liner and a liquid lipstick paired as a set, then widened it into a full color cosmetics range. Coty took a majority stake in 2020.
The pages
desktop1440 x 900
mobile390 x 844
Palette
Surfaces, by share of painted area
50.7%
41.5%
50.7%
#ffffff
page
41.5%
#f8f1f4
panels and cards
5.3%
#000000
dark bands
2.1%
#efd7e5
secondary surface
0.3%
#f0e6d8
secondary surface
Ink, by share of text set in it
81.4%
8.7%
81.4%
#393939
body and headings
8.7%
#ffffff
reversed on dark
6.7%
#3f2021
emphasis
3%
#f0e6d8
reversed on dark
0.2%
#b3848f
secondary
Imagery, by share of the page it covers
35.5% photograph, the rest is surface
Typography
sans-serif · everything
Tt-Chocolate
sans-serif · accent
UniversLTStd-Bold
of all text on the page
100% sans-serif
The icon set
Ecommerce components, rebuilt to spec
Add to cart
- Type
- Tt-Chocolate 15px / 400 / lowercase
- Color
- rgb(255, 255, 255) on #393939, painted over #ffffff
- Shape
- 4px radius, 422 by 40px
- Label
- center, rebuild matched the photograph at 0.969
Product card
- Grid
- 4 across, 315px wide
- Image
- 1 : 1 crop, fill
Size and color
Color selector
- Control
- radio list with coloured labels, 4 swatches
- Swatch
- circle, 26 by 26px, 5px apart
- Chosen
- 24px ring, 1px #ffffff