Skip to main content

← The UX Guide Vol. 1: Luxury Ecommerce

beauty · Shopify ·

Tatcha

San Francisco skincare brand founded by Vicky Tsai, drawing on Japanese ingredients and rituals in products such as The Water Cream and its rice based cleansers. Unilever acquired it in 2019.

The pages

desktop1440 x 900

Tatcha homepage on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Homepage
Tatcha collection: cyos on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Collection: CYOS
Tatcha product page on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Product page

mobile390 x 844

Tatcha homepage on mobile, Shopify luxury beauty storefront captured at 390 x 844
Homepage
Tatcha collection: cyos on mobile, Shopify luxury beauty storefront captured at 390 x 844
Collection: CYOS
Tatcha product page on mobile, Shopify luxury beauty storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

68.1%
20.3%
8.7%
68.1% #faf9f6 page
20.3% #2e2d2d secondary surface
8.7% #ffffff panels and cards
2.7% #f0efed panels and cards
0.3% #141414 dark bands

Ink, by share of text set in it

71.1%
19.5%
71.1% #141414 body and headings
19.5% #ffffff reversed on dark
5.1% #1f1f1f emphasis
2.3% #2c2c2c emphasis
1.5% #000000 emphasis
0.4% #080912 emphasis

Imagery, by share of the page it covers

25.3% photograph, the rest is surface

Typography

sans-serif · everything

Siaga

serif · accent

Victor Serif

of all text on the page

82% sans-serif18% serif

The icon set

cart
search
account

Ecommerce components, rebuilt to spec

Add to cart
Type
Siaga 14px / 300
Color
rgb(255, 255, 255) on rgb(20, 20, 20)
Shape
30px radius, 0px padding, 44px tall
Width
510px as rendered
Product card
Grid
4 across, 356px wide
Image
1 : 1 crop, contain