Skip to main content

← 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

Kylie Cosmetics homepage on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Homepage
Kylie Cosmetics collection: all products on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Collection: All Products
Kylie Cosmetics product page on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Product page

mobile390 x 844

Kylie Cosmetics homepage on mobile, Shopify luxury beauty storefront captured at 390 x 844
Homepage
Kylie Cosmetics collection: all products on mobile, Shopify luxury beauty storefront captured at 390 x 844
Collection: All Products
Kylie Cosmetics product page on mobile, Shopify luxury beauty storefront captured at 390 x 844
Product page

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

cart
search
account
menu
wishlist

Ecommerce components, rebuilt to spec

Add to cart
Type
Tt-Chocolate 15px / 400 / lowercase
Color
rgb(57, 57, 57) on rgba(0, 0, 0, 0)
Shape
4px radius, 0px 5px padding, 40px tall
Width
165px as rendered
Product card
Grid
4 across, 315px wide
Image
1 : 1 crop, fill