--- version: alpha name: Glossier website: "https://www.glossier.com" description: >- A near-monochrome beauty retail system anchored on a true white canvas (#ffffff) and pure black (#000000) — text count 951, border count 938 — with a single saturated voltage of electric ultramarine (#0600ff) reserved for the homepage hero pull-tag and a soft pink-tinted neutral (#faf2f4) carrying the lookbook tile washes. Type runs Apercu across every role at weight 400 with an Apercu Mono micro-label for category caps; display tops out at just 20px on the homepage hero, body sits at 14px / 19.6px leading, and the chrome contains exactly one radius value (`0px`) — every rectangle, every button, every input, every card. The product reads like a magazine product spread under store-window glass: photography carries the page, type whispers underneath, and the only chromatic moment in the entire chrome is one electric-blue badge over a beach photograph. seo: title: "Glossier Design System for React — Apercu, electric blue #0600ff, 18 components" metaDescription: "Glossier's design system as a DESIGN.md file. Apercu, electric ultramarine #0600ff, 18 colors, 18 components. For React, Next.js, and AI tools." highlights: - "Zero corner radius everywhere — every 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 20px — the homepage h2 (`you smell good.`) sits at Apercu 20px / 400, smaller than most SaaS body copy" - "Apercu at weight 400 across every role — display, body, nav, and CTAs all share the same regular weight, no bold anywhere in the chrome" - "Light-gray filled CTAs — the primary `Glossier You` button is `#e8e8e8` with a 1px black border, inverting the convention of a saturated fill" tags: - "E-commerce & Retail" lastUpdated: "2026-05-13" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.glossier.com" title: "Glossier — official site" description: "The live Glossier storefront that this DESIGN.md was extracted from on 2026-05-13." questions: - id: "primary-color" title: "What is Glossier's primary brand color?" answer: "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." - id: "typography" title: "What typography does Glossier use, and what should I use if Apercu isn't available?" answer: "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." - id: "shape-system" title: "Why does Glossier use zero border-radius on every component?" answer: "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." - id: "blue-voltage" title: "When should I use the electric ultramarine accent?" answer: "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." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own React beauty storefront?" answer: "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." - id: "known-gaps" title: "What's missing from this DESIGN.md spec?" answer: "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." colors: primary: "#0600ff" canvas: "#ffffff" surface-soft: "#f7f7f7" surface-card: "#e8e8e8" surface-tile: "#f0f0f0" surface-pink: "#f6e3e6" surface-pink-wash: "#faf2f4" surface-active: "#efefef" ink: "#000000" ink-rich: "#040404" ink-deep: "#333333" text-on-dark: "#ffffff" body: "#000000" muted: "#666666" hairline: "#e8e8e8" hairline-soft: "#e9e9eb" border-strong: "#000000" on-primary: "#ffffff" typography: hero-h2: fontFamily: "Apercu, 'Gill Sans', sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 1.4 letterSpacing: "0" body-md: fontFamily: "Apercu, 'Gill Sans', sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.4 letterSpacing: "0" nav-link: fontFamily: "Apercu, 'Gill Sans', sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: "0.03px" body-sm: fontFamily: "Apercu, 'Gill Sans', sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.4 letterSpacing: "0.02625px" category-cap: fontFamily: "Apercu, 'Gill Sans', sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.63 letterSpacing: "0" textTransform: uppercase mono-cap: fontFamily: "'Apercu Mono', monospace" fontSize: 12px fontWeight: 400 lineHeight: 1.4 letterSpacing: "0" textTransform: uppercase caption: fontFamily: "Apercu, 'Gill Sans', sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.7 letterSpacing: "0.04px" micro-label: fontFamily: "Apercu, 'Gill Sans', sans-serif" fontSize: 12px fontWeight: 700 lineHeight: 1.17 letterSpacing: "0" textTransform: uppercase button-md: fontFamily: "Apercu, 'Gill Sans', sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.15 letterSpacing: "0.02625px" pro-display: fontFamily: "'Apercu Pro', Helvetica, Arial, sans-serif" fontSize: 32px fontWeight: 400 lineHeight: 1.2 letterSpacing: "0" pro-button: fontFamily: "'Apercu Pro', Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1 letterSpacing: "0" rounded: none: "0px" full: "9999px" circle: "50%" spacing: xxs: "1px" xs: "4px" sm: "8px" md: "10px" base: "16px" lg: "20px" xl: "60px" components: button-primary: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" borderColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "8px 16px" height: "40px" border: "1px" button-primary-active: backgroundColor: "{colors.surface-active}" textColor: "{colors.ink}" rounded: "{rounded.none}" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "7px 21px" border: "1px" button-text: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.none}" blue-pull-tag: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.mono-cap}" rounded: "{rounded.none}" padding: "4px 12px" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" height: "40px" rounded: "{rounded.none}" promo-bar: backgroundColor: "{colors.ink}" textColor: "{colors.text-on-dark}" typography: "{typography.body-md}" rounded: "{rounded.none}" height: "26.59px" nav-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" category-cap: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.category-cap}" rounded: "{rounded.none}" product-tile: backgroundColor: "{colors.surface-pink-wash}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "0px 0px 8px" product-tile-photo: backgroundColor: "{colors.surface-tile}" rounded: "{rounded.none}" lookbook-tile: backgroundColor: "{colors.surface-pink}" textColor: "{colors.ink}" rounded: "{rounded.none}" product-meta: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-md}" product-meta-mute: backgroundColor: transparent textColor: "{colors.muted}" typography: "{typography.caption}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.muted}" borderColor: "{colors.hairline}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "22px 8px 6px" height: "46px" border: "1px" cart-dot: backgroundColor: "{colors.ink}" textColor: "{colors.text-on-dark}" typography: "{typography.micro-label}" rounded: "{rounded.circle}" height: "14px" hairline-divider: backgroundColor: "{colors.hairline-soft}" height: "1px" footer-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.none}" --- ## Overview Glossier's site is a near-monochrome beauty store-window. The canvas runs pure white (`{colors.canvas}` — #ffffff), the ink is pure black (`{colors.ink}` — #000000) at a text-count of 951 and a border-count of 938 across the homepage, and the only chromatic moment in the entire chrome is a single electric-ultramarine pull-tag (`{colors.primary}` — #0600ff) that appears 3 times — all on the same `you smell like vacation` floating badge laid over a hero beach photograph. There is no second brand color, no decorative gradient, no atmospheric background. **Electric scarcity**: where most direct-to-consumer beauty brands ship a saturated pink or a millennial peach as the primary voltage, Glossier ships none — the saturated tone in the system is an electric blue that appears 3 times total. The voltage works precisely because the surrounding chrome is gray-and-white at 951:127 (text-count of `#000000` to bg-count of `#ffffff`). The moment that ratio softens, the blue stops reading as a magazine cover-line and starts reading as a button. Type runs **Apercu** (Colophon Foundry) at **weight 400 across every role** — the homepage `you smell good.` h2 at 20px, body copy at 14px / 19.6px leading, nav links at 14px / 20px with `0.03px` tracking, category caps in Apercu Mono uppercase at 12px / 16.8px. There is no bold weight anywhere in the chrome. The hero h2 at 20px is smaller than most SaaS body copy — the page leans on product photography and store-window symmetry for visual hierarchy rather than on type. The shape language is the most committed move in the system: **one radius value, `0px`, on every interactive surface**. Buttons, inputs, product tiles, lookbook tiles, nav rectangles, footer cells — all hard-cornered. The only `50%` element in the extracted chrome is the small numeric dot on the cart icon. **Key Characteristics:** - Single voltage: `{colors.primary}` (#0600ff) electric ultramarine appears exactly 3 times on the homepage, scoped to one floating pull-tag over photography. - Black-and-white chrome: `{colors.ink}` (#000000) holds 951 text occurrences and 938 borders; `{colors.canvas}` (#ffffff) carries 58 backgrounds — the system is a 7:1 ink-to-background ratio. - Zero corner radius: every button (`{component.button-primary}`), input (`{component.text-input}`), product tile (`{component.product-tile}`), and lookbook tile (`{component.lookbook-tile}`) sits at `{rounded.none}` (0px). The only `50%` element is `{component.cart-dot}`. - Weight-400-only Apercu: every typography role from `{typography.hero-h2}` (20px) down to `{typography.caption}` (12px) renders at weight 400 — there is no bold tier in the chrome. - Pink-tinted tile washes: `{colors.surface-pink}` (#f6e3e6) and `{colors.surface-pink-wash}` (#faf2f4) back the lookbook tiles and product cells — the only warm tone in an otherwise neutral palette. - Light-gray filled CTA: `{component.button-primary}` (`Glossier You`) uses a `#e8e8e8` fill with a 1px black border instead of the saturated-fill convention of beauty-category CTAs. - Apercu Mono uppercase caps: category labels render in Apercu Mono 12px / 16.8px uppercase (`{typography.mono-cap}`) — the only monospaced role in the system, used as section markers. - Compressed spacing rhythm: the dominant gap values are `4px` (count 33), `8px 16px` (count 29), and `16px` (count 18); section padding tops out at `60px` (count 4) — tighter than most marketplace sites. ## Colors ### Brand Voltage - **Electric Ultramarine** (`{colors.primary}` — #0600ff): frequency 3. Used as bg (3), text (0), border (0). The single chromatic accent in the entire chrome, scoped to the `you smell like vacation` floating pull-tag overlaid on the hero beach photograph. Treat it as a scoped voltage, not a general-purpose accent. ### Ink - **True Black** (`{colors.ink}` — #000000): frequency 2070. Used as text (952), border (939), gradient (176), bg (3). The dominant token on every page — body text, headlines, nav links, dividers, the promo-bar fill, and the cart dot. Never softened to dark gray. - **Rich Black** (`{colors.ink-rich}` — #040404): frequency 0 (declared in `--rc-color` CSS variable). Reserved for the Klaviyo review module's active color — a near-imperceptible deepening from `#000000`. - **Ink Deep** (`{colors.ink-deep}` — #333333): frequency 1. Used as bg (1). A near-black grade reserved for a single review-card surface; not a general-purpose text color. ### Surface - **Canvas** (`{colors.canvas}` — #ffffff): frequency 127. Used as bg (58), border (39), text (30). The default page floor. Glossier does not ship a dark mode on the public web. - **Surface Soft** (`{colors.surface-soft}` — #f7f7f7): clustered into the canvas family at extraction; used as the slightly-cooler near-white on the homepage product-band background. - **Surface Card** (`{colors.surface-card}` — #e8e8e8): frequency 18. Used as bg (16), border (2). The primary CTA fill (`Glossier You`) and the default hairline tone — same hex doing double duty as button surface and 1px divider. - **Surface Tile** (`{colors.surface-tile}` — #f0f0f0): clustered into `#e8e8e8` at extraction; the product-photo plate behind individual SKU shots. - **Surface Pink** (`{colors.surface-pink}` — #f6e3e6): clustered into the warm-gray family; backs the rust-pink lookbook tiles. - **Surface Pink Wash** (`{colors.surface-pink-wash}` — #faf2f4): frequency 1. Used as bg (1). The faintest warm wash in the system — the lightest pink-tinted neutral, applied to a single editorial cell. - **Surface Active** (`{colors.surface-active}` — #efefef): declared in `--rc-active-bg`. The Klaviyo review-module's active-state surface — a one-grade darker fill than `#e8e8e8` for pressed-state review chips. ### Hairline - **Hairline** (`{colors.hairline}` — #e8e8e8): same hex as `surface-card`. The default 1px border tone — input outlines, footer column splitters, product-card edges. - **Hairline Soft** (`{colors.hairline-soft}` — #e9e9eb): declared in `--kl-reviews-color-light-gray`. The lightest divider in the system, used for editorial body separators. - **Border Strong** (`{colors.border-strong}` — #000000): the 1px black border on the primary CTA — same token as `ink`, narrated separately because the role is a visible chrome line rather than text. ### Text - **Body** (`{colors.body}` — #000000): same hex as `ink`. The dominant running-text color. Glossier doesn't soften body text to dark gray the way most retail systems do; copy sits at pure black. - **Muted** (`{colors.muted}` — #666666): frequency 60. Used as text (29), border (25), bg (6). The placeholder color inside the email-capture input and the secondary-text grade for fine-print footer copy. - **Text on Dark** (`{colors.text-on-dark}` — #ffffff): white text over the promo-bar (`{component.promo-bar}`) and the cart-dot indicator. - **On Primary** (`{colors.on-primary}` — #ffffff): white text over the electric-blue pull-tag. ## Typography ### Font Family The system runs **Apercu** (Colophon Foundry) for every text role, with `Gill Sans` as the historic in-house fallback and a system stack underneath. A second face — **Apercu Mono** — appears only on uppercase category caps (`{typography.mono-cap}`). A third face — **Apercu Pro** — appears on a small set of micro-labels and one button. There is no separate display family. Apercu carries the entire scale at one weight: **400**. ### Hierarchy | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.pro-display}` | 32px | 400 | 1.2 | 0 | Single decorative span (`Glossier` watermark behind hero) | | `{typography.hero-h2}` | 20px | 400 | 1.4 | 0 | Homepage hero pull-text (`you smell good.`) | | `{typography.body-md}` | 14px | 400 | 1.4 | 0 | Default running text (count 96 — the dominant role) | | `{typography.nav-link}` | 14px | 400 | 1.43 | 0.03px | Top-nav links (count 88 — the workhorse nav role) | | `{typography.body-sm}` | 14px | 400 | 1.4 | 0.02625px | Anchor links inside body copy (count 20) | | `{typography.button-md}` | 14px | 400 | 1.15 | 0.02625px | `Glossier You` CTA label | | `{typography.pro-button}` | 14px | 400 | 1 | 0 | Single Apercu Pro button label | | `{typography.category-cap}` | 12px | 400 | 1.63 | 0 | Apercu uppercase section caps (count 10) | | `{typography.mono-cap}` | 12px | 400 | 1.4 | 0 | Apercu Mono uppercase category caps (count 6) | | `{typography.caption}` | 12px | 400 | 1.7 | 0.04px | Headings inside review tiles (count 10) | | `{typography.micro-label}` | 12px | 700 | 1.17 | 0 | Single bold uppercase span — the one bold instance in the chrome | ### Principles Display tops out at 20px. The hero h2 (`you smell good.`) at 20px / 400 / 1.4 leading is smaller than most SaaS body copy; the page leans on the beach photograph and the floating electric-blue pull-tag for visual hierarchy. Body copy at 14px / 19.6px is the dominant role, appearing 96 times. The single bold occurrence in the entire chrome is one `{typography.micro-label}` — a 12px / 700 uppercase span. Every other role is weight 400. **Weight as discipline**: where most beauty retail brands lean on weight 600–800 to signal upscale positioning, Glossier holds Apercu at weight 400 across every tier. The store-window typography reads as confidence by restraint — the brand trusts product photography to carry the page rather than typographic muscle. ### Note on Font Substitutes If Apercu and Apercu Mono are unavailable, **Inter** is the closest open-source substitute for the sans-serif family — geometry and x-height match within ~3% at body sizes. **JetBrains Mono** is the closest pair for the Apercu Mono category-cap role. Preserve `letterSpacing: 0.03px` on nav links and `letterSpacing: 0.02625px` on anchor links when substituting; both are signature Apercu metrics. ## Layout ### Spacing System - **Base unit:** 4px (with 1px micro-step on hairlines). - **Tokens:** `{spacing.xxs}` 1px · `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 10px · `{spacing.base}` 16px · `{spacing.lg}` 20px · `{spacing.xl}` 60px. - **Section padding (vertical):** `{spacing.xl}` (60px, count 4) for major homepage bands — tighter than typical SaaS marketing (80–96px) because the page is built around image grids rather than text bands. - **Button padding:** `8px 16px` (count 29 — the dominant gap value) on the primary CTA, with a 1px black border absorbing one pixel of internal whitespace. - **Gutters:** `{spacing.xs}` (4px, count 33) between product cells in the homepage grid — extremely tight, so adjacent product tiles effectively touch. - **Promo-bar height:** `26.59px` (declared in `--promo-bar-height`) — a fixed top-of-viewport announcement strip. ### Grid & Container - **Top-nav height:** `40px` (declared in `--header-height` as `2.5rem`). One of the shortest primary navs on a mainstream retail site. - **Product grid:** 4-up at desktop with 4px gutters between cells. Each product tile is a hard-cornered rectangle with the product photograph occupying the full cell width and a 3-line meta stack beneath. - **Lookbook grid:** alternating 1-up and 2-up rows of photography tiles with no internal padding — the photograph IS the tile. - **Footer:** multi-column link list at desktop, dense rows in `{typography.body-sm}` ink. ### Whitespace Philosophy The system gives editorial bands a modest 60px of vertical breathing room and compresses product grids to 4px gutters. The contrast is intentional: the page reads as "open editorial above, dense merchandising below," and the photography carries the visual weight rather than the chrome. ## Elevation The system has **zero shadow tiers**. No card hover float, no dropdown elevation, no modal shadow stack — the entire chrome runs flat. - **Flat (no shadow):** body, hero, footer, every editorial band, every product tile, every lookbook tile — 100% of surfaces. - **No card-hover lift:** product tiles do not gain a shadow on pointer hover; the underline / underline-thicken pattern handles state instead. - **No modal scrim documented:** the cookie/region picker is implemented as a centered card without an extracted scrim color. Depth comes from photography composition, the black-on-white surface separation, and product-photo cropping rather than from layered shadows. **Shadow absence as discipline**: the system reads as store-window flat because there is genuinely no elevation in the chrome — not even a 1px ambient shadow under the primary nav. ## Shapes The radius vocabulary is effectively **one value**. - `{rounded.none}` (0px) on every interactive surface, every container, every photo plate, every footer cell. - `{rounded.circle}` (50%) on exactly one element: the cart-count dot. - `{rounded.full}` (9999px) is declared as a fallback token for future pill-shaped components but is not used in the captured chrome. **0px as identity**: the corner-radius decision is the entire shape language. Where most beauty retail brands soften CTAs to 6–8px corners or pills, Glossier holds every rectangle at 0px. Introducing a single 4px-radius button anywhere on the page would soften the chrome into category default — the store-window flatness depends on the discipline. ## Components ### Buttons **`button-primary`** — Light-gray fill (`{colors.surface-card}` — #e8e8e8) with `{colors.ink}` text and a 1px black border. 0px radius, `8px 16px` padding, 40px height. The `Glossier You` CTA. The chrome's signature button — light-gray instead of a saturated fill, hard-cornered instead of pill. **`button-primary-active`** — The press state. Background flips to `{colors.surface-active}` (#efefef). No transform, no shadow change. **`button-secondary`** — White fill (`{colors.canvas}`) with ink text and a 1px ink border. Same 0px radius, `7px 21px` padding. Used for inverse CTAs on dark surfaces. **`button-text`** — Plain ink text, no surface, no border. Underlined on hover. Used for editorial "Show more" type links. ### Brand Voltage **`blue-pull-tag`** — Electric ultramarine fill (`{colors.primary}` — #0600ff) with white text in `{typography.mono-cap}` (Apercu Mono 12px uppercase). 0px radius, `4px 12px` padding. The single chromatic moment in the chrome — used exclusively as the floating `you smell like vacation` badge over the hero photography. ### Top Navigation **`top-nav`** — White surface, 40px height (the shortest primary nav in mainstream retail). Glossier wordmark flush left, category nav center, account + cart utilities flush right. No bottom shadow, hairline-only separator. **`promo-bar`** — Black fill (`{colors.ink}`) with white text in `{typography.body-md}`. 26.59px height (extracted from `--promo-bar-height`). Carries shipping-threshold messaging at the top of every page. **`nav-link`** — Ink text, 14px / 20px, `0.03px` letter-spacing. No underline at rest, underline on hover. **`category-cap`** — Ink uppercase label in `{typography.category-cap}` (Apercu 12px / 400 uppercase). Used as section markers above editorial bands. ### Product Tiles **`product-tile`** — A pink-wash card (`{colors.surface-pink-wash}` — #faf2f4) with 0px corners and `0px 0px 8px` bottom-only padding. Contains a full-width product photo above a 3-line meta stack (title, regular price, regular-only review count). **`product-tile-photo`** — The photo plate itself (`{colors.surface-tile}` — #f0f0f0 background visible where product is photographed in studio). **`lookbook-tile`** — A rust-pink editorial card (`{colors.surface-pink}` — #f6e3e6) holding a photograph and a tile-anchored heading. Same 0px corners, no padding — the photograph fills the tile. **`product-meta`** — Ink body line (`{typography.body-md}` — Apercu 14px / 400 / 1.4 leading), used for product titles. **`product-meta-mute`** — Muted gray (`{colors.muted}` — #666666) caption (`{typography.caption}` — 12px / 1.7 leading), used for "Regular & Refill" descriptors. ### Forms **`text-input`** — White surface (`{colors.canvas}`), 1px `{colors.hairline}` outline, 0px radius, 46px height, `22px 8px 6px` padding (asymmetric to accommodate the floating label above the input value). Placeholder text in `{typography.body-md}` muted (`{colors.muted}`). ### Cart & Misc **`cart-dot`** — A 14×14px circle (`{rounded.circle}`) with `{colors.ink}` fill and white numeric text in `{typography.micro-label}` (12px / 700 uppercase). The single rounded element in the extracted chrome. **`hairline-divider`** — A 1px line at `{colors.hairline-soft}` (#e9e9eb) used for editorial body separators. Lighter than the `{colors.hairline}` token used for input outlines. ### Footer **`footer-link`** — Plain ink text in `{typography.body-sm}` (Apercu 14px / 400 / 1.4 leading with `0.02625px` tracking). No underline at rest, underline on hover. Dense rows, tight `4px` vertical rhythm between links. ## Do's and Don'ts ### Do - Hold every interactive surface at `0px` corner radius. The store-window flatness is the entire identity move. - Reserve `{colors.primary}` (#0600ff) for one floating badge per page, layered over photography. Never use it for a primary CTA fill. - Keep Apercu at weight 400 across every text role. The single bold instance in the captured chrome is one 12px micro-label — there's no weight 700 tier for headlines. - Use `{colors.surface-card}` (#e8e8e8) with a 1px black border for the primary CTA. The light-gray fill is the brand signature. - Lean on product photography for hierarchy. The hero h2 at 20px is deliberately small — the photograph and the floating pull-tag pull the eye, not the type. ### Don't - Don't introduce a 4px or 8px radius anywhere — the chrome is `0px` on every surface, and softening one component breaks the store-window metaphor. The only `50%` element is the 14px cart-count dot. - Don't use `{colors.primary}` (#0600ff) for a CTA fill, a heading color, or a hairline. The voltage works precisely because it appears 3 times total; spreading it to a second component flattens the cover-line effect. - Don't ramp Apercu past weight 400 for headlines. Weight 600+ is the beauty-category default — Glossier's typographic confidence comes from holding 400 across every tier. The one weight-700 occurrence is a 12px uppercase micro-label, not a display weight. - Don't soften body text from pure `#000000` to a dark gray. The 951 text-count of `#000000` is what gives the chrome its store-window crispness; introducing `#333333` for body copy lowers contrast and feels like a different brand. - Don't add a shadow under product tiles or the top nav. The system has zero shadow tiers — depth comes from photography and surface separation, not from elevation. A `0 2px 6px rgba(0,0,0,0.04)` lift on hover will read as a generic e-commerce theme. - Don't replace Apercu Mono on category caps with a sans-serif. The mono caps are the only place a second typeface enters the system; collapsing them into Apercu sans removes the typographic counterpoint that makes the section markers legible against the body copy. ## Known Gaps - **Product detail pages (PDP):** the homepage tile is captured, but the full PDP typography hierarchy (variant selector, size stepper, "Add to bag" CTA placement) is out of scope. - **Cart drawer and checkout:** the cart-dot indicator is captured, but the slide-in cart drawer and the full checkout flow are not. - **Into The Gloss editorial:** Glossier's blog uses a separate type system with serif headlines and editorial photography — not represented in this DESIGN.md. - **Loyalty / rewards member area:** out of scope; the system's authenticated chrome isn't captured. - **Hover-state colors:** not documented per the global no-hover policy. Glossier's actual `:hover` styling on product tiles is an underline-thicken on the title; precise color extraction is unreliable. - **Form-validation states:** the email-capture input is documented at rest; error / success states are not visible in the captured surfaces. - **Full Apercu weight ramp:** the spec only documents weight 400, which is the only weight shipped in the chrome. The licensed family includes 100–800 weights but Glossier doesn't use them. - **International currency picker:** the localized site shows ₪ (ILS) shipping copy; the full currency-picker dropdown styling is not captured.