# Glossier — Marketing Site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Text
| 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 |

### Surfaces
| 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 |

### Accent (campaign / seasonal)
| 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.

## 3. Typography Rules

- `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).

## 4. Component Stylings

### Buttons — flat, sharp
- **Primary/secondary**: bg pale grey `#e8e8e8` or white `#ffffff`, text black, radius `0px` (sharp), height `40px`, padding `8px 16px`, Apercu 14px/400 with tiny +0.03px tracking. No borders, no shadow — understated flat rectangles.

### Cards / content overlay
- White (or translucent white) card floated over full-bleed photography: small headline + body + a flat button. Sharp corners, no shadow.

### Nav
- White header, "Glossier." logotype left, centered uppercase nav (Skincare, Makeup, Balms, Body, Fragrance, Glossier Goods, Sets, Shop All) at 12px, right icons (search, region, Stores, Log in, Bag). A black utility bar with a rotating campaign message above.

### Product tiles
- Photo tile + 14px Apercu title + price; flat, minimal captions.

### Inputs
- Not deeply captured; hairline-bordered, sharp.

## 5. Layout Principles

- Full-bleed product/lifestyle photography heroes with an overlaid white content card (headline + body + button), typically anchored left.
- Rotating hero carousel (utility-bar arrows/pause control).
- White canvas with generous whitespace; grids of product tiles.
- Section rhythm alternates white with occasional pale-grey or bold seasonal campaign bands.

## 6. Depth & Elevation

- Radii: `0px` on buttons; tiny `2–3px` on minor elements; occasional `17–20px` / `50px` on specific chips/icons.
- Elevation: essentially flat and photo-led; only whisper-soft shadows (`rgba(0,0,0,.05) 0 -1px 0`) where present.
- Structure comes from photography, whitespace and hairlines, not shadows.

## 7. Motion

- Hero image carousel with prev/next/pause controls in the utility bar. Otherwise restrained. Exact durations/easings not captured.

## 8. Backgrounds, Effects & WebGL

- Full-bleed product/lifestyle **photography** as heroes and tiles — the primary source of colour and mood.
- Bold flat colour blocks (electric blue `#0600ff`, orange `#fa4200`, soft pink `#f6e3e6`) for seasonal campaign sections.
- No CSS gradients (beyond image overlays), canvas or WebGL. Flat, image-led surfaces.

## 9. Do's and Don'ts

### Do
- Keep the canvas white with black type in Apercu at a single weight (400); build hierarchy from size, case and whitespace.
- Lead with full-bleed product/lifestyle photography; float white content cards over it.
- Make buttons flat pale-grey/white sharp rectangles (radius 0px, 40px tall) with tiny +0.03px tracking.
- Set nav in 12px UPPERCASE Apercu.
- Reserve colour for photography and bold seasonal campaign blocks; use pink `#f6e3e6` only as a soft accent.
- Keep everything flat with hairlines and whitespace, not shadows.

### Don't
- Don't make everything pink — pink is one soft accent, not the identity.
- Don't add a second type family or bold weights; it is Apercu 400 throughout.
- Don't round the buttons or add shadows; controls are flat sharp rectangles.
- Don't crowd the layout; whitespace and photography lead.
- Don't introduce decorative colour into the chrome.

## 10. Responsive Behavior

- Not captured (desktop 1512px only). A region modal and cookie banner are present; the site redirects to a localized store (e.g. /en-au).

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` · Text `#000000` · Muted `#666666` · Button fill `#e8e8e8` · Pink accent `#f6e3e6` · Campaign blue `#0600ff`
- Font: `Apercu` (one family, weight 400) · Body 16px · Card headline 20px · Nav 12px UPPERCASE · Radius 0px control · Button height 40px
- Buttons: pale-grey `#e8e8e8` / white flat, black text, sharp 0px, +0.03px tracking · Flat, photo-led, whisper shadows only

<glossier_design_language>
Use the Glossier design language: a plain white canvas with black type set entirely in Apercu at a single regular weight (400), where full-bleed product and lifestyle photography carries all the colour and mood. Hierarchy comes from size, case and whitespace rather than weight &mdash; headlines are small (20/28), nav is 12px UPPERCASE, body 16px, and the "Glossier." logotype is a custom slanted wordmark. Content sits in white (or translucent-white) cards floated over the photography, each with a small headline, body and a flat button. Buttons are understated flat sharp rectangles &mdash; pale grey `#e8e8e8` or white with black text, radius 0px, 40px tall, +0.03px tracking &mdash; with no borders or 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, not shadows. Feels: minimal, clean, editorial, understated. Avoid: making everything pink, a second type family or bold weights, rounded or shadowed buttons, decorative colour in the chrome, and crowded layouts.
</glossier_design_language>