# Fenty Beauty — DESIGN.md

## Overview
Fenty Beauty is Rihanna's inclusive beauty empire that redrew the cosmetics industry around radical shade range. Canvas is pure black (`#0a0a0a`) or near-black with deep saturated ink. Type runs a precise grotesk display (Söhne / Inter / proprietary all-caps face) often paired with an italic serif accent. The voice is luxurious, club-night, unapologetically Black and unapologetically Caribbean — gold filigree on black, full-bleed product hero shots, model casting that spans every Pantone of human skin. The signature 50-shade Pro Filt'r foundation grid IS the brand — it appears on hero, product, and editorial pages as a strip of swatches that demonstrates the brand's core promise visually before any copy lands.

## Color
- **Primary (gold):** `#d4af37` — Muted-warm gold (wordmark + dividers)
- **Canvas:** `#0a0a0a` — Pure-black canvas
- **Canvas warm:** `#1a0f0a` — Slight warmth on editorial bands
- **Ink:** `#ffffff` — White type on black
- **Accent (signal red):** `#c41e3a` — Rare 'NEW' tags and limited-edition flags
- **50-shade strip:** ramps from pale ivory `#f5e6d3` to deep ebony `#2a1810` (50 stops)
- **Muted:** `#7a7a7a`
- **Hairlines:** `rgba(212,175,55,0.20)` — gold hairlines on black

## Typography
- **Display:** Söhne / Inter, weight 700, all-caps with +2 to +4% tracking, 48–80px hero
- **Sub-display:** weight 600, 22–28px section heads, often all-caps
- **Italic serif accent:** rare editorial pull-quote moments, 24–36px italic
- **Body:** Söhne, weight 400, 15–17px, 1.6 line-height
- **Caption:** weight 500, 12–13px, tracked +1.5px for category eyebrows
- **Mono:** none

## Spacing & rhythm
8-base (8/16/24/32/48/64/96). Section padding 64–96px. Product hero often consumes full viewport — single gloss bottle on jet-black with gold rim-light occupying 60% of the screen. Shade-strip is full-width, no padding.

## Motion signature
Hero video plays product close-ups — gloss bottles tilting under spotlight, foundation pumps swirling. Shade swatches reveal sequentially on scroll (~80ms cascade between swatches). Hover on product tiles raises a subtle gold-stroke border over 200ms. The brand voice is 'spotlight reveal' — every motion implies a magazine cover shoot.

## Components observed
- `shade-strip-50-swatch` — horizontal strip of 50 foundation swatches
- `product-hero-black-with-gold-rim` — single product on black with gold rim-light
- `model-multi-tone-editorial-grid` — multi-skin-tone model gallery
- `all-caps-tracked-headline` — 80px Söhne all-caps with +3% tracking
- `shade-finder-quiz-card` — shade-match diagnostic card
- `button-primary-gold-on-black` — gold-fill or gold-outline CTA on black
- `category-divider-gold-rule` — thin gold hairline between sections
- `footer-dark-with-gold-wordmark` — black footer with gold Fenty wordmark

## Trademark signals
- 50-shade foundation grid — horizontal strip of swatches from lightest to deepest — appears as the brand-promise visual on every page, before any copy
- Pure-black canvas with gold filigree accent — gold (`#d4af37`) on wordmark, category dividers, inline 'NEW' tags — luxury without saturation overload
- Editorial model casting spanning the entire skin-tone spectrum — every model moment shows multiple skin tones together as default, not as 'diversity feature'
- All-caps display typography with wide letter-spacing (+2 to +4%) — fashion-week-poster, not e-commerce-hero
- Product photography on jet-black with gold-accent rim-light — unified studio setup across the catalog

## What they DON'T do
- No dropping the 50-shade strip — the brand-promise visualization is non-negotiable
- No cream/beige canvas — pure-black IS the luxury voltage (cream is Glossier territory)
- No saturating the gold — muted-warm `#d4af37`, never bright-yellow
- No tightening the all-caps tracking — locked at +2 to +4%
- No single-model imagery — every model moment shows range
- No emoji, no playful illustrations, no warm-pink retail palette

## Exemplar pages
- https://fentybeauty.com/
- https://fentybeauty.com/foundation
- https://fentybeauty.com/lip
- https://fentybeauty.com/about

## When to reference
Reach for Fenty when the user wants luxury inclusive beauty with editorial-fashion voltage — cosmetics brands with broad shade range, premium retail with strong multi-cultural casting, club-night/nightlife brands. The "pure-black canvas + 50-swatch strip + gold filigree + all-caps tracked display" combination is the most-copyable Fenty move. Pairs well with any brand that wants to assert range and luxury simultaneously without resorting to the cream/blush palette every other beauty brand reaches for.
