# Glossier — DESIGN.md

## Overview
Glossier matured. The brand still owns its signature millennial pink (`#fbe1d6`) but the 2024+ rebrand pairs it with a sober monochrome ink and an editorial type system that reads more like a beauty magazine than an Instagram-era startup. Display is a custom serif (Glossier Sans/Display) with magazine-weight pull-quotes; body is a humanist sans. Pink is now a surface tone, not a button color.

## Color
- **Primary:** `#000000` — Editorial Black (used for type and primary CTAs)
- **Canvas:** `#ffffff` — White
- **Surface signature:** `#fbe1d6` — Glossier Pink (a tinted band, not a button color)
- **Surface alt:** `#f5efe7` — Cream
- **Accent (lip / signature):** `#c24a3c` — Glossier Red (used on `You` lipstick and select brand moments)
- **Ink:** `#000000`
- **Body:** `#2a2a2a`
- **Hairlines:** `rgba(0,0,0,0.10)`

## Typography
- **Display:** Glossier Display (custom serif) / GT Sectra, weight 400, tracking -0.01em, sizes 56-88px
- **Body:** Glossier Sans / Söhne, weight 400, 15-16px base, 1.55 line-height
- **Caption / nav:** Söhne caps at 11px / weight 500 / 1.8px tracking — uppercase nav labels

## Spacing & rhythm
4-base (4/8/16/24/32/48/72). Section padding 72-96px. Product grids run 4-up at desktop. Hero band uses asymmetric splits with large product imagery left, type stacked right.

## Motion signature
220ms ease-out on hover; signature is the slow color-tone wash on hover (a button gradient-shifts to slightly warmer pink). Product reveal carousels glide horizontally at 600ms ease-in-out.

## Components observed
- `pink-band-tinted` (signature pink as full-bleed section background)
- `product-card-clean-white` (single product photo on white, serif name + price below)
- `editorial-essay-card` (full-bleed photo, serif title, byline)
- `shade-swatch-row` (round color chips with shade names in serif)
- `cta-button-black-fill` (true black, square, white type)
- `customer-photo-grid-ugc` (real customers, captioned, no influencer chrome)

## Trademark signals
- Pink as surface, never as button — the maturity move
- Serif display in beauty (an industry of geometric sans) — editorial differentiator
- All-caps tight-tracked navigation — magazine-masthead cadence
- True-black CTAs on white — refuses the brand-tone-button trap
- Product names set in serif at large size — names treated like editorial headlines

## What they DON'T do
- No pink buttons (the trap of pink-everywhere branding the 2017-era Glossier fell into)
- No emoji in product copy or microcopy
- No saturated rainbow gradients
- No influencer-style aesthetic photography — real customers only on UGC grids
- No urgency / countdown / scarcity marketing chrome

## Exemplar pages
- https://www.glossier.com/
- https://www.glossier.com/products/you
- https://www.glossier.com/pages/about
- https://www.glossier.com/collections/all

## When to reference
Reach for Glossier when the user wants a beauty or consumer brand surface that has aged out of millennial-pink-as-button into editorial-pink-as-atmosphere. The pink-band-tinted + serif-display + true-black-CTA combination is appropriate for brands that want warmth without girlishness, or for any consumer product wanting to read like a magazine more than a Shopify storefront.
