A near-monochrome editorial beauty system — white canvas, black Apercu type set small and light, one electric blue and a whisper of pink, on shapes kept square and flat.
Apercu, Glossier's proprietary neo-grotesque — substituted here with Hanken Grotesk. Hierarchy is built almost entirely through size, in a narrow 12–28px band, with weight rarely above regular.
Product cards are borderless and flat — separated by whitespace, not shadow. Imagery sits in soft-pink-to-grey tiles, with type kept small beneath.
A roughly 8px base with generous large steps (40px, 64px) that create the open, gallery-like rhythm Glossier is known for.
Square by design. Radii barely exist — a 2–3px hint on cards and inputs, zero on primary buttons, with a 50px pill kept for small badges only.
| Name | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Single-column grid, hero stacks, slim uppercase nav collapses to a menu toggle. |
| Tablet | 768–1023px | Product grids drop to 2-up; generous side padding preserved. |
| Laptop | 1024–1279px | Full 3–4-up gallery grids return; whitespace rhythm widens. |
| Desktop | ≥ 1280px | Max 1200px content frame, centered, with the type and chrome unchanged. |
Because the type is already small and the chrome already sparse, the mobile collapse is gentle — the visual language stays black-on-white, flat, and square at every width.
Sample content — Glossier doesn't sell tiered plans, but this demonstrates the card and pricing pattern in the brand's flat, square language.
Sample content — a data-table pattern rendered in Glossier's hairline-and-whitespace style.
| ID | Product | Shade | Status | When |
|---|---|---|---|---|
| #GL-4821 | Boy Brow | Brown | Delivered | Jun 28 |
| #GL-4820 | Cloud Paint | Beam | Delivered | Jun 21 |
| #GL-4819 | Balm Dotcom | Original | Shipped | Jun 19 |
| #GL-4818 | Futuredew | — | Processing | Jun 18 |
| #GL-4817 | Ultralip | Portrait | Delivered | Jun 11 |
Sample content — sign-in and create-account forms in the brand's flat, sharp-cornered input style.