--- version: alpha name: "Sephora" website: "https://www.sephora.com" description: >- A beauty retailer whose marketing chrome is built on a near-monochrome black-and-white floor with a single saturated brand red (#cf112c) reserved for emphasis blocks and the round CTA pill. The system runs Helvetica Neue across every display, body, button, and nav tier (a Georgia serif appears once for the editorial the brand-mission tagline tagline overlay), with a 4px corner radius on cards (frequency 136) and a fully-rounded 9999px pill on the primary button (frequency 64). The signature move is the black-band top nav: a flush-black header strip that runs full-bleed across the page with white nav labels, sitting above a white product-grid floor. Every product card uses the same 4px rounded white surface with no border and no shadow — depth comes from the product photography itself. seo: title: "Sephora Design System for React — brand red #cf112c, Helvetica Neue, 13 components" metaDescription: "Sephora's marketing chrome captured as a DESIGN.md spec. Black-band top nav, Helvetica Neue across every tier, brand red #cf112c reserved for the round CTA pill, 4px card radius, product-photography-led grid. Tokens for React, Next.js, and AI coding tools." highlights: - "Black-band top nav — the header strip is full-bleed black #000000 with white labels and a centered logo, the most identifiable chrome moment in the entire system" - "Single brand red voltage — #cf112c appears as the round CTA pill and as the error / promotional emphasis fill; reserved, never spread across the page chrome" - "Helvetica Neue across every tier — 10-32px display, 12-16px body, 12px bold buttons in all-caps for the highest-emphasis CTAs, with Georgia serif only on the brand-tagline overlay" - "4px card radius default — frequency 136, the universal product-card and content-card rounding; pills at 9999px reserved for the primary CTA only" - "Product-photography-led grid — every tile is a white card with a centered packshot, a product name, a price, and a star-rating row; no chromatic backgrounds, no lifestyle photography on the homepage chrome" tags: - "E-commerce & Retail" lastUpdated: "2026-05-18" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - 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.sephora.com" title: "Sephora — official site" description: "Sephora's public marketing site — the source of truth for the live tokens captured in this file." - 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." questions: - id: "primary-color" title: "What is Sephora's primary brand color?" answer: "Sephora's brand voltage is a saturated brand red (#cf112c), wired into the CSS as --color-red and (overloaded) --color-error. It appears on the captured page exactly 5 times — 3 as background fills (the round CTA pill on the rewards-program promo block, the in-page seasonal banner tile, and the 'Save more on the app' promotional strip), 1 as text, and 1 as border. The brand color shares the --color-error variable name with the form-validation error tone, which is unusual — most systems hold a brand color separate from a semantic error color, but Sephora collapses both into the same hex. The dominant non-monochrome color on the page is actually black (frequency 2450), used as the top-nav band fill and as every border and divider rule; the red is reserved as a single voltage moment." - id: "typography" title: "What typeface does Sephora use, and what should I use as a substitute?" answer: "Sephora's marketing chrome runs Helvetica Neue exclusively across every display, body, button, and nav tier — the CSS declares it as `--font-family-base: 'helvetica neue', helvetica, arial, sans-serif`. Display headlines sit at 20px / weight 700 for h2 section labels, body copy at 12-14px / 400 (12px is the most-used size at frequency 118 in the captured page, with 14px close behind at frequency 78), and the primary-button label uses 14px / 700 in title-case. A 10px / 700 all-caps micro-label tier carries category headers ('CHOSEN FOR YOU', 'BRAND WE LOVE'). The single exception is the 'We Belong to Something Beautiful' brand-tagline overlay, which renders in Georgia serif at 28px / 400 — the only serif on the page. Use Inter as the open-source substitute for Helvetica Neue at every body and display tier; for the Georgia tier, Georgia itself is the system stack and needs no substitute." - id: "black-band-nav" title: "Why does Sephora use a black nav band?" answer: "The flush-black top-nav band is Sephora's most identifiable chrome moment. The band runs full-bleed across the top of every page at pure #000000 with white nav labels (New / Brands / Holiday / Beauty Offers / Gifts / Beauty Insider) flanking the centered wordmark; beneath it sits a thin promotional sub-band that carries seasonal offer copy. The choice is deliberate: black communicates 'editorial / luxury' rather than 'mass retail', and the band acts as a chromatic anchor that lets the white product-grid floor read as gallery-spare rather than as catalog-busy. Compared to Ulta (which uses a white nav with red accent), Sephora's black band is closer to the editorial banner used by Net-a-Porter or by Mr Porter — a single dark strip that establishes premium positioning before the product grid begins." - id: "card-radius" title: "What corner-radius scale does Sephora use?" answer: "The radius scale is small + pill. 4px appears 136 times on every product card, content card, dropdown, and chip — the universal default for any rounded surface. Pills (9999px and 99999px) appear 64 times combined on the primary CTA, the secondary CTA, and the category-tab strip. A rare 6px value appears once on a single card surface. The CSS declares a full ladder of --rounded-1 (2px) through --rounded-5 (10px) plus --rounded-full (9999px), but the captured surface uses only 4px and the pill values heavily — the 6 / 8 / 10px tiers are declared in CSS but rarely rendered. The 4px corner is barely round; it reads as 'softened rectangle' rather than as 'rounded card', which matches the gallery-spare product grid aesthetic." - id: "monospace-and-serif" title: "Why is there a Georgia serif on a Helvetica-only system?" answer: "The single Georgia serif tier is reserved for the 'We Belong to Something Beautiful' brand-tagline overlay that sits on the editorial hero block in the upper-page band. It renders at 28px / weight 400 / 35px line-height in white text on a photographic background — the only serif moment on the entire captured surface. The CSS declares `--font-family-serif: georgia, times, serif` as a separate family token, but its use is strictly limited to this one editorial moment. The choice is deliberate: Georgia in italic-feeling regular weight signals the editorial / mission-statement voice (similar to how a print magazine would set a pull-quote in serif) and contrasts with the otherwise-sans system. Using Georgia for anything else — product names, button labels, body copy — would dilute the editorial intent." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own beauty-retail marketing site?" answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Sephora's specific moves: the flush-black top-nav band with centered wordmark, Helvetica Neue across every tier with the 10px / 700 all-caps micro-label for category headers, 4px rounded white product cards with no border and no shadow, the round brand-red CTA pill as the single voltage moment, and Georgia serif strictly limited to the brand-tagline overlay. You can also reference the tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. The disciplined move worth borrowing is the held-in-reserve red voltage paired with the black-band nav — it only works if you have a strong product-photography pipeline that can carry the chromatic load of the page." mockups: - "marketing-hero" - "media-grid" colors: brand-red: "#cf112c" ink: "#000000" canvas: "#ffffff" ink-muted: "#666666" ink-soft: "#3f3f3f" hairline: "#cccccc" surface-cream: "#faf6e6" surface-blue: "#e5f2fd" surface-peach: "#ffe5d4" link: "#136bea" accent-yellow: "#f8d15d" typography: display-xl: fontFamily: "georgia, times, serif" fontSize: 28px fontWeight: 400 lineHeight: 35px letterSpacing: 0 display-lg: fontFamily: "\"helvetica neue\", helvetica, arial, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 36px letterSpacing: 0 display-md: fontFamily: "\"helvetica neue\", helvetica, arial, sans-serif" fontSize: 20px fontWeight: 700 lineHeight: 25px letterSpacing: 0 heading-md: fontFamily: "\"helvetica neue\", helvetica, arial, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 20px letterSpacing: 0 body-md: fontFamily: "\"helvetica neue\", helvetica, arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 17.5px letterSpacing: 0 body-md-bold: fontFamily: "\"helvetica neue\", helvetica, arial, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 17.5px letterSpacing: 0 body-sm: fontFamily: "\"helvetica neue\", helvetica, arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 15px letterSpacing: 0 body-sm-bold: fontFamily: "\"helvetica neue\", helvetica, arial, sans-serif" fontSize: 12px fontWeight: 700 lineHeight: 15px letterSpacing: 0 caption: fontFamily: "\"helvetica neue\", helvetica, arial, sans-serif" fontSize: 11px fontWeight: 400 lineHeight: 13.75px letterSpacing: 0 micro-label: fontFamily: "\"helvetica neue\", helvetica, arial, sans-serif" fontSize: 10px fontWeight: 700 lineHeight: 13px letterSpacing: 0 button-primary: fontFamily: "\"helvetica neue\", helvetica, arial, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 14px letterSpacing: 0 button-tab: fontFamily: "\"helvetica neue\", helvetica, arial, sans-serif" fontSize: 12px fontWeight: 700 lineHeight: 12px letterSpacing: 0 nav-link: fontFamily: "\"helvetica neue\", helvetica, arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 17.5px letterSpacing: 0 rounded: none: "0px" xs: "2px" sm: "4px" md: "6px" lg: "8px" xl: "10px" full: "9999px" spacing: xs: "4px" sm: "8px" base: "12px" md: "16px" lg: "24px" xl: "32px" 2xl: "48px" 3xl: "64px" components: button-primary: backgroundColor: "{colors.brand-red}" textColor: "{colors.canvas}" typography: "{typography.button-primary}" rounded: "{rounded.full}" padding: "4px 16px" height: "44px" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-primary}" rounded: "{rounded.full}" padding: "4px 16px" height: "44px" borderColor: "{colors.ink}" button-tab: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-tab}" rounded: "{rounded.full}" padding: "4px 12px" height: "32px" borderColor: "{colors.ink}" top-nav: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "8px 16px" height: "60px" promo-strip: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: "8px 16px" height: "32px" nav-link: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "8px" height: "44px" hero-heading: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.display-xl}" padding: "0px 0px 24px" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-md}" micro-label: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.micro-label}" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" body-paragraph-muted: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.body-sm}" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "12px 16px 16px" card-promo: backgroundColor: "{colors.brand-red}" textColor: "{colors.canvas}" typography: "{typography.heading-md}" rounded: "{rounded.sm}" padding: "16px" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "0px 12px 0px 16px" height: "42px" borderColor: "{colors.ink}" --- ## Overview Sephora's marketing chrome opens with the most identifiable header strip in the beauty-retail category. **Black-band nav.** A flush-black header runs full-bleed across the top of every page at pure `{colors.ink}` with white nav labels (New / Brands / Holiday / Beauty Offers / Gifts / Beauty Insider) flanking the centered wordmark; beneath it sits a thin promotional sub-band carrying seasonal offer copy. The band is the page's first chromatic anchor — a dark strip that establishes editorial / luxury positioning before the product grid begins. Where Ulta paints its marketing surfaces in heavy orange-and-warm-photography and uses a white nav with a red accent, and where Glossier leans into pale pink as a constant ambient tone, Sephora keeps the chrome austere: black band on top, white floor beneath, brand red (`{colors.brand-red}` — #cf112c) reserved for the single voltage moment. The system's chromatic restraint reinforces the move. There is exactly one brand voltage — the saturated red — and it appears on the captured page only 5 times: as the round CTA pill on the rewards-program promo block, as the in-page seasonal banner tile, as the "Save more on the app" promotional strip fill, and once each as a text and border tone. The CSS unusually collapses the brand red and the form-validation error color into the same hex (`--color-red` and `--color-error` both resolve to #cf112c). Pure `{colors.ink}` carries the dominant chromatic load — frequency 2450 across text, border, shadow, and the top-nav fill — but it reads as a structural ink tone rather than as a brand accent. The typography is **Helvetica Neue, full stop**. The CSS declares `--font-family-base: 'helvetica neue', helvetica, arial, sans-serif` and runs it across every display, heading, body, button, and nav tier. The single exception is the the brand-mission tagline overlay, which renders in Georgia serif at 28px / 400 — the only serif moment on the entire captured surface, reserved as the editorial voice for the mission-statement banner. The system has a 10px / 700 all-caps micro-label tier for category headers ("CHOSEN FOR YOU", "BRAND WE LOVE") that does the small-caps work other systems would assign to a separate display family. **Key Characteristics:** - Flush-black top-nav band (`{colors.ink}` — #000000) with white labels and centered wordmark, the most identifiable chrome moment in the system. - Held-in-reserve `{colors.brand-red}` (#cf112c) reserved for the round CTA pill, the seasonal banner tile, and the rewards-program promo block — 5 total occurrences on the captured page. - Helvetica Neue across every display, body, button, and nav tier; Georgia serif used exactly once on the brand-tagline overlay at 28px / 400. - 10px / 700 all-caps micro-label tier carries category headers ("CHOSEN FOR YOU", "BRAND WE LOVE") — the small-caps voice in a sans-only system. - 4px corner radius on every product card and content card (frequency 136) — the universal default; the round 9999px pill is reserved for the primary CTA (frequency 64). - Product-photography-led grid — every tile is a white card with a centered packshot, brand name, product name, price, and a star-rating row; no chromatic backgrounds, no lifestyle photography on the homepage chrome. - 12px body text is the most-used size on the page (frequency 118), with 14px close behind (frequency 78) — both render in Helvetica Neue 400. - Default browser-link blue (`{colors.link}` — #136bea) wired as `--color-link`; Sephora does not override the system default for inline text links. ## Colors ### Brand - **Brand Red** (`{colors.brand-red}` — #cf112c): frequency 5. Used as background (3), text (1), border (1). The single brand voltage — reserved for the round CTA pill on the rewards-program promo block, the in-page seasonal banner tile, and the "Save more on the app" promotional strip. Wired in CSS as `--color-red` and overloaded as `--color-error` — unusual; most systems hold the brand color separate from the semantic error tone, but Sephora collapses both into the same hex. ### Structural - **Ink** (`{colors.ink}` — #000000): frequency 2450 — the single most-used color in the entire system. Used as text (1163), border (1163), background (55), shadow (69). Carries the top-nav band fill, every body and product-name text, every divider rule, and every form-input border. Wired as `--color-base`, `--color-black`, `--color-darken1/2/3`, and `--color-divider`. Pure #000000 with no warmth. - **Canvas** (`{colors.canvas}` — #ffffff): frequency 811 — the page floor. Used as background (93), text (359 — primarily on the black top-nav and brand-red CTA), and border (358). Pure white; the secondary near-white `--color-nearWhite` value is merged into the same token. - **Ink Muted** (`{colors.ink-muted}` — #666666): frequency 168 — the dominant secondary text tone. Used as text (84) and border (84). The 60%-grey reserved for product subtitles, footnote rows, and disabled-state labels. Wired as `--color-gray`. - **Ink Soft** (`{colors.ink-soft}` — #3f3f3f): frequency 0 captured, declared as `--color-darkGray`. A secondary running-text tone used inside long-form copy. - **Hairline** (`{colors.hairline}` — #cccccc): frequency 1, used as background. Wired as `--color-midGray`. A neutral mid-grey for divider rules and disabled chrome. ### Seasonal Accent - **Surface Cream** (`{colors.surface-cream}` — #faf6e6): frequency 1 background. A pale cream used as the seasonal banner-tile fill on the "Brand We Love" promotional strip. Wired as `--color-lightRed` (the variable name is misleading — the rendered color is a warm cream, not a red). - **Surface Blue** (`{colors.surface-blue}` — #e5f2fd): a pale blue declared as `--color-lightBlue` and (overloaded) `--color-lightGray`. Used on seasonal promotional banners and on the rewards-program block background. - **Surface Peach** (`{colors.surface-peach}` — #ffe5d4): frequency 1 background. A pale peach used on a single seasonal feature tile. - **Accent Yellow** (`{colors.accent-yellow}` — #f8d15d): declared as `--color-goldenYellow`. Used on the loyalty-program tier badges (Beauty Insider, VIB, Rouge) but not on the captured homepage chrome. ### Link - **Link Blue** (`{colors.link}` — #136bea): frequency 26 (13 as text, 13 as border). Default browser-blue used for inline text links. Wired as `--color-link` and `--color-blue`. Sephora does not override the system default here. ## Typography ### Font Family The system runs **Helvetica Neue** across every display, heading, body, button, and nav tier — the CSS declares it as `--font-family-base: 'helvetica neue', helvetica, arial, sans-serif`. There is no second sans family, no monospace, and (almost) no serif. The single exception is **Georgia** — declared as `--font-family-serif: georgia, times, serif` — used exactly once on the captured surface: the the brand-mission tagline overlay at 28px / weight 400 / 35px line-height in white text on a photographic background. The serif appearance is the editorial / mission-statement voice (similar to how a print magazine would set a pull-quote in serif) and contrasts with the otherwise-sans system. ### Hierarchy | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-xl}` | 28px | 400 | 35px | the brand-mission tagline overlay (Georgia serif, the only serif moment) | | `{typography.display-lg}` | 24px | 700 | 36px | Editorial display moments, brand-feature headlines | | `{typography.display-md}` | 20px | 700 | 25px | h2 section labels ("Chosen For You", "Beauty Offers", "Browse Mini Sets") | | `{typography.heading-md}` | 16px | 700 | 20px | Card titles, emphasis labels | | `{typography.body-md}` | 14px | 400 | 17.5px | Default running text — paragraph body, nav labels, product names | | `{typography.body-md-bold}` | 14px | 700 | 17.5px | Bold emphasis inside body copy, h3, product brand names | | `{typography.body-sm}` | 12px | 400 | 15px | Caption rows, footnote text, micro-labels (most-used size at frequency 118) | | `{typography.body-sm-bold}` | 12px | 700 | 15px | Bold caption emphasis — price, "FREE" badges, sale labels | | `{typography.caption}` | 11px | 400 | 13.75px | Footnote disclaimer rows, legal copy | | `{typography.micro-label}` | 10px | 700 | 13px | All-caps category headers ("CHOSEN FOR YOU", "BRAND WE LOVE") | | `{typography.button-primary}` | 14px | 700 | 14px | Primary round-pill CTA label in title-case | | `{typography.button-tab}` | 12px | 700 | 12px | Category-tab pill labels | | `{typography.nav-link}` | 14px | 400 | 17.5px | Top-nav link labels in the black band | ### Principles The page leans heavily on small body sizes — 12px (frequency 118) and 14px (frequency 78) carry almost all running text. The display tier is restrained: 20px / 700 is the standard section heading, with 24px / 700 reserved for editorial moments and 28px / 400 (Georgia) reserved for the single brand-tagline overlay. There is no 32px / 48px / 56px display tier on the captured chrome — Sephora's hierarchy is built on weight contrast (400 vs. 700) and on all-caps treatment (the 10px micro-label), not on size jumps. The all-caps 10px / 700 micro-label is the system's small-caps voice. It does the work that a separate label-tier display family would do in a typical editorial system — and because it sits at 10px with 13px line-height, it reads as a quiet category marker rather than as a loud caps shout. ### Note on Font Substitutes Helvetica Neue is a licensed Linotype family. **Inter** at the same weights is the closest open-source substitute; the proportions transfer cleanly at every body and display tier. For a tighter alternative with similar Swiss-grotesk proportions, **Neue Haas Grotesk** (also licensed) is the closer cousin. For the Georgia serif tier, Georgia itself is part of the system stack (`georgia, times, serif`) and needs no substitute. ## Layout ### Spacing System - **Base unit:** 4px (`--space-1`), with 8px (`--space-2`) and 16px (`--space-4`) as the dominant modules. Spacing frequency on the captured page: `12px 0px 0px` (56), `16px` (53), `8px 0px` (47), `4px` (42). - **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.base}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.2xl}` 48px · `{spacing.3xl}` 64px. - **Card padding:** 12×16×16px on product cards (the asymmetric top padding accommodates the centered packshot above the brand/product label rows). - **Top-nav padding:** 8×16px on the black band; the promotional sub-band beneath uses the same horizontal padding but tighter vertical. ### Grid & Container - **Max content width:** ~1248px on the body content (the captured h2 width is 1236px and the bodyText paragraph width is 1248px), with edge padding flushing to the page floor. - **Top-nav band:** full-bleed `{colors.ink}` strip running viewport-wide, with content centered to the same ~1248px container. - **Product grid:** 4-column grid at desktop on the "Chosen For You" and "Browse Mini Sets" carousels; each card holds a centered packshot, brand name, product name, price, and star-rating row. - **Editorial banner row:** 3-column grid of seasonal promotional tiles (pale-blue rewards block, "Brand We Love" cream banner, pale-peach feature tile). ### Rhythm The page alternates between **dense product grids** (4-column carousels of product cards) and **single-feature editorial bands** (the seasonal banner row, the the brand-mission tagline overlay, the loyalty-program promo strip). The dense product rows carry the e-commerce work; the editorial bands carry the brand-positioning work. There is no atmospheric gradient between bands; every section terminates on the same white canvas, and the black top-nav stays sticky as the only persistent chromatic anchor. ## Elevation The system has a **minimal shadow tier**. The captured page has 69 occurrences of `{colors.ink}` used as shadow ink — almost all concentrated on the dropdown menus that descend from the black top-nav and on the round-pill CTA hover state. The product cards themselves carry no shadow; depth comes from the 4px rounded corner and from the photography contrast against the white floor. - **Flat (no shadow):** product cards, content cards, the editorial banner row, the footer — 95% of surfaces. - **Dropdown shadow:** `--shadow-light: 0 0 6px rgba(0,0,0,.2)` and `--shadow-medium: 0 0 12px rgba(0,0,0,.2)` are declared for the nav dropdown panels — the only meaningfully-elevated surfaces in the system. - **CTA elevation:** the round-pill primary CTA carries a subtle hover-state lift; not exposed in the resting captured state but declared in the CSS hover rules. - **Hairline outlines:** `{colors.ink}` 1px borders mark form input edges (frequency 1163 as border — the dominant border tone). There is no second hairline tone on the captured chrome. ## Shapes The radius scale is **small + pill**: - `{rounded.none}` 0px — declared as `--rounded-0`. Used on form inputs (the email-signup field has 0px corners), on the top-nav band, and on text-only emphasis blocks. - `{rounded.xs}` 2px — declared as `--rounded-1`. Rare; reserved for inline chip labels. - `{rounded.sm}` 4px — declared as `--rounded-2`. Frequency 136 — the universal default for product cards, content cards, dropdown panels, and seasonal banner tiles. - `{rounded.md}` 6px — declared as `--rounded-3`. Frequency 1 — a rare middle value used on a single card surface. - `{rounded.lg}` 8px — declared as `--rounded-4`. Declared in CSS but not rendered on the captured chrome. - `{rounded.xl}` 10px — declared as `--rounded-5`. Declared but unused. - `{rounded.full}` 9999px — frequency 64 (plus 40 occurrences at the slightly larger 99999px value, which renders identically). Reserved for the primary CTA pill, the category-tab pill set, and the round play / favorite icon buttons. The system is binary in practice: 4px on every card surface or a full pill on the interactive chrome. The 6 / 8 / 10px middle tier is declared in CSS but rarely used — the captured page demonstrates the discipline by sitting almost entirely on 4px and 9999px. ## Components **`top-nav`** — The signature chrome moment. Flush-black `{colors.ink}` band running full-bleed across the top of every page, 60px height, 8×16px padding. Houses the Sephora wordmark flush center, the main-category nav links (New / Brands / Holiday / Beauty Offers / Gifts / Beauty Insider / Sale) flanking the wordmark, and the right-aligned utility cluster (Sign In / Stores / Community / Basket). **`promo-strip`** — White `{colors.canvas}` sub-band beneath the black top-nav, 32px height, 8×16px padding. Carries the seasonal promotional offer copy ("Get a Skincare Sample Set! Free* with $45 min. spend") at `{typography.body-sm}` (12px / 400). The single thin band of white between the black nav and the page body. **`nav-link`** — Transparent background, white `{colors.canvas}` text in `{typography.nav-link}` (14px / 400), 8px padding, 44px height. The nav-link sits on the black band — the white text on black is the system's signature contrast pair. **`button-primary`** — The signature CTA. Brand-red `{colors.brand-red}` fill, white `{colors.canvas}` text, fully-rounded `{rounded.full}` 9999px pill, 4×16px padding, 44px height, weight 700. "View Sephora International Websites" is the captured canonical instance; on the broader site the same component carries "Add to Basket" and "Sign In Now" labels. **`button-secondary`** — White `{colors.canvas}` fill, black `{colors.ink}` text, 1px black border, fully-rounded `{rounded.full}` pill, 4×16px padding, 44px height. Used for non-primary actions ("Learn More", "View Details"). The inverse-fill variant of the primary CTA. **`button-tab`** — White fill, black text, 1px black border, fully-rounded `{rounded.full}` pill, 4×12px padding, 32px height. Smaller than the primary CTA, used for the category-tab strip ("All / Skincare / Makeup / Fragrance / Hair"). **`hero-heading`** — White `{colors.canvas}` text on the photographic hero background, `{typography.display-xl}` (28px / Georgia 400 / 35px line-height). The single serif moment on the captured surface — reserved for the the brand-mission tagline overlay. **`section-heading`** — Black `{colors.ink}` text at `{typography.display-md}` (20px / 700 / 25px line-height). Used for "Chosen For You", "Beauty Offers", "Browse Mini Sets", "New Arrivals" — every product-carousel section header. **`micro-label`** — Black text at `{typography.micro-label}` (10px / 700 / 13px line-height) in all-caps. The system's small-caps voice — carries "CHOSEN FOR YOU", "BRAND WE LOVE" category headers and any quiet category marker that should not shout. **`body-paragraph`** — Default black text at `{typography.body-md}` (14px / 400 / 17.5px line-height). The workhorse paragraph style — used for promotional offer copy, product descriptions, and footer body. **`body-paragraph-muted`** — `{colors.ink-muted}` (#666666) variant at `{typography.body-sm}` (12px / 400 / 15px line-height). Used for product subtitles, footnote rows, and metadata captions. **`card`** — White `{colors.canvas}` surface, black text, `{rounded.sm}` 4px radius, 12×16×16px asymmetric padding. The universal product-card and content-card chrome. Holds a centered packshot, a brand-name row at `{typography.body-md-bold}`, a product-name row at `{typography.body-md}`, a price row at `{typography.body-sm-bold}`, and a star-rating row at `{typography.body-sm}`. No border, no shadow — depth comes from the photography contrast against the white floor. **`card-promo`** — Brand-red `{colors.brand-red}` fill, white text, `{rounded.sm}` 4px radius, 16px padding. The seasonal banner-tile chrome — used for the rewards-program promo block and the "Save more on the app" promotional strip. The single chromatic surface on the editorial banner row. **`text-input`** — White `{colors.canvas}` fill, black text, 1px `{colors.ink}` border, `{rounded.none}` 0px radius, 0×12×0×16px padding, 42px height. The email-signup field in the footer uses this resting state — hard-cornered to match the editorial / Swiss-grotesk feel of the chrome. ## Do's and Don'ts **Do** keep the top-nav band flush-black with white labels. The black band is the system's most identifiable chrome moment — it establishes editorial / luxury positioning before any product appears. Swapping to a white nav with a black wordmark inverts the contrast and reads as a Ulta / mass-retail chrome rather than as a Sephora / editorial chrome. **Do** reserve `{colors.brand-red}` (#cf112c) for the round CTA pill and the seasonal banner tile only. The system has frequency 5 on the brand red — it is the single voltage moment. Painting product cards red, or using red as a body text color, dilutes the chromatic anchor that makes the red CTA read as the page's most-tappable element. **Do** use Georgia serif strictly for the brand-tagline overlay at 28px / 400. The serif is reserved for the editorial / mission-statement voice — using Georgia anywhere else (product names, button labels, body copy) dilutes the typographic split and breaks the Helvetica-Neue-everywhere principle. **Do** use `{rounded.sm}` (4px) on every product and content card. The system has frequency 136 on this single radius — it is the universal default. Adding a 6 / 8 / 10px middle tier softens the chrome out of the gallery-spare product-grid aesthetic that makes the page read as editorial rather than as catalog. **Don't** render display headlines at 36px or larger. The captured chrome tops out at 28px (Georgia, brand tagline) and 24px (Helvetica, editorial display). The system's hierarchy is built on weight contrast and on all-caps treatment, not on size jumps. Bumping the section headings to 36 / 48px reads as borrowed from a SaaS marketing site rather than from Sephora's own editorial-retail chrome. **Don't** add a chromatic background to the product grid. The captured product cards are white-on-white with no border and no shadow — depth comes from the packshot photography itself. Adding a cream / pink / pale-blue tile background turns the gallery-spare grid into a busy catalog and competes with the product packaging for chromatic attention. **Don't** swap the brand red (`{colors.brand-red}` — #cf112c) for the slightly-more-orange Sephora-store red. The web chrome uses the saturated cooler red consistently across CTA, banner, and error states; the in-store wayfinding and signage use a slightly different red that does not transfer to the web chrome. **Don't** soften the top-nav from pure `{colors.ink}` (#000000) to a near-black charcoal. The maximum-contrast black-on-white pair is the chromatic anchor that makes the chrome read as editorial; softening it to a near-black charcoal muddies the contrast and reads as a generic dark-band nav rather than as Sephora-specific. ## Known Gaps - **Product detail pages:** the captured chrome is the homepage. Product detail surfaces (the variant picker, the shade-swatch grid, the ingredients list, the review-and-rating panel) introduce a fully-rounded shade swatch and a sticky add-to-basket bar at the bottom of the viewport that are not represented here. - **Beauty Insider loyalty tiers:** the loyalty-program surfaces (Beauty Insider / VIB / Rouge) carry their own tier-color logic (the `{colors.accent-yellow}` golden-yellow for Beauty Insider, a deeper red for Rouge) that does not appear on the captured homepage chrome. - **Checkout and basket flows:** the basket, address-entry, payment-form, and order-confirmation surfaces carry their own form-field hairline tone and a persistent total-strip at the bottom of the viewport not exposed on the homepage. - **In-store wayfinding:** Sephora's in-store signage uses a slightly different brand red and an all-caps Helvetica display tier at much larger sizes (48 / 64px) that does not transfer to the web chrome. - **Hover and focus states:** documented for resting states only; the full state matrix (hover lift, focus ring, active press, disabled tint) is not exposed on the captured surface. - **Motion:** the homepage carries a hover-zoom effect on product cards and an autoplay carousel on the editorial banner row; the spec captures end-state values only. - **Mega-navigation panels:** the captured surface shows the closed nav state only. The full mega-dropdown panels (Brands / Holiday / Beauty Offers category trees) carry their own column-grid and hover-state styling not represented here. - **App-specific chrome:** the mobile app uses a bottom-tab nav with the same brand red on the active state, but the bottom-tab and pull-to-refresh chrome live in the native app and are not exposed on the web surfaces.