Glossier: Glossier beauty e-commerce landing with editorial category grid and email-capture modal
Glossier's landing opens with a dark full-bleed Boy Brow mascara hero (rows of black product tubes against a charcoal field) interrupted by a centered white email-capture modal ("Some light beach reading") with a beach photo and pink "you smell like vacation" script. Below, the signature element is a flush five-tile category mosaic (Makeup / Fragrance / Skincare / Body / Merch) of soft editorial lifestyle photography with no gutters, followed by a clean light-gray best-seller product carousel and a pale-pink mega-footer carrying a complete alphabetized product index plus a hand-drawn smiley and waving-hand doodle.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/inspiration/glossier-glossier-beauty-e-commerce-landing-with-editorial-category-grid-and-email-capture-modal.
Palette
Fonts
Page types
UX patterns
UI elements
Context
More from Glossier
- Hero — Dark Boy Brow hero with email-capture modal
- Gallery / Showcase — Five-tile editorial category mosaic
- Gallery / Showcase — Get the Look three-image grid
- Testimonial / Social Proof — 'Glossier you' story panel with reviews
- Footer — Mega-footer with full product index and doodles
- CTA / Sign-up — Pink email signup band
- Gallery / Showcase — Shop All best-seller product carousel
- Feature — Two-up fragrance and makeup set blocks