Glossier

How it works

hero:

Full-width image of model holding product with massive white serif logotype overlaid at 50% opacity across lower half, creating text-as-image integration; small modal card ('you smell good') positioned top-left as micro-CTA.

layout:

Header navigation fixed across top; hero image full-width with overlaid type; product grid deployed in 4-column equal-width modules with consistent card height; alternating 50/50 image-text blocks below fold (testimonial + video; circular review avatars + product info); footer organized as dense columnar link structure with pale pink background section.

type:

Serif logotype (likely custom or Display weight) set at massive scale; sans-serif navigation and body copy in tight tracking; product names in smaller sans with color-coded category labels; stat numerals and prices in minimal sans; generous leading in testimonial blocks creates breathing room against dense footer.

colors:

Warm orange accent bar across header navigation; product cards use subtle tonal backgrounds (pale pink, off-white, cream) for differentiation; orange call-to-action buttons appear consistently at grid module footers; monochromatic product photography against white dominates visual hierarchy.

distinctive:

Translucent white serif brand logotype layered directly over hero photography rather than placed beside it—the type becomes a semi-transparent graphic element that floats across the image, unifying typography and product imagery as a single compositional unit.