Minimal beauty-editorial — not the all-pink brand its reputation implies. A plain white canvas with black type set entirely in Apercu at a single regular weight (400), where hierarchy comes from size, case and whitespace rather than weight: headlines are small (20/28), nav is 12px UPPERCASE, body 16px, and the "Glossier." logotype is a custom slanted wordmark. Full-bleed product and lifestyle photography carries all the colour and mood, with white content cards floated over it (small headline, body and a flat button). Buttons are understated flat sharp rectangles — pale grey #e8e8e8 or white with black text, radius 0px, 40px tall, +0.03px tracking — with no shadows. The famous "Glossier pink" survives only as one soft accent #f6e3e6; colour otherwise arrives through photography and bold seasonal campaign blocks (electric blue #0600ff, orange #fa4200), never decorative chrome. Everything is flat and photo-led, structured with hairlines and generous whitespace.
Browse Glossier in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: glossier.com (live DOM, computed styles), 2026-07-25 (desktop 1512px, AU store). Coverage: home. Account: needs-dashboard. Responsive: breakpoints not captured. Motion: hero carousel only; not captured in detail.
Glossier's site is minimal beauty-editorial: a plain white canvas, black type set entirely in Apercu at a single regular weight, and full-bleed product/lifestyle photography that carries all the colour and mood. The chrome is almost invisible — small uppercase nav, thin hairlines, sharp-cornered flat buttons in pale grey — so the imagery and the product do the talking. The famous "Glossier pink" survives only as one soft accent (#f6e3e6) among bolder seasonal campaign blocks (electric blue #0600ff, orange #fa4200); it is no longer the whole identity. Content sits in white/translucent cards floated over the photography, everything is flat with barely-there shadows, and the overall feeling is calm, clean and grown-up. Feels: minimal, clean, editorial, understated.
| Token | Hex | Role / usage |
|---|---|---|
| black | #000000 | Primary text, headlines, nav, buttons |
| gray-800 | #333333 | Strong secondary text |
| gray-600 | #666666 | Secondary text |
| gray-550 | #555555 | Tertiary text |
| gray-500 | #767676 | Muted / captions |
| gray-300 | #b3b3b3 | Faint / disabled |
| white | #ffffff | Text on photography / on dark |
| Token | Hex | Role / usage |
|---|---|---|
| white (canvas) | #ffffff | Page background, cards |
| gray-50 | #fafafa | Light section |
| gray-75 | #f7f7f7 | Inset panels |
| gray-100 | #f0f0f0 | Hover / inset |
| gray-150 | #e8e8e8 | Button fill, dividers |
| ink | #464545 | Occasional dark block |
| Token | Hex | Role / usage |
|---|---|---|
| Glossier pink | #f6e3e6 | Soft pink accent block (heritage) |
| electric blue | #0600ff | Bold campaign block / link |
| orange | #fa4200 | Bold campaign block |
| sale red | #d30000 | Sale pricing |
Rule: chrome is black/white/grey; colour arrives through photography and bold seasonal campaign blocks, not decorative UI. Pink is one soft accent, not the identity.
Apercu — the single family across the whole site (headlines, body, nav, buttons), almost always weight 400.Apercu Mono — occasional monospace detail.| Role | Family | Size/Line | Weight | Tracking | Case |
|---|---|---|---|---|---|
| Card headline (h2) | Apercu | 20 / 28 | 400 | normal | sentence |
| Product title | Apercu | 14 / 19.6 | 400 | normal | sentence |
| Body | Apercu | 16 | 400 | normal | sentence |
| Nav | Apercu | 12 / 19.6 | 400 | normal | UPPERCASE |
| Eyebrow | Apercu | 12 | 400 | +0.04px | sentence/upper |
| Button | Apercu | 14 | 400 | +0.03px | sentence |
Patterns: one family, one weight (400) — hierarchy comes from size, case and whitespace, not weight. Headlines are unusually small (20px). The "Glossier." logotype is a custom slanted wordmark (rendered as artwork).
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.