Cosmetics Website Design Examples

27 real sites · 674 sections

There are 27 cosmetics website designs here — live sites that sell makeup and cosmetics, including Glossier, Fenty Beauty, Summer Fridays, Kylie Cosmetics and Rare Beauty — cut into 674 sections. 100% use a light theme and 0% a dark one; the most common headline fonts are Apercu (1), Brown (1) and Futura pt (1). 9 of 27 open with a hero, 3 show pricing on the homepage and 5 carry testimonials.

At a glance

Sites: 27
Sections captured: 674
Light / dark: 100% light · 0% dark
Top heading fonts: Apercu (1), Brown (1) and Futura pt (1)
Accent colours: neutral 12red 6blue 4
Most common sections: features (25), showcase (14), call to action (13) and about (10)
Top industries: Fashion & Beauty (24)
Award winners: 0 of 27

What makes a good cosmetics website design

Cosmetics brands sell colour, texture and identity. Pages rely on swatches, shade finders, close-up product photography, looks built from several products and social proof from real faces.

What these 27 cosmetics websites have in common

Measured from the captures, not opinion — use it to plan a cosmetics website against what already works.

Sections they use

25 include features, 14 include showcase, 13 include call to action and 10 include about. 6 answer objections with an FAQ and 13 (48%) close with a dedicated call to action. Read top to bottom, the most common running order is hero → features → footer → team → showcase. Compare them side by side: features section examples, showcase section examples, call to action section examples.

Type and colour

Light layouts lead (100% vs 0% dark). Headlines are most often set in Apercu (1), Brown (1) and Futura pt (1). The most common accent hues are neutral (12), red (6) and blue (4). Every example lists its exact fonts and hex palette on its page.

Page length

The average homepage here is about 5,644px tall at desktop width — roughly 6 screens of scrolling, with Kylie Cosmetics the longest at 7,845px. Open any site to scroll the full-page capture and see where each section falls.

27 cosmetics website designs worth studying

Fenty Beauty — “Fenty Beauty by Rihanna was created with promise of inclusion for all women. With an unmatched offering of shades and colors for ALL skin tones, you'll never look…” 29 sections, headlines in Brown, light theme, palette #000000 and #ffffff; the homepage runs features → showcase → features → team.
Rare Beauty — “Rare Beauty is makeup made to feel good in, without hiding what makes you unique. Shop airy, breathable formulas that are easy to apply, blend and build.” 27 sections, headlines in Ogg, light theme, palette #fdfbf8 and #000914; the homepage runs call to action → features → footer.
Anastasia Beverly Hills — “Discover the latest in beauty at Anastasia Beverly Hills. Explore our unrivaled selection of beauty products and makeup.” 31 sections, headlines in Proxima nova, light theme, palette #111111 and #fbfbfb; the homepage runs call to action → statement → features → about.
Morphe — “Be Unapologetically You and shop Morphe.com for iconic eyeshadow palettes, makeup brushes and lipsticks. A beauty brand created for the creators.” 32 sections, headlines in Monument, light theme, palette #ece8e5 and #53565a; the homepage runs hero → features → showcase → features.
Merit Beauty — “MERIT is a clean, vegan, cruelty-free minimalist makeup brand. We are the antidote to the oversaturated world of beauty. Safe for Body + Skin + Planet.” 10 sections, headlines in Akzidenz grotesk, light theme, palette #000000 and #ffffff; the homepage runs call to action → about → features → footer.
Kylie Cosmetics — “Shop Kylie Cosmetics by Kylie Jenner, Kylie Jenner Fragrances and Kylie Skin featuring award-winning makeup, fragrance, and skincare that's clean, vegan, cruelty-free, and dermatologist-tested.” 11 sections, headlines in Univers LT, light theme, palette #ffffff and #393939; the homepage runs showcase → testimonials → showcase → features.

How to use these references for a cosmetics website

Show product in use — swatches on several skin tones, before/after, a shade finder — before any claims copy. Bundle products into looks so the grid sells a routine, not a single item. Start with Glossier, Fenty Beauty and Summer Fridays, open each site at full size and compare their features and showcase sections; every reference carries its palette, fonts and a build prompt you can paste into your editor.