---
version: alpha
name: "Rare Beauty"
website: "https://www.rarebeauty.com"
description: >-
  A vegan beauty brand whose marketing site pairs Ogg Regular serif headlines in deep plum
  #7f2549 against a pure-white canvas — a display typeface that reads like editorial fashion
  rather than cosmetics e-commerce — with Neue Hass Unica carrying all body and UI text in
  tracked uppercase at weights 400-500. The brand foregoes a single chromatic accent and
  instead runs its custom Rare Script logotype alongside the two licensed families, reserving
  an earthy peach-to-terracotta gradient for decorative illustration only. The system is the
  only beauty brand in the directory that uses a tall tracked-uppercase sans as its UI voice
  and a named humanist serif as its display.

seo:
  title: "Rare Beauty Design System for React — plum on white, Ogg serif, Neue Hass Unica, 16 components"
  metaDescription: "Rare Beauty's marketing design system: Ogg Regular serif headers in deep plum, Neue Hass Unica tracked-uppercase UI text, pill geometry, and earthy gradient illustration. Tokens for React, Next.js, and AI coding tools."
  highlights:
    - "Serif display in e-commerce — Ogg Regular at 48px carries every h2/h3, the only beauty site in the directory with an editorial serif headline tier"
    - "Tracked uppercase as UI voice — Neue Hass Unica at 10-12px / 3-5px letter-spacing runs every button, nav link, and label, giving the chrome a fashion-editorial feel"
    - "Deep plum voltage — the brand's near-burgundy #7f2549 appears 211 times as both text and border, driving every headline and interactive element against the white canvas"
    - "Pill-only radius — the system uses 50% circles and 100px pills exclusively; there is no 4-8px card rounding anywhere on the page"
    - "No solid brand fill — the primary button and nav links are text-only or outline; the only background color is pure white, with peach-terracotta appearing only in gradient illustrations"
  tags:
    - "E-commerce & Retail"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Rare Beauty's site opens on a full-bleed photograph of Selena Gomez holding the True to Myself Foundation, with the h2 headline set in Ogg Regular at 48px in deep plum — a serif typeface you would more likely find in Vogue than on a DTC makeup storefront. Below the photograph the page shifts to a product grid and editorial rails, all of it carrying that same serif for section titles while Neue Hass Unica handles every chip, button, and navigation label at 10-12px in tracked uppercase. The combination is not what the category convention is — most beauty brands (Charlotte Tilbury, NARS, Fenty) run a single geometric sans across both tiers. Where they flatten the display tier to a geometric sans and let photography carry personality, Rare Beauty inverts it and lets the typeface carry personality against the photography.

    The DESIGN.md file packages the extracted system into a machine-readable spec for React and AI tools. Inside: 14 color tokens organized around a single deep-plum voltage (#7f2549, 211 total occurrences as text and border), a near-black ink tone (#000914 at 768 occurrences), a warm-cream canvas tint (#fff7e7) used for subtle section backgrounds, and a set of earthy peach-terracotta gradient stops that exist only in decorative illustration. Twelve typography tokens span Ogg Regular at 18-48px for display and heading, Neue Hass Unica Regular/Medium at 9-20px with letter-spacing 1-6.4px for UI, and the proprietary Rare Script at 48px for brand logotype moments. Two radius values — 50% circles and 100px pills — define the entire shape language. Sixteen component definitions cover the full-bleed hero, editorial product card, outline CTA button, nav link chip, and text input.

    Feed this file to Claude or Cursor to reproduce Rare Beauty's specific moves: an Ogg serif display tier for headings (substitute Freight Display or Cormorant Garamond), tracked-uppercase Neue Hass Unica for all UI chrome (substitute Inter at 400 with manual letter-spacing), deep plum as the single brand voltage for text and borders, and full-pill geometry everywhere. The one disciplined move worth studying is the absence of any brand-colored fill — the brand color appears only as text and outline, never as a button background or section surface. The canvas stays white; the plum carries the brand through type alone.
  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.rarebeauty.com"
      title: "Rare Beauty — official site"
      description: "Rare Beauty'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 Rare Beauty's primary brand color?"
      answer: "Rare Beauty's brand voltage is deep plum #7f2549 — a near-burgundy that sits midway between red and purple, appearing 211 times in the captured page as text (106 occurrences) and border (105 occurrences). It drives every display headline (the Ogg Regular h2 and h3 tiers), every navigation link, the search input text, and all product-card callout text. Notably, it never appears as a background fill — the brand color exists entirely in text and outline form against the white canvas. The plum is not declared in any CSS custom property in the extracted set; it is hard-coded on typography and border rules throughout the page."
    - id: "typography"
      title: "What typefaces does Rare Beauty use, and what should I substitute?"
      answer: "Rare Beauty runs three typefaces: Ogg Regular (a licensed humanist serif from OH no Type Co) at 18-48px for every display heading and the search input; Neue Hass Unica Regular and Medium (a licensed geometric neo-grotesque from Linotype) at 9-20px with 1-6.4px letter-spacing for all UI text, buttons, and nav labels; and Rare Script (a proprietary custom script) at 48px for logotype moments in section headers. For substitutes: Cormorant Garamond or Freight Display Pro replaces Ogg at display sizes. Inter at weight 400 with CSS letter-spacing of 0.15-0.4em replaces Neue Hass Unica at small tracked sizes. There is no open-source match for Rare Script — replace with a display script like Parisienne for logotype applications."
    - id: "radius-philosophy"
      title: "What corner-radius values does Rare Beauty use?"
      answer: "Rare Beauty uses only two radius values across the entire captured page. The dominant radius is 50% (105 occurrences), which renders as a full circle on square icon buttons and color-swatch chips. The secondary radius is 100px (2 occurrences), used on the outline CTA button and the search input field to produce a pill shape. There is no 4px, 8px, or 16px card-radius in the system — every bordered surface is either circular or full-pill. The absence of conventional card rounding is the shape language's most distinctive move: it keeps all edges soft and avoids the grid-card aesthetic common to e-commerce platforms."
    - id: "gradient-illustration"
      title: "What are the earthy gradient colors used in Rare Beauty illustrations?"
      answer: "The gradient illustration tier runs five stop colors: pale peach #ffdcc6, medium peach #ebb288, warm terracotta #e5955b, rich rust #c86128, and deep terracotta brown #732a18. Each appears exactly once in the extracted data, all classified as layer:brand with gradient usage only — meaning they appear exclusively inside CSS gradients on decorative illustration elements, not as solid fills, text colors, or borders. The gradient reads as a warm sunset skin-tone range, consistent with the brand's diversity-and-inclusion positioning. These values should not be used in UI chrome; they are illustration-only tokens."
    - id: "nav-link-style"
      title: "How does Rare Beauty style its navigation links?"
      answer: "Rare Beauty's navigation links run Neue Hass Unica Regular at 12px with 3px letter-spacing in tracked uppercase, rendered in the brand's deep plum #7f2549 on a white background with zero padding and zero background fill. The links sit at 18px line-height with 0px border-radius — no hover pill background is captured in the marketing surface. The top nav includes the Rare Beauty wordmark flush left and the primary product category links (Shop, About, Foundation Finder, @RareBeauty, and the mental health initiative). Secondary utility links (search, bag icon) appear at the right. The overall nav is the brand's most compact typographic moment — 12px tracked uppercase at near-zero padding keeps it from competing with the 48px Ogg display headlines below."

mockups:
  - "marketing-hero"
  - "media-grid"

colors:
  ink: "#000914"
  ink-true: "#000000"
  plum: "#7f2549"
  ink-mid: "#464545"
  canvas: "#ffffff"
  surface-warm: "#fff7e7"
  gradient-peach-light: "#ffdcc6"
  gradient-peach-mid: "#ebb288"
  gradient-terracotta-light: "#e5955b"
  gradient-terracotta-mid: "#c86128"
  gradient-terracotta-dark: "#732a18"
  accent-sky: "#6aaae4"
  accent-periwinkle: "#6699cc"
  hairline: "#efefef"

typography:
  display-xl:
    fontFamily: "\"Ogg Regular\", Georgia, serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 53px
    letterSpacing: 0
  display-md:
    fontFamily: "\"Ogg Regular\", Georgia, serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 22px
    letterSpacing: "0.5px"
  display-sm:
    fontFamily: "\"Ogg Regular\", Georgia, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 20.7px
    letterSpacing: 0
  brand-script:
    fontFamily: "\"Rare Script\", cursive"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 79px
    letterSpacing: 0
  label-lg:
    fontFamily: "\"Neue Hass Unica Regular\", Helvetica, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 29px
    letterSpacing: "1px"
  body-md:
    fontFamily: "\"Neue Hass Unica Regular\", Helvetica, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 22px
    letterSpacing: "1px"
  nav-link:
    fontFamily: "\"Neue Hass Unica Regular\", Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 15px
    letterSpacing: "3px"
  label-caps:
    fontFamily: "\"Neue Hass Unica Regular\", Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 23px
    letterSpacing: "1px"
  button-md:
    fontFamily: "\"Neue Hass Unica Regular\", Helvetica, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: "5px"
  caption:
    fontFamily: "\"Neue Hass Unica Regular\", Helvetica, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 18.04px
    letterSpacing: "1.5px"
  meta-sm:
    fontFamily: "\"Neue Hass Unica Regular\", Helvetica, sans-serif"
    fontSize: 9px
    fontWeight: 400
    lineHeight: 14px
    letterSpacing: "2px"
  section-label:
    fontFamily: "\"Neue Hass Unica Medium\", Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 20.04px
    letterSpacing: "2.5px"

rounded:
  none: "0px"
  pill: "100px"
  full: "50%"

spacing:
  xxs: "2px"
  xs: "5px"
  sm: "8px"
  md: "10px"
  base: "16px"
  lg: "21px"
  xl: "23px"

components:
  hero-section:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.plum}"
    typography: "{typography.display-xl}"
    rounded: "{rounded.none}"
    padding: "0"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.plum}"
    typography: "{typography.display-xl}"
    padding: "0"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.label-lg}"
    padding: "0"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0"
  brand-logotype:
    backgroundColor: "transparent"
    textColor: "{colors.plum}"
    typography: "{typography.brand-script}"
    padding: "0"
  button-primary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "7px 34px"
    height: "36px"
    borderColor: "{colors.ink}"
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "7px 34px"
    height: "36px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.plum}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "7px 34px"
    height: "36px"
    borderColor: "{colors.plum}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.plum}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "0px 15px"
    height: "48px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.plum}"
    typography: "{typography.nav-link}"
    padding: "0px 6px"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "16px 0px"
  product-title:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
    padding: "0"
  section-label:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.section-label}"
    padding: "0"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.plum}"
    typography: "{typography.display-sm}"
    rounded: "{rounded.pill}"
    padding: "7px 18px"
    height: "54px"
    borderColor: "{colors.ink}"
  caption:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    padding: "0"
  color-swatch:
    backgroundColor: "transparent"
    rounded: "{rounded.full}"
    height: "24px"
---

## Overview

Rare Beauty's site does something uncommon in beauty e-commerce. **Serif as the brand voice**: the h2 and h3 display tier runs Ogg Regular — a humanist serif from OH no Type Co — at 48px in deep plum, the same typeface used for editorial fashion spreads in print. Where Charlotte Tilbury, NARS, and Fenty reach for geometric sans-serifs at the display tier and let the photography carry all warmth, Rare Beauty lets the typeface itself signal warmth, softness, and editorial authority. The result is a page where the headline is doing as much brand work as the product photography beside it.

The supporting voice is Neue Hass Unica, handled entirely in tracked uppercase at small sizes. Buttons run 10px with 5px letter-spacing; navigation links run 12px with 3px letter-spacing; section labels run 12px with 2.5px letter-spacing. This is not a conventional "small text is just smaller" approach — it's a deliberate fashion-editorial treatment that turns every UI label into a caption.

**Tracked-uppercase restraint**: the deep-plum voltage (#7f2549) appears 211 times across the page but never as a background fill. It lives only in text and borders — headlines, nav links, the search input, and product callouts. The canvas stays white throughout; the brand communicates entirely through type color and outline, not fill.

**Key Characteristics:**
- Deep plum (#7f2549) carries 211 page elements as text and border exclusively — zero background-fill occurrences.
- Ogg Regular at 48px for display headlines: the only beauty brand in the directory with an editorial serif at the h2/h3 tier.
- Neue Hass Unica at 9-12px with 1-6.4px letter-spacing uppercase for all UI chrome — buttons, nav, labels, captions.
- Two radius values only: 50% circle (105 occurrences on swatches and icon buttons) and 100px pill (on CTA buttons and search input).
- Earthy peach-to-terracotta gradient (#ffdcc6 → #732a18) appears only in decorative illustration, not in any UI surface.
- Rare Script proprietary logotype at 48px for brand wordmark moments — no open-source substitute.
- Pure-white canvas throughout: no grey tints, no section fills, no surface gradients on the page body.

## Colors

### Brand Voltage

- **Plum** (`{colors.plum}` — #7f2549): frequency 211. Used as text (106), border (105). The brand's single chromatic moment — drives every display headline, nav link, search input, and product callout. Never appears as a background fill; the plum communicates entirely through type and outline.

### Structural

- **Ink** (`{colors.ink}` — #000914): frequency 768. Used as text (384), border (384). The dominant text and structural border tone — a very slightly warm near-black (the blue hue channel at 9/255 gives it a trace of depth). Body paragraphs, product names, and most hairline dividers run this color.
- **Ink True** (`{colors.ink-true}` — #000000): frequency 726. Used as text (362), border (362), shadow (2). The secondary near-black — pure black used on some button borders and structural elements. Wired as `--rc-active-color`.
- **Ink Mid** (`{colors.ink-mid}` — #464545): frequency 94. Used as text (47), border (47). A medium charcoal for secondary labels and non-primary structural chrome.
- **Canvas** (`{colors.canvas}` — #ffffff): the page floor. Pure white runs the full body — no warm tint, no grey wash.
- **Surface Warm** (`{colors.surface-warm}` — #fff7e7): frequency 51. Used as text (20), bg (11), border (20). A warm cream clustered from several near-white values. Appears on subtle section-background bands and card hover states.
- **Hairline** (`{colors.hairline}` — #efefef): wired as `--rc-active-bg`. Declared but frequency zero in the captured render — the system's background treatment for active/focus UI states.

### Gradient Illustration (illustration only — never UI chrome)

- **Peach Light** (`{colors.gradient-peach-light}` — #ffdcc6): gradient only (1 occurrence). The pale warm peach at the top of the brand's earthy skin-tone gradient.
- **Peach Mid** (`{colors.gradient-peach-mid}` — #ebb288): gradient only. Medium peach — the warm mid-stop.
- **Terracotta Light** (`{colors.gradient-terracotta-light}` — #e5955b): gradient only. A warm terracotta-orange mid-stop.
- **Terracotta Mid** (`{colors.gradient-terracotta-mid}` — #c86128): gradient only. Deep warm rust.
- **Terracotta Dark** (`{colors.gradient-terracotta-dark}` — #732a18): gradient only. The deep terracotta anchor of the illustration gradient.
- **Accent Sky** (`{colors.accent-sky}` — #6aaae4): bg only (1 occurrence). A sky-blue used on a single product image background — not part of the UI system.
- **Accent Periwinkle** (`{colors.accent-periwinkle}` — #6699cc): bg only (1 occurrence). A periwinkle used on a second product image background — not UI.

## Typography

### Font Families

The system runs three families. **Ogg Regular** (OH no Type Co) handles every display surface — the 48px h2/h3 product headlines, the 19px editorial sub-heads, and notably the 30px search input field, so even the search box inherits the serif's warmth. **Neue Hass Unica** (Linotype, in Regular and Medium weights) handles all UI chrome — buttons at 10px/5px tracking, nav links at 12px/3px tracking, section labels at 12px/2.5px tracking, and captions down to 9px/2px tracking. **Rare Script** (proprietary) appears at 48px for logotype wordmark moments in section headers — it is the cursive signature that pairs with the Rare Beauty brand mark.

### Hierarchy

| Token | Family | Size | Weight | Tracking | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | Ogg Regular | 48px | 400 | 0 | h2/h3 product headlines |
| `{typography.display-md}` | Ogg Regular | 19px | 400 | 0.5px | Sub-section titles |
| `{typography.display-sm}` | Ogg Regular | 18px | 400 | 0 | Labels on forms |
| `{typography.brand-script}` | Rare Script | 48px | 400 | 0 | Brand logotype moments |
| `{typography.label-lg}` | Neue Hass Unica | 20px | 400 | 1px | Body lead paragraphs |
| `{typography.body-md}` | Neue Hass Unica | 15px | 400 | 1px | Running body text |
| `{typography.nav-link}` | Neue Hass Unica | 12px | 400 | 3px | Top-nav links (uppercase) |
| `{typography.label-caps}` | Neue Hass Unica | 12px | 400 | 1px | Product category labels |
| `{typography.button-md}` | Neue Hass Unica | 10px | 400 | 5px | CTA button text (uppercase) |
| `{typography.caption}` | Neue Hass Unica | 11px | 400 | 1.5px | Link captions |
| `{typography.meta-sm}` | Neue Hass Unica | 9px | 400 | 2px | Small metadata |
| `{typography.section-label}` | Neue Hass Unica Medium | 12px | 500 | 2.5px | Section headers (uppercase) |

### Note on Font Substitutes

Ogg Regular is licensed. **Cormorant Garamond** at weight 300 transfers the spindly humanist feel at display sizes; **Freight Display Pro** at weight book is another close match. For Neue Hass Unica, **Inter** at 400 with manual `letter-spacing: 0.2-0.4em` reproduces the tracked-uppercase UI voice. There is no close open-source match for Rare Script; **Parisienne** or **Great Vibes** (Google Fonts) share the loose script quality.

## Layout

### Spacing System

- **Base unit:** 5px appears 106 times — unusually, the system's smallest repeated unit is 5px rather than 4px or 8px.
- **Tokens:** `{spacing.xxs}` 2px · `{spacing.xs}` 5px · `{spacing.sm}` 8px · `{spacing.md}` 10px · `{spacing.base}` 16px · `{spacing.lg}` 21px · `{spacing.xl}` 23px.
- **Button padding:** `{spacing.xs}` 5px vertical, `{spacing.xl}` ~34px horizontal — produces a tall, narrow-padded pill button.
- **Section vertical rhythm:** variable, driven by photography breakpoints rather than a fixed grid cadence.

### Grid & Container

- **Hero:** full-width editorial photograph, text overlaid or beside in a two-column split at desktop.
- **Product grid:** a 4-column carousel/grid of product cards below the hero.
- **Editorial rails:** alternating full-width image sections with a centered text column.
- The site captures a mobile-first layout at 375px width; the desktop container is ~1440px.

### Rhythm

The page alternates between **photography-led** (full-bleed or half-bleed hero sections) and **grid-led** (product card carousels and 3-up editorial panels). Section breaks use warm-cream (#fff7e7) tinted backgrounds to signal category shifts rather than structural dividers.

## Elevation

The system has essentially no shadow tier. One shadow value is noted in the extracted color data (#000000 with shadow usage 2), but it is confined to micro-elevation on floating UI elements. Cards have no shadow; the product grid cards sit flush on the white canvas with hairline borders providing the only depth signal.

## Shapes

The radius scale is **binary**: full circles and full pills, with nothing in between.

- `{rounded.none}` 0px — all card and section edges. The grid cards are sharp-cornered rectangles.
- `{rounded.pill}` 100px — the primary CTA button and the search input field. The pill reads warm and tappable against the flat grid.
- `{rounded.full}` 50% — color swatches and circular icon buttons throughout the product pages.

There is no 4px, 8px, or 16px middle tier. A developer importing a card-radius from another system will get sharp corners or a full pill; there is no conventional "rounded card" option here.

## Components

**`hero-section`** — White canvas, deep-plum `{colors.plum}` headline in Ogg at 48px. Full-width photography carries the visual weight; text sits beside or overlaid at desktop.

**`hero-heading`** — Deep-plum `{colors.plum}` Ogg Regular at `{typography.display-xl}`, zero padding. The system's loudest typographic moment.

**`button-primary`** — White fill, ink `{colors.ink}` text in tracked-uppercase `{typography.button-md}` (10px / 5px tracking), 100px pill `{rounded.pill}`, 7px vertical / 34px horizontal padding. The canonical CTA: "Shop Now" / "Add to Bag".

**`button-primary-hover`** — Inverts to ink-fill `{colors.ink}` / white text — a fill swap with no border change.

**`button-secondary`** — Transparent fill, deep-plum `{colors.plum}` text and border, same pill geometry. Used for secondary editorial CTAs.

**`top-nav`** — White surface, deep-plum nav links in tracked-uppercase `{typography.nav-link}` (12px / 3px tracking), 48px height, sharp corners.

**`nav-link`** — Transparent background, deep-plum text, 12px / 3px tracking uppercase. Padding 0px baseline with 6px horizontal margin.

**`card`** — White surface, ink text, sharp corners, 16px top padding. No shadow. Product cards carry a product image, name in Ogg Regular, shade chips in full-circle swatches, and a price in Neue Hass Unica.

**`product-title`** — Ogg Regular at `{typography.display-md}` (19px / 400), ink text.

**`section-label`** — Neue Hass Unica Medium at `{typography.section-label}` (12px / 500 / 2.5px uppercase tracking), ink text. Heads editorial content sections.

**`text-input`** — White fill, plum text in Ogg Regular at 30px (the search input uses the serif typeface — unusual for a form field), 100px pill, 7px top / 18px horizontal padding, 54px height, ink border.

**`caption`** — Neue Hass Unica 11px / 1.5px tracking, ink text, transparent background. Below product swatches and image attributions.

**`color-swatch`** — Transparent fill, 50% full-circle radius, 24px height. Product shade selector chips.

**`brand-logotype`** — Rare Script at `{typography.brand-script}` (48px / 400), plum text. Reserved for editorial section headers where the brand name appears in the custom cursive signature.

**`body-paragraph`** — Neue Hass Unica at `{typography.label-lg}` (20px / 400 / 1px tracking), ink text. Lead body copy in editorial rails.

## Do's and Don'ts

**Do** use `{colors.plum}` (#7f2549) for text and borders only. The plum never fills a background — applying it as a button background or section fill breaks the brand's deliberate "type-only voltage" approach.

**Do** keep the display tier in Ogg Regular. Swapping to a sans-serif for headlines destroys the brand's distinguishing move — the entire editorial authority of the page depends on the serif at 48px contrasting with the tracked-uppercase sans UI chrome.

**Do** set every button and nav label in tracked uppercase at 10-12px / 3-5px letter-spacing. The compression and tracking together are the fashion-editorial signal; removing either makes the UI chrome indistinguishable from any generic DTC brand.

**Do** maintain full-pill geometry for interactive buttons and inputs. The 100px radius is the brand's "warmth signal" on an otherwise sharp-cornered card grid.

**Don't** use the gradient stops (`{colors.gradient-peach-light}` through `{colors.gradient-terracotta-dark}`) in UI chrome. These five values are illustration-only — using them as button fills or card backgrounds reads as a branding conflict with the monochromatic plum-on-white system.

**Don't** add card shadows or card-radius rounding. The grid cards are intentionally sharp-cornered and shadow-free; adding a 4-8px radius or a drop shadow would make the product grid read like a generic Shopify theme rather than the editorial grid the brand uses.

**Don't** introduce grey canvas tints for section backgrounds. The warm-cream `{colors.surface-warm}` (#fff7e7) is the only permitted section tint — a neutral light grey cuts against the warmth the system's typography communicates.

**Don't** use the search input's Ogg Regular typeface anywhere outside the search field. The serif-in-input move is a deliberate brand signature for one specific surface; repeating it on other inputs (email, address, quantity) undermines the scarcity of the gesture.

## Known Gaps

- **Hover and focus states:** only `{component.button-primary-hover}` is documented; the full state matrix (focus rings on inputs, active tab states, disabled button opacity) is not captured from the marketing surface.
- **Dark mode:** the marketing site is light-only. No dark-mode variant is exposed or hinted at in the extracted CSS custom properties.
- **Mobile navigation:** the desktop nav (full horizontal) collapses to a hamburger on mobile but the mobile drawer structure and typography are not captured in the extracted data.
- **Product page surfaces:** this file captures the marketing homepage and editorial rails only. The full product detail page, cart drawer, and checkout flow carry their own component instances not represented here.
- **Animation:** the carousel auto-advance, swatch hover transitions, and product image fade have no captured easing or duration values.
- **Accessibility states:** focus ring color, skip-link appearance, and ARIA-announced states are not represented in the extracted token set.
- **Third-party widgets:** the loyalty program modal and product quiz overlays use third-party components whose styling is not captured in the page extraction.