---
version: alpha
name: "Rare Beauty"
description: "Inclusive beauty design system grounded in warm cream surfaces, a single deep-rose brand accent, and editorial serif-plus-sans typography that pairs Selena Gomez's self-acceptance mission with quiet, approachable luxury."

colors:
  # Surface / canvas
  background: "#fff7e7"   # warm cream canvas — rgb(255,247,231); primary page background
  surface: "#ffffff"       # pure white for product card tiles and modal content areas
  surface-subtle: "#f5f0e8" # slightly deeper warm tint for section dividers and hover surfaces — approximated

  # Text / ink
  ink: "#000914"           # near-black for all primary body copy — rgb(0,9,20)
  ink-secondary: "#464545" # medium warm-charcoal for secondary labels — rgb(70,69,69)
  on-background: "#000914"
  on-surface: "#000914"

  # Brand accent
  primary: "#7f2549"       # deep rose-berry — the Rare Beauty signature; all CTAs, links, active states
  on-primary: "#ffffff"
  primary-container: "#f5e0e9" # blush tint wash — approximated from primary lightened for container surfaces

  # State / interaction
  text-hover: "#982c58"    # rose deepened on hover — from dembrandt links.hover rgb(152,44,88)
  focus-ring: "#7f2549"    # matches primary for consistent brand focus
  focus-tint: "#f5e0e9"    # light blush tint for focus backgrounds — approximated

  # Semantic
  error: "#c0392b"          # warm red for form validation — estimated, not extracted

  # Borders
  border: "#e8e0d5"         # warm sand hairline borders on cards and inputs — approximated from cream palette
  border-subtle: "#f0e8d8"  # near-invisible warm dividers — approximated

  # Shadow tints
  shadow-soft: "#c0bbb4"    # approximated from rgba(192,187,180,0.5) — Google format requires hex
  # Note: shadow-soft was rgba(192,187,180,0.5) in source; flattened to nearest warm-stone opaque

typography:
  display-hero:
    fontFamily: "Ogg, 'Cormorant Garamond', Georgia, serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.10
    letterSpacing: 0.5px
  display:
    fontFamily: "Ogg, 'Cormorant Garamond', Georgia, serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.10
    letterSpacing: 0.5px
  heading-section:
    fontFamily: "Ogg, 'Cormorant Garamond', Georgia, serif"
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.16
    letterSpacing: 0.5px
  heading-sub:
    fontFamily: "'Neue Hass Unica', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.50
    letterSpacing: 0px
  body-large:
    fontFamily: "'Neue Hass Unica', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.46
    letterSpacing: 1px
  body:
    fontFamily: "'Neue Hass Unica', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.47
    letterSpacing: 1px
  nav-link:
    fontFamily: "'Neue Hass Unica', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.21
    letterSpacing: 0px
  button-ui:
    fontFamily: "'Neue Hass Unica', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 3px
  label-allcaps:
    fontFamily: "'Neue Hass Unica', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 3px
  caption:
    fontFamily: "'Neue Hass Unica', 'Neue Hass Unica Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.67
    letterSpacing: 6.4px
  script-accent:
    fontFamily: "'Rare Script', cursive"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.10
    letterSpacing: 0px

spacing:
  xs: 5px
  sm: 10px
  md: 15px
  lg: 23px
  xl: 35px
  2xl: 75px
  3xl: 100px
  4xl: 200px

rounded:
  none: 0px
  sm: 4px
  md: 8px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.text-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    borderColor: "{colors.ink}"
  button-secondary-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    borderColor: "{colors.primary}"
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    borderColor: "{colors.border}"
  button-ghost-hover:
    backgroundColor: "{colors.surface-subtle}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 16px
  card-product:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 8px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.focus-ring}"
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  badge-promo:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    borderColor: "{colors.border}"
  modal:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 32px
---

# Rare Beauty Design System

## Overview

Rare Beauty carries Selena Gomez's founding proposition — that beauty should feel like self-expression, not self-correction — into every pixel of its digital presence. The canvas is a warm, lightly toasted cream (`{colors.background}`, rgb(255,247,231)) that feels skinlike rather than clinical: not the stark white of a lab or the cool gray of a tech startup, but the hue of natural light hitting unbleached linen. Against this ground, a single deep rose-berry (`{colors.primary}`, rgb(127,37,73)) does all the interactive work. CTAs, links, active states, and promotional bars all route through this one color. There is no secondary accent, no gradient system competing for attention. The brand bet is that one confidently chosen color, used with precision, communicates more than a palette ever could.

Typography pairs two self-hosted traditions with complementary personalities. Ogg Regular — an elegant serif with ink-trap details and classical structure — handles all display and headline moments, appearing at 21–48px with generous letter-spacing (+0.5px) that gives it warmth rather than austerity. Neue Hass Unica (the refined Helvetica successor) covers every body, nav, utility, and CTA role in weight 400, with wide letter-spacing on body copy (+1px at 15–20px) that signals openness and ease of reading. The contrast between Ogg's editorial serif curves and Unica's functional neutrality mirrors the brand's own dual register: aspirational but approachable, curated but inclusive. "Rare Script" — a custom calligraphic face — surfaces as a third voice for campaign accent moments, never for functional copy.

The interaction language is quietly pill-first. Every CTA button — "SHOP NOW", "ADD TO CART", "SIGN UP" — resolves to `{rounded.pill}`, treating interactivity as something rounded and safe rather than sharp-edged and commanding. Shadow usage is minimal by temperament: a warm sand border system for inputs and cards, a soft warm-stone box-shadow for modals only. The motion vocabulary favors transitions of 0.4s at ease-in-out — slow enough to read as considered, not slow enough to feel labored. The overall register is clean editorial warmth: a beauty brand that looks like it actually respects the person looking at it.

**Key Characteristics:**
- Warm cream canvas (`{colors.background}`) — the page breathes like natural light, never clinical white
- Single deep rose-berry (`{colors.primary}`) as the only interactive color — every CTA, link, and focus state
- Ogg Regular serif for all display headings — editorial elegance at weight 400, +0.5px tracking
- Neue Hass Unica for all body, nav, and UI roles — wide +1px letter-spacing signals open, friendly legibility
- "Rare Script" custom calligraphic typeface for campaign accent moments — never used for utility copy
- Pill shape (`{rounded.pill}`) on every CTA button — rounded, inclusive, deliberately non-aggressive
- All-caps wide-tracked label system (`{typography.button-ui}`, 3px tracking) for CTAs and section tags
- Generous section spacing (75–200px) — editorial breathing room between product zones
- Minimal shadow vocabulary — warm-stone soft shadow for modals only; borders carry the outline work
- 0.4s ease-in-out transitions throughout — considered pacing, not rushed interactivity
- Full-bleed photography of diverse skin tones — the visual argument, not decoration
- Warm sand border system (`{colors.border}`) replacing stark grey hairlines — tonal consistency everywhere

## Colors

### Primary
- **Warm Cream** (`{colors.background}`): The defining canvas decision. Page background, hero zones, and any area meant to feel like it "breathes." The alternative to stark white — warm enough to feel human-scaled.
- **Pure White** (`{colors.surface}`): Product card tiles, modal content areas, and input backgrounds — functional white that reads as clean and clinical only when the warm cream surrounds it.
- **Near-Black** (`{colors.ink}`): Primary body copy, nav items, product names, price text. The rgb(0,9,20) is not pure black — it carries a very faint warm undertone that reads harmoniously on the cream canvas.

### Brand Accent
- **Deep Rose-Berry** (`{colors.primary}`): The entire chromatic argument. All primary CTAs (pill-shaped, wide-tracked all-caps), active state links, promotional announcement bars, swatch selection rings, and add-to-cart buttons draw from this single value. Its restraint is its power — every appearance signals action with no ambiguity.
- **Rose Hover** (`{colors.text-hover}`): Deepened version of the primary used on hover states for links and interactive elements — a subtle darkening of the berry that rewards the cursor without jarring the composition.

### Text States
- **Warm Charcoal** (`{colors.ink-secondary}`): Secondary labels, metadata, helper text, and de-emphasized navigation subcategories. A warm dark-gray that reduces visual weight without introducing a new hue.
- **Blush Container** (`{colors.primary-container}`): Light-blush tinted surface used in badge backgrounds and selected swatch frames — the passive presence of the primary hue at low intensity.
- **Warm Sand Border** (`{colors.border}`): Hairline outlines on input fields, card frames, and dividers. Carries the tonal warmth of the canvas into structural chrome.

## Typography

### Font Family
- **Primary Display**: `Ogg Regular` — a classical serif with ink-trap details, used exclusively for headings and editorial display moments. Self-hosted at `ogg-regular.woff2`. Closest Google substitute: Cormorant Garamond. Fallbacks: Georgia, serif.
- **System Sans**: `Neue Hass Unica Regular` — the functional workhorse for every nav, body, button, label, and caption job. A refined revival of Helvetica with better optical spacing. Self-hosted variants: Regular, Medium, Bold. Fallbacks: Helvetica Neue, Helvetica, Arial, sans-serif.
- **Script Accent**: `Rare Script` — custom calligraphic face used for campaign accent words and brand taglines. Not for functional copy. Self-hosted at `rarescript-regular.woff2`.
- **OpenType Features**: Wide additive letter-spacing on body copy (+1px at 15–20px) — a deliberate warmth and readability signal borrowed from editorial print traditions.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Hero campaign headings, product launch callouts — Ogg at 48px, +0.5px tracking |
| `display` | Section display heads, feature product names — Ogg at 32px |
| `heading-section` | Section callout labels, product category names — Ogg at 21px |
| `heading-sub` | Bold subheadings within editorial copy — Neue Hass Unica weight 700 at 16px |
| `body-large` | Intro paragraphs, product hero descriptions — Neue Hass Unica at 20px, +1px tracking |
| `body` | Standard product copy, ingredient lists, editorial content — 15px, +1px tracking |
| `nav-link` | Top navigation, footer links, category filters — 14px Neue Hass Unica weight 400 |
| `button-ui` | All CTA labels — all-caps, 3px letter-spacing, 12px Neue Hass Unica |
| `label-allcaps` | Section tags, eyebrow labels — same treatment as button-ui |
| `caption` | Product filter tags, announcement copy — 12px Neue Hass Unica Medium, 6.4px tracking, uppercase |
| `script-accent` | Campaign accent words, hero tagline script moments — Rare Script at 48px |

### Principles
- Ogg is the editorial serif voice; Neue Hass Unica is the functional sans voice — do not mix their roles.
- All CTA labels are all-caps with 3px wide letter-spacing — the convention signals action while staying calm, never shouting.
- Body copy gets +1px letter-spacing at 15–20px — this is a warmth choice, not a mistake; preserve it.
- No bold weight in body text; weight 700 appears only in sub-headings and badge labels.
- Rare Script is a guest appearance for campaign copy only — it does not belong in navigation, product descriptions, or buttons.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 5px (the extracted micro unit, with 8px-class values harmonized).

Rare Beauty spacing occupies two registers: tight inner chrome (5–15px for internal padding in badges, buttons, and form fields) and vast section breathing room (75–200px between content zones). This bipolar spacing rhythm mirrors the editorial beauty category — products displayed on generous real estate, copy never crammed. The 35px and 75px steps carry most of the section-level work; 100px and 200px appear in full-bleed photography transitions.

### Grid & Container
- Max content width: approximately 1440px, centered content with gutter margins
- Hero: full-bleed photography with overlaid editorial Ogg headlines and CTA pills — no container constraint
- Product grid: 4 columns at desktop, 2 at tablet, 1 at mobile (standard e-commerce cadence)
- Content editorial sections: 2-column split (photography left, headline + CTA right), reversing on alternating rows
- Footer: multi-column link grid on warm cream background, brand tagline in Ogg italic

### Whitespace Philosophy
- Whitespace is the brand's primary luxury signal — each product gets breathing room proportional to its price point.
- The tight/loose contrast (15px inner padding vs 75–200px section gaps) creates the "calm editorial store" rhythm that separates Rare Beauty from crowded mass-market beauty sites.
- Photography containers are always full-bleed or full-column; no padding constrains the imagery.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Page canvas, photography containers, hero zones |
| Hairline (Level 1) | `1px solid {colors.border}` (warm sand) | Input fields, product card outlines, dividers |
| Soft Glow (Level 2) | `rgba(192,187,180,0.5) 0 0 10px 0` | Promotional widget, sticky CTA bar, cart preview |
| Modal (Level 3) | `rgb(153,153,153) 0 2px 10px -3px` | Modal overlays, drawer panels |
| Focus Ring | `{colors.focus-ring}` 2px outline | Keyboard focus on interactive elements |

**Shadow Philosophy**: Rare Beauty's depth system is nearly shadow-free by design. The warm cream background and full-bleed photography provide natural visual layering without artificial depth. The warm-stone glow (`{colors.shadow-soft}`) appears only in promotional overlays and sticky utility chrome — never on product cards or editorial content. Where elevation is needed, warm sand borders carry the structural work. This restraint keeps focus on the photography rather than the chrome.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed photography frames, video containers, announcement bars |
| `sm` | 4px | Product thumbnail borders, input fields, cart item frames |
| `md` | 8px | Modal containers, product cards, quick-view panels |
| `pill` | 9999px | All CTA buttons — "SHOP NOW", "ADD TO CART", "SIGN UP" — and all toggle labels |

Rare Beauty's shape vocabulary is strikingly binary: full-bleed zero-radius for photography and pill for interaction. The middle values (4px, 8px) serve only utility chrome (modals, inputs, thumbnails). There is no square or sharp-cornered button variant — a CTA is a pill or it does not exist. This mirrors the brand's softness ethos: no hard edges in the interactive layer.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button variants

- **`button-primary`** — deep rose-berry (`{colors.primary}`) pill, white all-caps Neue Hass Unica at 3px tracking, 12px font. The universal e-commerce CTA: "SHOP NOW", "ADD TO CART", "FIND YOUR SHADE". Darkens to `{colors.text-hover}` on hover.
- **`button-secondary`** — white fill, dark near-black outline, same pill shape and typography. Used for secondary actions ("LEARN MORE", "VIEW ALL") on warm cream backgrounds.
- **`button-ghost`** — transparent fill, warm sand border, same pill and typography. Used when sitting atop photography or when low visual weight is needed.

### Cards

- **`card-product`** — white tile, 4px radius, product photography flush to card top, product name in `{typography.body}` and price in `{colors.ink-secondary}` below. The contrast between the white tile and the warm cream canvas creates the "product on display" rhythm.
- **`card`** — editorial white panel, 8px radius, 16px padding — for ingredient spotlights, reviews, and brand story content.

### Inputs

- Email and search inputs: white background (`{colors.surface}`), warm sand border (`{colors.border}`), 4px radius, body typography. Focus state transitions border to `{colors.focus-ring}` (deep rose). Placeholder text in `{colors.ink-secondary}` (warm charcoal).

### Badges / Tags

- Promotional badge: deep rose fill (`{colors.primary}`), white text, no radius, all-caps wide-tracked Neue Hass Unica at 8px padding. Used in announcement bars.
- Category badge: blush container fill (`{colors.primary-container}`), rose text (`{colors.primary}`), pill radius, caption typography. Used for product category labels and "NEW" indicators.

### Navigation

- Sticky top bar on warm cream background (`{colors.background}`), centered wordmark "Rare Beauty" in Ogg Regular or brand logo mark, left nav items (SHOP, RARE IMPACT) and right icons (SEARCH, ACCOUNT, CART) in 14px Neue Hass Unica, ink near-black. Active states and hover links shift to deep rose (`{colors.primary}`).
- Announcement bar above nav: deep rose or black background, white all-caps caption text with 3px tracking — site-wide promotions, "FREE SHIPPING" callouts.

## Do's and Don'ts

### Do
- Use `{colors.primary}` deep rose-berry for every primary CTA, active link, and interactive focus state — this is the one chromatic signal in the system
- Set all CTA labels in all-caps Neue Hass Unica with 3px letter-spacing — wide tracking is the button's visual identity, not an option
- Use Ogg Regular for all headings and editorial display text — the serif is the editorial voice; do not substitute it with Neue Hass Unica for display moments
- Keep the warm cream canvas (`{colors.background}`) on page-level backgrounds; use pure white (`{colors.surface}`) only for product cards and modals
- Apply `{rounded.pill}` to every button — the shape is non-negotiable in this system
- Let photography breathe: give full-bleed images zero-radius containers and section gaps of 75px or wider
- Maintain +1px letter-spacing on all body copy — this warmth signal disappears if tracking is reset to 0
- Use `{colors.border}` (warm sand) for all outlines, hairlines, and input borders — never default grey

### Don't
- Don't introduce a second accent color — `{colors.primary}` is the entire interactive chromatic budget
- Don't use Ogg in body, nav, or button roles — it is a headline-only guest; Neue Hass Unica owns all functional text
- Don't use Rare Script for product names, body copy, or CTAs — its role is campaign-accent-only
- Don't add drop shadows to product cards or editorial content panels — the system reads clean without them
- Don't use sharp-cornered buttons — there is no `{rounded.none}` or `{rounded.sm}` button variant in this system
- Don't set body copy tighter than 0px letter-spacing — the open-tracking ethos is a brand choice, not a typographic oversight
- Don't use pure black (`#000000`) as a background; dark hero moments use photography and overlay, not a flat black canvas
- Don't repeat the deep rose in decorative patterns or illustrations — it loses its CTA signal value if it appears passively

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <374px | Compressed hero, stacked single-column, reduced type scale |
| Mobile | 374–767px | Single-column product grid, hamburger nav, full-bleed hero |
| Tablet | 768–979px | 2-column product grid, condensed nav, medium hero |
| Desktop | 980–1280px | 4-column grid, full horizontal nav, editorial split layouts |
| Large Desktop | >1281px | Centered max-width container, expansive section spacing |

### Touch Targets
- Pill CTA buttons use minimum 44px height to meet touch accessibility thresholds
- Navigation icon targets (cart, search, account) padded to 44×44px
- Product swatches maintain 24px minimum diameter with visible focus rings

### Collapsing Strategy
- Navigation: horizontal full nav → condensed links at tablet → hamburger drawer at mobile
- Hero: full 2-column editorial split → photography full-bleed, text stacked below at tablet/mobile
- Product grid: 4-col → 2-col at tablet → 1-col at mobile
- Section spacing scales down: 200px → 100px → 35px across breakpoints

### Image Behavior
- Product photography: aspect-ratio locked, object-fit cover, scales within container
- Hero images: full viewport width, no border radius, height-constrained at mobile to preserve safe area
- Editorial split sections: image column collapses below text column at tablet breakpoint

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (warm cream `#fff7e7`)
- Text: `{colors.ink}` (near-black `#000914`)
- Brand accent: `{colors.primary}` (deep rose-berry `#7f2549`)
- Secondary text: `{colors.ink-secondary}` (warm charcoal `#464545`)
- Border: `{colors.border}` (warm sand `#e8e0d5`)
- CTA: `{colors.primary}`

### Example Component Prompts

- "Build a Rare Beauty product hero section using `{colors.background}` as the warm cream page canvas. Place a full-bleed product photo on the left half and on the right half display a small all-caps `{typography.caption}` eyebrow label in `{colors.ink-secondary}`, a 48px Ogg Regular headline in `{colors.ink}` with +0.5px letter-spacing, a 20px Neue Hass Unica body paragraph at 1.46 line-height with +1px tracking, and a pill-shaped `{components.button-primary}` labeled 'SHOP NOW'. Use 75px top/bottom section padding."
- "Create a Rare Beauty product card tile using `{colors.surface}` (white) as background on the warm cream `{colors.background}` canvas. Product image flush to the top, 4px radius container (`{rounded.sm}`), product name in `{typography.body}` `{colors.ink}`, price in `{colors.ink-secondary}`, and a hover state that shows a `{components.button-primary}` pill at the bottom of the card. No drop shadow on the card."
- "Build a Rare Beauty CTA button in the `{components.button-primary}` style: `{colors.primary}` fill (`#7f2549`), white text, all-caps Neue Hass Unica at 12px with 3px letter-spacing, `{rounded.pill}` shape, 12px 24px padding. On hover, transition background-color to `{colors.text-hover}` over 0.4s ease-in-out."
- "Design a Rare Beauty top navigation bar with `{colors.background}` background, centered 'Rare Beauty' wordmark in Ogg Regular, left-side nav links (SHOP, RARE IMPACT) and right-side icons (search, account, cart) all in `{typography.nav-link}` `{colors.ink}`. Active and hover link states use `{colors.primary}`. Sticky, with a 1px `{colors.border}` bottom separator."
- "Create a Rare Beauty product badge using the `badge-promo` component spec: `{colors.primary}` background, white `{colors.on-primary}` text, no border radius (`{rounded.none}`), `{typography.caption}` styling (12px, 6.4px letter-spacing, uppercase, Neue Hass Unica Medium). Label: 'NEW LAUNCH'. Use for announcement bar placement."
- "Build a Rare Beauty email capture modal: `{colors.surface}` white background, `{rounded.md}` corners, 32px padding, an Ogg Regular 32px headline in `{colors.ink}`, body paragraph in `{typography.body}`, an `{components.input}` field with warm sand border (`{colors.border}`) and focus state that transitions to `{colors.focus-ring}`, and a `{components.button-primary}` pill CTA labeled 'SIGN UP'."

### Iteration Guide

1. Start with `{colors.background}` (warm cream) as the page canvas — the entire visual register flows from this warm ground, not pure white.
2. Reserve `{colors.primary}` (deep rose-berry) exclusively for interactive elements — every CTA, focus ring, and active link. Never use it decoratively.
3. Set display and headline text in Ogg Regular at weight 400; set all functional text (nav, body, buttons, captions) in Neue Hass Unica. Do not mix their roles.
4. Buttons and interactive pills always resolve to `{rounded.pill}` — no square or sharp-corner variants exist.
5. Apply `+1px` letter-spacing to body copy (15–20px sizes) and `3px` letter-spacing to all-caps labels/CTAs — these are brand conventions, not accidents.
6. Keep shadows off editorial content and product cards — rely on warm sand borders (`{colors.border}`) for structure; shadows belong only in modals and overlays.
7. Let photography dominate: full-bleed containers, zero radius, minimum 75px section spacing — the images carry the brand story.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Rare Beauty. Brand names and trademarks belong to their respective owners.