What is Glossier's primary brand color?

Glossier doesn't have a brand color in the conventional retail sense. The dominant token across the homepage is pure black (`#000000`) at a text-count of 951 and border-count of 938, paired with a true white canvas (`#ffffff`). The one chromatic moment is an electric ultramarine pull-tag (`#0600ff`) that appears 3 times on the entire page, scoped to the `you smell like vacation` floating badge over the hero beach photograph. The primary `Glossier You` CTA is a light-gray fill (`#e8e8e8`) with a 1px black border, not the saturated pink most beauty brands ship as their primary.

What typography does Glossier use, and what should I use if Apercu isn't available?

Glossier runs Apercu across every text role at weight 400 with `Gill Sans` as the historic in-house fallback. The system also uses Apercu Mono for uppercase category caps and Apercu Pro for a small set of micro-labels and the email-stepper input. Display tops out at just 20px on the homepage hero, body copy sits at 14px / 19.6px, and category caps render in Apercu Mono uppercase at 12px / 16.8px. There is no bold weight anywhere in the chrome. Apercu is commercially licensed from Colophon Foundry. If unavailable, Inter is the closest open-source substitute — geometry and x-height match within ~3% at body sizes, but you'll need to add a monospace pair (JetBrains Mono works) for the category-cap role.

Why does Glossier use zero border-radius on every component?

The system's corner radius vocabulary is effectively one value: `0px`. Every button, every input, every product tile, every lookbook tile, every nav rectangle, and every footer cell renders as a hard-cornered rectangle. The only `50%` rounded element in the extracted chrome is the small numeric dot on the cart icon. The 0px discipline is the entire identity move — it reads like architectural store-window signage rather than the soft pill-corner aesthetic of most direct-to-consumer beauty brands. Introducing a 4px or 8px radius anywhere would soften the system into category default. Hold the line at 0px.

When should I use the electric ultramarine accent?

Electric ultramarine (`#0600ff`) is a scoped voltage, not a general-purpose accent. The extraction shows it appearing exactly 3 times on the entire homepage — all on a single floating pull-tag (`you smell like vacation`) overlaid on the hero beach photograph. Use it for one promotional badge per page, layered over photography, never as a primary CTA fill, never as a hairline, never as a heading color. The whole reason it carries weight is that the rest of the chrome is monochrome — the moment the blue spreads to a second component, the voltage flattens. Treat it like a magazine cover-line, not a brand color.

Can I use this DESIGN.md to build my own React beauty storefront?

Yes — drop the file into Claude, Cursor, or any AI tool that reads structured design tokens and the agent reproduces Glossier's restraint (0px corners, monochrome chrome, single electric-blue voltage, Apercu at weight 400 everywhere) rather than a generic beauty-category theme. Reference tokens directly when you want one specific value: `{colors.primary}` resolves to `#0600ff`, `{rounded.none}` to `0px`, `{typography.hero-h2}` to Apercu 20px / 400 / 1.4 leading, and `{colors.surface-pink}` to the merged-cluster pink wash (`#f6e3e6`) that backs the lookbook tiles.

What's missing from this DESIGN.md spec?

Several surfaces aren't captured: the PDP (product detail page) typography hierarchy beyond the homepage tile, the cart drawer and full checkout flow, the editorial blog (Into The Gloss) which uses a separate type system with serif headlines, the loyalty / rewards member area, the international currency-picker dropdown, hover-state colors per system policy, form-validation error states, and the full Apercu weight ramp (the spec only documents weight 400 which is the only weight shipped in the chrome). The extracted color palette runs at 8 clustered hexes from 10 raw values — the system is genuinely near-monochrome, not under-extracted.

Glossier Design System

Glossier's design system as a DESIGN.md file.

About Glossier DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source glossier.com

E-commerce & Retail

Glossier's site is a near-monochrome beauty store-window. The canvas is pure white (`#ffffff`), the ink is pure black (`#000000`) at a text-count of 951, the dividers are black at a border-count of 938, and the entire homepage carries one chromatic moment: an electric ultramarine pull-tag (`#0600ff`) over a beach photograph that reads `you smell like vacation`. Type runs Apercu at weight 400 across every role — the hero `you smell good.` headline at 20px, body copy at 14px / 19.6px leading, nav links at 14px / 20px with `0.03px` tracking, and category caps in Apercu Mono uppercase at 12px / 16.8px. There is no bold weight anywhere in the chrome. The corner radius vocabulary is one value (`0px`) plus a single `50%` circle for the cart-count dot. Buttons are not pill-shaped, cards are not rounded, photography sits in unsoftened rectangles. The brand looks like a magazine product spread under store-window glass.

This page packages the system into a single DESIGN.md file written to the Google Labs open specification. Inside: 18 color tokens grouped into surface, ink, hairline, and brand-voltage buckets — every hex extracted from the live site, with the merged-cluster variants (`#f7f7f7`, `#f0f0f0`, `#f6e3e6`, `#e9e9eb`, `#efefef`) preserved as discrete surface roles; 11 Apercu typography tokens covering display, body, navigation, category caps, and the Apercu Mono micro-label; a 7-step rounded vocabulary that's effectively two values (`0px` for everything, `50%` for the cart dot); a 7-step spacing scale anchored on the site's observed `4px`, `8px`, `16px`, `20px`, `60px` rhythm; and 18 component entries covering the `Glossier You` CTA, the floating `you smell like vacation` blue pull-tag, the product tile, the lookbook tile, the email-capture input, the cart icon, the top nav, and the footer link cluster.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Glossier's restraint — the 0px corners, the single electric-blue voltage, the 20px display cap, the weight-400-only Apercu chrome — rather than inventing a beauty-category theme with rounded pink CTAs. Reference tokens directly in Tailwind config or CSS variables when you want one specific value; every hex, font, radius, and spacing entry is a quoted literal you can paste into a `theme.extend` block. The reason this system rewards study is the typographic discipline: most direct-to-consumer beauty brands turn the dial up to weight 700 and pink CTAs, and the chrome ends up shouting. Glossier holds Apercu at weight 400, caps display at 20px, and lets the product photography carry every screen.

What makes it distinct

Zero corner radius everywhereevery button, input, card, and tile sits at `0px`, with the only `50%` circle reserved for the cart indicator dot
Single voltage of electric ultramarine`#0600ff` appears 3 times on the entire homepage, scoped to one hero pull-tag over photography
Display caps at 20pxthe homepage h2 (`you smell good.`) sits at Apercu 20px / 400, smaller than most SaaS body copy
Apercu at weight 400 across every roledisplay, body, nav, and CTAs all share the same regular weight, no bold anywhere in the chrome
Light-gray filled CTAsthe primary `Glossier You` button is `#e8e8e8` with a 1px black border, inverting the convention of a saturated fill

Live at glossier.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

glossier.com

Explore Glossier

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Glossier design system FAQ

Common questions about Glossier's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Glossier — official site

The live Glossier storefront that this DESIGN.md was extracted from on 2026-05-13.

Use Glossier in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→