---
version: alpha
name: "Rare Beauty"
description: "Rare Beauty's site is the editorial-restrained counterpart to Glossier's candy-pink. The canvas is warm cream `#fdf6f0`, display headings sit in a serif (Recoleta or Tiempos Headline) at 48–72px, and the brand color is \"Rare Lavender\" `#9b6dd4` — a soft purple picked for both Selena Gomez's personal aesthetic and the brand's mental-health advocacy positioning. Where Glossier went candy-pink-and-white and Fenty went bold-and-inclusive-jewel-tones, Rare went soft-lavender-and-cream-and-serif. Photography is shot on warm-amber backgrounds, never against pure white. The Rare Impact Fund (1% of sales for mental health) threads through the brand voice. The whole site reads as \"beauty brand that has read a self-help book and finished it\"."
colors:
  bg: "#fdf6f0"
  bg-soft: "#faf0e6"
  bg-deeper: "#f5e8d8"
  bg-warm: "#fdf3e8"
  surface: "#ffffff"
  surface-soft: "#fdf8f0"
  surface-cream: "#f9efe0"
  brand: "#9b6dd4"
  brand-hover: "#8557c0"
  brand-pressed: "#6e44a8"
  brand-deep: "#583590"
  brand-tint: "#e8dbf5"
  brand-soft: "#d2bfe8"
  on-brand: "#ffffff"
  text: "#1a1a1a"
  text-strong: "#000000"
  text-muted: "#5a5a5a"
  text-soft: "#8a8a8a"
  text-faint: "#bcbcbc"
  text-on-brand: "#ffffff"
  link: "#9b6dd4"
  link-hover: "#6e44a8"
  selected-bg: "#e8dbf5"
  border: "#e8dccd"
  border-strong: "#cdb89c"
  border-soft: "#f0e6d8"
  border-brand: "#9b6dd4"
  blush: "#e8a8a8"
  rose: "#d4847a"
  amber: "#cb9c45"
  success: "#3d8b62"
  warning: "#cb9c45"
  danger: "#a85353"
  info: "#9b6dd4"
typography:
  display:
    fontFamily: "Recoleta"
    fontSize: "72px"
    lineHeight: 1.65
    letterSpacing: "-0.015em"
  body:
    fontFamily: "Inter"
    fontSize: "16px"
    lineHeight: 1.65
  mono:
    fontFamily: "SFMono-Regular"
rounded:
  button: "6px"
  card: "8px"
  pill: "9999px"
spacing:
  xs: "0px"
  sm: "4px"
  md: "12px"
  lg: "24px"
  xl: "40px"
---

## Overview

## Overview

Rare Beauty's site is the editorial-restrained counterpart to Glossier's candy-pink. The canvas is **warm cream** `#fdf6f0`, display headings sit in a warm-modern serif (Recoleta or Tiempos Headline) at 48–72px, body in Inter at 16px line-height 1.65. The brand color is **Rare Lavender** `#9b6dd4` — a soft purple picked for both Selena Gomez's personal aesthetic and the brand's mental-health advocacy positioning.

Where Glossier went candy-pink-and-white and Fenty went bold-and-inclusive-jewel-tones, Rare went **soft-lavender-and-cream-and-serif**. Photography is shot on warm-amber backgrounds, never against pure white — recalling editorial-magazine product photography. CTAs are 0px-radius rectangular, lavender bg with white text. The Rare Impact Fund (1% of sales fund mental health initiatives) threads through the brand voice and footer.

The whole site reads as "beauty brand that has read a self-help book and finished it" — restrained, sincere, slightly literary. Voice is gentle-confident without going self-help-cliché.

**Key Characteristics:**
- Warm cream canvas `#fdf6f0`
- Rare Lavender `#9b6dd4` brand color
- Recoleta / Tiempos Headline warm-modern serif display
- Inter body at line-height 1.65
- 0–4px radius on UI (rectangular-restrained)
- Photography on warm-amber backgrounds, never white
- Rare Impact Fund prominent in nav and footer
- Mixed case display, UPPER eyebrows + buttons
- Light-only canvas
- Gentle-confident voice

## Colors

### Primary
- **Background** (`#fdf6f0`): warm cream off-white.
- **Bg Soft** (`#faf0e6`): deeper cream alternate band.
- **Surface** (`#ffffff`): cards lift from cream.
- **Text** (`#1a1a1a`): body. Soft near-black.

### Brand — Rare Lavender
- **Brand** (`#9b6dd4`): primary CTA + brand mark.
- **Brand Hover** (`#8557c0`), **Pressed** (`#6e44a8`), **Deep** (`#583590`).
- **Brand Tint** (`#e8dbf5`): selection wash.

### Accent
- **Blush** (`#e8a8a8`): warm pink for blush-product photography moments.
- **Rose** (`#d4847a`): warmer rose for editorial accents.
- **Amber** (`#cb9c45`): warm gold for warning + Rare Impact Fund branding.

### Borders
- **Border** (`#e8dccd`): warm cream hairline.
- **Border Strong** (`#cdb89c`): emphasis.

### Semantic
- success `#3d8b62`, warning amber, danger `#a85353`, info brand.

## Typography

### Font Family
- **Display**: Recoleta / Tiempos Headline (warm-modern serifs by Latinotype/Klim). Falls back to Garamond Premier Pro → Georgia → serif.
- **Body**: Inter regular. Falls back to Avenir Next → system stacks.

### Hierarchy

| Role | Font | Size | Weight | LH | Tracking |
|------|------|------|--------|-----|----------|
| display-hero | Recoleta | 72 | 600 | 1.05 | -0.015em |
| display-lg | Recoleta | 48 | 600 | 1.15 | -0.008em |
| h1 | Recoleta | 36 | 600 | 1.2 | -0.005em |
| h2 | Recoleta | 28 | 600 | 1.25 | 0 |
| h3 | Inter | 22 | 600 | 1.3 | 0 |
| eyebrow | Inter | 11 | 600 | 1.2 | 0.20em UPPER |
| body | Inter | 16 | 400 | 1.65 | 0 |
| label | Inter | 12 | 600 | 1.3 | 0.10em |
| button | Inter | 13 | 600 | 1.0 | 0.10em UPPER |

### Principles
- **Serif for display, sans for body + UI** — the dichotomy is the brand.
- **Body line-height 1.65** — generous editorial.
- **Mixed case display, UPPER eyebrows + buttons.**
- **Heavy tracking on uppercase** (0.10–0.20em).

## Layout

- Base 4px, 96-160px between sections (editorial)
- Page max width 1280px, prose 680px
- Hero: full-bleed warm-amber product photography with overlapping serif headline
- Product grid: 3-up at desktop, 2-up at tablet, 1-up at mobile

mobile <479: hero 72→44; nav hamburger; 1-up grid. tablet: 2-up. desktop+: 3-up.

## Elevation & Depth

| Level | Treatment |
|-------|-----------|
| 1 | `0 2px 12px rgba(155,109,212,0.06)` resting |
| 2 | `0 6px 20px rgba(155,109,212,0.12)` hover |
| 3 | `0 12px 32px rgba(155,109,212,0.16)` featured |
| 4 | `0 24px 64px rgba(155,109,212,0.18)` modal |

## Shapes

| Tier | Value | Use |
|------|-------|-----|
| Micro | 2 | indicators |
| Standard | 4 | **cards** |
| Comfortable | 6 | tooltips |
| Relaxed | 8 | featured |
| None | 0 | **buttons + inputs** |
| Pill | 9999 | shade pills |

## Components

### Buttons (3 variants — 0px radius)

**Primary** — Rare Lavender:
- bg `#9b6dd4`, text white, 13px Inter 600 0.10em UPPER
- Padding 14×32, **radius 0**
- Hover: bg `#8557c0`

**Secondary** — bordered:
- bg transparent, text lavender, 1px lavender border, radius 0

**Ghost**: bg transparent, text lavender, padding 10×20.

### Cards
- bg white, **4px radius**, padding 24
- Soft lavender-tinted shadow `0 2px 12px rgba(155,109,212,0.06)`

### Pills (shade selectors, product tags)
- bg `brand-tint`, text `brand-pressed`, pill radius

### Inputs
- bg white, 1px gray-cream border, radius 0
- Focus: border lavender

### Navigation
- 80px sticky header, cream bg with hairline
- Rare Beauty wordmark left (lavender, serif italic), top-level nav center, "Rare Impact" + cart right

- Standard ease, slower durations (200-480ms) — soft brand pacing
- Card hover: shadow lift, no transform
- Photography slow-pan on key product images

- text on bg: `#1a1a1a` on `#fdf6f0` = **13.8:1** AAA
- on-brand on brand: `#ffffff` on `#9b6dd4` = **4.6:1** AA
- 2px lavender focus ring + 2px outset

Shade swatches use `aria-label="Soft Pink Tint, suits warm undertones"`. Photography decorative `aria-hidden`.

### Tone
**Gentle-confident.** Restrained, sincere, slightly literary.

### Microcopy patterns
- Primary CTA: **"Add to Bag"** / **"Shop the line"**
- Sign-up: **"Join Rare Beauty"**
- Errors: **"Something didn't quite work — let's try that again."**
- Empty: **"Your bag is empty — start with our bestsellers."**

### CTA verb conventions
- **Shop / Add / Discover / Read more**
- Avoid: urgent ("Last chance"), too-casual ("Yum")

**Light-only on web.** Cream canvas IS the brand.

Rare Beauty descends from Selena Gomez's 2020 brand launch, with explicit mental-health-advocacy positioning (Rare Impact Fund — 1% of sales). Rare Lavender `#9b6dd4` differentiates from Glossier candy-pink and Fenty jewel-tones. Recoleta serif anchors display; Inter handles body.

**Named influences:**
- **Selena Gomez (founder, 2020)** — mental-health-aware positioning
- **Recoleta by Latinotype** — warm-modern serif
- **Glossier + Fenty Beauty** — beauty contemporaries
- **Editorial-magazine product photography** — warm-amber lineage
- **Rare Impact Fund** — 1% sales mental-health initiative

## Do's and Don'ts

### Do
- **Cream canvas + Rare Lavender + Recoleta serif.**
- **0px radius on buttons + inputs.**
- **Photography on warm-amber backgrounds, never pure white.**
- **Mixed case display, UPPER eyebrows + buttons.**
- **Body line-height 1.65 — editorial.**
- **Mention Rare Impact Fund where relevant.**

### Don't
- **Don't use pure white bg.** Cream is the brand.
- **Don't substitute Rare Lavender** with Tailwind purple.
- **Don't add gradients on CTA.**
- **Don't use serif for body.** Display only.
- **Don't add a friendly mascot.**
- **Don't use urgency microcopy.**

### Quick Color Reference
- bg (cream): `#fdf6f0`
- text: `#1a1a1a`
- brand (Rare Lavender): `#9b6dd4` / hover `#8557c0`
- blush: `#e8a8a8` / rose: `#d4847a`
- border: `#e8dccd`

### Example Component Prompts

> Build a Rare Beauty-style hero: cream canvas, full-bleed product photo on warm-amber background right 50%, 72px Recoleta serif heading "Rare Beauty" mixed-case left, 18px Inter subhead. Primary CTA "Shop the line" 0px-radius lavender `#9b6dd4` 13px Inter 600 0.10em UPPER, padding 14×32.

> Design a product card: white surface (lifts from cream), 4px radius, 24px pad, soft lavender-tinted shadow. Product photo top, 22px Inter h3 product name, eyebrow "BLUSH · MATTE" in 11px UPPER 0.20em lavender. Price right-aligned in 18px serif.

> Render a shade swatch pill: pill radius, brand-tint bg, lavender text 12px Inter 600 0.10em UPPER "SOFT PINK".

> Build a "Add to Bag" CTA: 0px radius, Rare Lavender bg, white 13px Inter 600 0.10em UPPER, padding 14×32.

> Design a Rare Impact callout: warm cream surface, amber accent, 11px UPPER 0.20em eyebrow "RARE IMPACT FUND" amber, 22px Recoleta heading + 16px Inter body about mental-health initiative.

### Iteration Guide

1. **Cream canvas + Rare Lavender + Recoleta serif.**
2. **0px radius buttons + 4px cards — restrained-rectangular.**
3. **Warm-amber photography backgrounds, never white.**
4. **Mixed case display, UPPER eyebrows + buttons.**
5. **Mention Rare Impact Fund for mental-health-relevant copy.**
6. **Gentle-confident voice — sincere, slightly literary.**
7. **Reject pure white, candy-pink (that's Glossier), gradient CTAs.**