Rare Beauty-inspired

# Visual style inspired by Rare Beauty's storefront (Makeup)

A full style reference in DESIGN.md format: tokens in the front matter, then type scale, components, layout, do's and don'ts. Use it for colour, type, spacing and components only — never Rare Beauty's name, logo, product photos, copy or trademarks.

---
version: alpha
name: "Rare Beauty"
description: |-
  Rare Beauty by Selena Gomez is a vegan and cruelty-free makeup brand that radiates warmth, inclusivity, and a soft, approachable confidence. The brand's visual identity is anchored in a rich, berry-burgundy primary palette, with `#7f2549` and `#6f0f38` serving as the deep, romantic core for primary buttons, badges, and key accents. This intensity is balanced by a delicate, sun-kissed secondary palette of peach and terracotta tones (`#ffdcc6`, `#ebb288`, `#e5955b`, `c86128`), which appear in product photography overlays, gradient backgrounds, and soft surface tints. A clean, off-white canvas (`#fdfbf8`) provides a breathable, editorial backdrop, while a deep navy ink (`#000914`) grounds body text and high-contrast UI elements. The brand makes deliberate use of `{rounded.full}` pill shapes for CTAs and `{rounded.lg}` for product cards, creating a tactile, friendly feel that mirrors the brand's "makeup made to feel good" philosophy. Typography relies on a clean, humanist sans-serif stack, featuring Neue Hass Unica Bold and Regular as the primary voice, with `-apple-system` and `San Francisco` as fallbacks for a crisp, native reading experience on all devices. Signature design moves include the use of a soft, blush-toned surface (`#fdf6f0`) for cards and modals, a muted gray (`#dedede`) for hairline borders, and a vibrant, optimistic sky blue (`#5bbad5`, `#1990c6`) for secondary accents and limited-edition packaging highlights. The overall feeling is one of gentle luxury — not austere or cold, but inviting, human, and emotionally resonant.

colors:
  primary: "#7f2549"
  primary-active: "#6f0f38"
  primary-disabled: "#cfa3b4"
  ink: "#000914"
  body: "#121212"
  muted: "#732a18"
  muted-soft: "#c86128"
  hairline: "#dedede"
  hairline-soft: "#fdf6f0"
  canvas: "#fdfbf8"
  surface-soft: "#ffdcc6"
  surface-card: "#fdf6f0"
  on-primary: "#ffffff"
  accent-peach: "#ebb288"
  accent-terracotta: "#e5955b"
  accent-blue: "#5bbad5"
  accent-blue-active: "#1990c6"
  accent-blue-dark: "#136f99"
  badge-new: "#da532c"
  star-rating: "#7f2549"
  scrim: "#000000"

typography:
  display-xl:
    fontFamily: "'Neue Hass Unica Bold', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -0.5px
  display-lg:
    fontFamily: "'Neue Hass Unica Bold', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.3px
  display-md:
    fontFamily: "'Neue Hass Unica Bold', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0
  title-lg:
    fontFamily: "'Neue Hass Unica Regular', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0
  title-md:
    fontFamily: "'Neue Hass Unica Regular', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: 0
  title-sm:
    fontFamily: "'Neue Hass Unica Regular', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  body-md:
    fontFamily: "'Neue Hass Unica Regular', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: "'Neue Hass Unica Regular', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0
  caption:
    fontFamily: "'Neue Hass Unica Regular', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.35
    letterSpacing: 0.2px
  button-md:
    fontFamily: "'Neue Hass Unica Bold', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.5px
    textTransform: uppercase
  button-sm:
    fontFamily: "'Neue Hass Unica Bold', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.5px
    textTransform: uppercase
  link:
    fontFamily: "'Neue Hass Unica Regular', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0
  nav-link:
    fontFamily: "'Neue Hass Unica Regular', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.3px
    textTransform: uppercase
  badge:
    fontFamily: "'Neue Hass Unica Bold', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif"
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.5px
    textTransform: uppercase

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 32px
  full: 9999px

spacing:
  xxs: 2px
  xs: 4px
  sm: 8px
  md: 12px
  base: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  section: 64px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: 14px 32px
    height: 48px
  button-primary-active:
    backgroundColor: "{colors.primary-active}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.full}"
  button-primary-disabled:
    backgroundColor: "{colors.primary-disabled}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.full}"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: 13px 31px
    height: 48px
    border: "2px solid {colors.primary}"
  button-tertiary-text:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.button-md}"
  button-pill-accent:
    backgroundColor: "{colors.accent-peach}"
    textColor: "{colors.ink}"
    typography: "{typography.button-sm}"
    rounded: "{rounded.full}"
    padding: 10px 24px
  icon-button-circle:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    height: 40px
    width: 40px
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    height: 72px
    borderBottom: "1px solid {colors.hairline}"
  nav-link-active:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    borderBottom: "2px solid {colors.primary}"
  nav-link-inactive:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
  search-bar-pill:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.full}"
    padding: 12px 24px
    height: 48px
    border: "1px solid {colors.hairline}"
  search-field-segment:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    padding: 8px 16px
  product-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.lg}"
    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.08)"
  product-card-photo:
    rounded: "{rounded.lg} {rounded.lg} 0 0"
    aspectRatio: "1 / 1"
  product-card-badge:
    backgroundColor: "{colors.badge-new}"
    textColor: "{colors.on-primary}"
    typography: "{typography.badge}"
    rounded: "{rounded.full}"
    padding: "4px 8px"
    position: "absolute"
    top: "8px"
    left: "8px"
  product-card-swatch:
    rounded: "{rounded.full}"
    height: 24px
    width: 24px
    border: "2px solid {colors.canvas}"
    boxShadow: "0 0 0 1px {colors.hairline}"
  product-card-price:
    typography: "{typography.title-sm}"
    textColor: "{colors.ink}"
  product-card-rating:
    typography: "{typography.caption}"
    textColor: "{colors.star-rating}"
  hero-section:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "{spacing.section} {spacing.lg}"
    minHeight: 400px
  hero-cta:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "16px 40px"
    height: 56px
  footer:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-sm}"
    padding: "{spacing.xxl} {spacing.lg}"
  footer-link:
    typography: "{typography.link}"
    textColor: "{colors.canvas}"
  newsletter-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.full}"
    padding: "12px 20px"
    height: 48px
    border: "1px solid {colors.hairline}"
  newsletter-submit:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-sm}"
    rounded: "{rounded.full}"
    padding: "12px 24px"
    height: 48px
  accordion-header:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.title-sm}"
    padding: "{spacing.base} 0"
    borderBottom: "1px solid {colors.hairline-soft}"
  accordion-body:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.body}"
    typography: "{typography.body-sm}"
    padding: "{spacing.sm} 0 {spacing.base} 0"

---

## Components

### Buttons
**`button-primary`** — The primary call-to-action, rendered as a pill-shaped button with a deep berry background (`#7f2549`) and white text. Used for "Add to Bag", "Shop Now", and primary form submissions. On hover, it transitions to the darker `#6f0f38`. The disabled state uses a muted, desaturated version of the primary color (`#cfa3b4`). The uppercase, bold typography reinforces confidence and brand consistency.

**`button-secondary`** — An outlined variant with a white background, a 2px solid primary border, and primary-colored text. Used for secondary actions like "View Details" or "Learn More". Maintains the same pill shape and uppercase typography as the primary button for visual harmony.

**`button-tertiary-text`** — A text-only button with no background or border, using the primary color for the text. Used for less prominent actions, such as "Cancel" or "Skip", within modals or forms.

**`button-pill-accent`** — A softer, accent-colored pill button using the peach tone (`#ebb288`). Used for promotional banners, limited-time offers, or as a secondary CTA on hero sections. The dark ink text (`#000914`) ensures readability against the warm background.

### Cards
**`product-card`** — The standard product display card, featuring a white background, soft rounded corners (`{rounded.lg}`), and a subtle drop shadow. The card contains a square product photo with rounded top corners, a product name in `body-sm`, a price in `title-sm`, a star rating in the primary color, and an optional "NEW" badge in the vibrant orange-red (`#da532c`). Color swatches are rendered as small, circular buttons with a thin border.

### Navigation
**`top-nav`** — A fixed or sticky navigation bar with a white background and a subtle bottom border. Navigation links are set in uppercase, 14px, with a 0.3px letter-spacing. The active link is underlined with a 2px primary-colored border. The nav height is 72px, accommodating the brand logo, main links, and utility icons (search, account, cart).

**`nav-link-active`** — The active state for a top-level navigation link. It inherits the nav-link typography but changes the text color to the primary berry and adds a 2px solid bottom border in the same color.

**`nav-link-inactive`** — The default state for a top-level navigation link. Uses the dark ink color (`#000914`) and no underline.

### Forms
**`text-input`** — A standard text input field, used for forms like login, registration, and checkout. It has a white background, a 1px solid hairline border (`#dedede`), full pill rounding, and 12px horizontal padding. The placeholder text uses the `body-sm` typography.

**`newsletter-input`** — A dedicated input for the email newsletter signup in the footer. It shares the same pill shape and border styling as the standard text input but is paired with a primary-colored submit button.

### Footer
**`footer`** — A dark footer section with a deep navy background (`#000914`) and white text. Links are styled in the `link` typography and are white. The footer includes columns for customer service, about, and connect, as well as a newsletter signup form and social media icons.

### Hero
**`hero-section`** — A full-width hero banner with a soft peach background (`#ffdcc6`) and dark ink text. It features a large display headline, a supporting subtitle, and a prominent primary CTA button. The section has generous vertical padding (`{spacing.section}`) and a minimum height of 400px to ensure visual impact.

### Accordion
**`accordion-header`** — The clickable header of an accordion component, used for FAQs or product details. It has a white background, a bottom border, and uses the `title-sm` typography. The header expands to reveal the `accordion-body`, which contains the content in `body-sm` typography.

## Responsive Behavior

| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 744px | Single-column layout. Top nav collapses to a hamburger menu. Product cards stack vertically. Hero section reduces padding and font size. Footer links stack. Search bar becomes a full-width element. |
| Tablet | 744–1128px | Two-column grid for product listings. Top nav remains visible but may condense. Hero section maintains two-column layout with reduced padding. Footer columns arrange in a 2x2 grid. |
| Desktop | 1128–1440px | Three or four-column grid for product listings. Full top nav with all links visible. Hero section uses full two-column layout with maximum padding. Footer uses a four-column layout. |
| Wide | > 1440px | Content max-width is capped (e.g., 1440px) and centered. Margins increase on either side. Grid columns may expand to four or five. All typography scales up slightly for readability. |

### Touch Targets
- All interactive elements (buttons, links, inputs) have a minimum touch target of 44x44px.
- Icon buttons are 40x40px with a full pill shape.
- Product card swatches are 24x24px, but the entire card is tappable.
- Accordion headers have a minimum height of 48px.

### Collapsing Strategy
- On mobile, the top navigation collapses into a hamburger menu. The search bar collapses into an icon that expands on tap.
- The product filter sidebar collapses into a "Filter" button that opens a modal or drawer.
- The footer's multi-column layout collapses into a single column, with each section becoming an accordion.
- Hero sections may reduce the number of visible elements, hiding secondary CTAs or decorative imagery.

## Known Gaps

- **Agent usage policy:** Historical tokens are unverified. Do not use them as current-site measurements or claim a faithful reconstruction.






- **Historical provenance:** The original capture time and raw evidence are unavailable. Token values have not been freshly verified; the [collection manifest](../../data/manifest.json) records this entry as historical_unverified.

- Hover and focus states for all components (e.g., button-secondary hover, input focus ring) were not reliably extracted and should be defined based on brand guidelines.
- Error states for form inputs (e.g., invalid email, missing required field) are not documented.
- The exact color for the "NEW" badge (`#da532c`) was inferred; its hover and active states are unknown.
- Dark mode color tokens are not available.
- Sub-brand or limited-edition palette variations (e.g., for collaborations) are not captured.
- The specific font weights for "Neue Hass Unica Bold" and "Neue Hass Unica Regular" were assumed based on their names; actual weight values may vary.
- The `boxShadow` values for product cards and other components are approximations.
- The `aspectRatio` for product card photos is assumed to be 1:1; it may vary for different product types.
- The `textTransform: uppercase` for button typography is inferred from the brand's visual style; it should be verified against the live site.