Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

beauty · not disclosed ·

Fenty Beauty

The Fenty Beauty storefront measured page by page: homepage, collection and product at desktop and mobile, every color weighted by the share of the page it paints, with photography covering 17.8 percent of the page, typeset in Brown.

The pages

desktop1440 x 900

Fenty Beauty homepage on desktop, not disclosed luxury beauty storefront captured at 1440 x 900
Homepage
Fenty Beauty collection: all on desktop, not disclosed luxury beauty storefront captured at 1440 x 900
Collection: All
Fenty Beauty product page on desktop, not disclosed luxury beauty storefront captured at 1440 x 900
Product page

mobile390 x 844

Fenty Beauty homepage on mobile, not disclosed luxury beauty storefront captured at 390 x 844
Homepage
Fenty Beauty collection: all on mobile, not disclosed luxury beauty storefront captured at 390 x 844
Collection: All
Fenty Beauty product page on mobile, not disclosed luxury beauty storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

77.6%
10.1%
77.6% #ffffff page
10.1% #000000 dark bands
7.6% #f5f5f5 panels and cards
4.4% #2b2727 secondary surface
0.2% #d8d8d8 accent

Ink, by share of text set in it

49.2%
36.9%
9.4%
49.2% #2d2929 body and headings
36.9% #ffffff reversed on dark
9.4% #666666 emphasis
2.7% #000000 emphasis
1.9% #090a0b emphasis

Imagery, by share of the page it covers

17.8% photograph, the rest is surface

Typography

sans-serif · everything

Brown

of all text on the page

100% sans-serif

Ecommerce components, rebuilt to spec

Add to cart
Type
Brown 12px / 400 / 0.3px tracking / uppercase
Color
rgb(255, 255, 255) on rgb(0, 0, 0)
Shape
0px radius, 15px 20px padding, 40px tall
Width
421px as rendered
Product card
Grid
23 across, 284px wide
Image
0.8 : 1 crop, cover