Sephora Design System

Sephora's marketing chrome opens with the most identifiable header strip in the beauty-retail category: a flush-black band running full-bleed across the top of the page, with white nav labels (New / Brands / Holiday / Beauty Offers / Gifts) flanking the centered Sephora wordmark and a thin promotional sub-band sitting beneath it. Below that band the page returns to pure white floor and a 4-column product grid — every tile a white card with a centered packshot, a brand name above the product name, a price, and a row of star ratings — and the page's only chromatic moments are the brand red (#cf112c) round CTA pill on the rewards-program promo block and the seasonal banner-tile backgrounds further down the page. Where Ulta paints its marketing surfaces in heavy orange-and-warm-photography, and where Glossier leans into pale pink as a constant ambient tone, Sephora keeps the chrome austere: black band on top, white floor beneath, red reserved for the single voltage moment.

The DESIGN.md file packages the captured surface into a machine-readable spec for React and AI tools. Inside: 11 color tokens drawn from the brand-red voltage tier (#cf112c with frequency 5, declared as `--color-error` and `--color-red`), a structural tier of pure black (frequency 2450 — the single most-used token across text, border, shadow, and the top-nav fill), pure white (frequency 811), a 60%-grey for secondary text (frequency 168, declared as `--color-gray`), a default link blue (#136bea with frequency 26, declared as `--color-link`), and a small set of seasonal accent tones for the banner tiles. Twenty-one typography tokens run Helvetica Neue exclusively across every display, body, button, and nav surface, with the single Georgia serif tier (28px / 400) reserved for the the brand-mission tagline brand tagline overlay. Three radius values dominate: 4px on cards (frequency 136), 9999px pills on the primary CTA (frequency 64), and a rare 6px on a single card surface.

Feed this file to Claude or Cursor and it will reproduce Sephora's specific moves: the flush-black top-nav band as the page's first chromatic anchor, Helvetica Neue everywhere with the all-caps 10px / 700 micro-label tier for category headers ("CHOSEN FOR YOU", "BRAND WE LOVE"), 4px rounded white product cards with no border and no shadow, and the round brand-red CTA pill reserved as the single voltage moment. The token references resolve cleanly — `{colors.brand-red}` for the voltage, `{colors.ink}` for the top-nav fill, `{typography.button-primary}` for the all-caps round pill — so the AI never has to invent a value. The one move worth borrowing only if you have a strong photography pipeline: the willingness to put NO chromatic accent inside the product grid. Sephora gets away with it because the product packaging is the color.