---
title: "Fenty Beauty design system"
variant: extended
source: https://fentybeauty.com/
captured_at: 2026-10-12
theme: light
industry: beauty
generator: Design DNA (https://four.wiralomi.com/style/fentybeauty-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Fenty Beauty · Design System

> Inclusive beauty in bold, vivid frames

**Theme:** light · **Industry:** beauty · **Source:** https://fentybeauty.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Fenty Beauty pairs a restrained white-and-black shopping interface with vivid campaign imagery, especially saturated pink. Compact product carousels, gift edits, and full-width campaign panels make browsing feel editorial while keeping shopping actions close at hand.

## North star

Keep the shopping interface quiet and compact so vivid campaign imagery and beauty products carry the visual impact.

## Overview

The page uses white as its primary canvas, letting product photography and campaign artwork supply the strongest color. Black and deep charcoal anchor the announcement strip, footer, headings, and purchase controls; the saturated pink hero is a campaign moment rather than a replacement for the neutral interface. Brown is used throughout, with heavy, large headings set against compact body copy and small uppercase button labels. A narrow announcement and layered navigation lead into a two-column hero, then into dense horizontal product carousels, gift-category imagery, and full-width campaign panels. The page alternates between open white space and image-heavy bands, while card edges stay visually quiet. Product images are presented in pale neutral fields; gift imagery adds vivid pink and varied beauty packaging. The result is a high-contrast retail system that makes merchandise easy to scan without diluting the personality of each campaign.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, navigation bands, product-card fields, light button fills, and reversed text on dark areas. |
| Beauty Charcoal | `#2d2929` | `--color-beauty-charcoal` | neutral | Primary heading, navigation, product copy, and link color on white. |
| Powder Mist | `#e5e7eb` | `--color-powder-mist` | surface | Pale neutral product-card surface; appears behind quick-shop merchandise rather than defining campaign artwork. |
| Fenty Black | `#000000` | `--color-fenty-black` | brand | Announcement strip, dark footer areas, primary CTA fills, and occasional image-card overlays. |
| Soft Graphite | `#7f7f7f` | `--color-soft-graphite` | neutral | Measured secondary inverse surface; use sparingly for subdued interface or background details. |
| Fenty Fuchsia | `#cc2d75` | `--color-fenty-fuchsia` | accent | Measured pink campaign-card accent; the screenshot’s hero pink is prominent campaign artwork, not a dependable UI token. |
| Sale Red | `#bd0100` | `--color-sale-red` | semantic | Sale-related text accent in product listings; keep limited to discount or promotional details. |
| Quiet Silver | `#d8d8d8` | `--color-quiet-silver` | neutral | Subtle navigation and interface hairlines separating otherwise white regions. |

### Semantic aliases

`--color-canvas` → `#e5e7eb` (Powder Mist) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#000000` (Fenty Black) · `--color-surface-3` → `#7f7f7f` (Soft Graphite) · `--color-surface-4` → `#2d2929` (Beauty Charcoal) · `--color-text` → `#2d2929` (Beauty Charcoal) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#ffffff` (Gallery White) · `--color-accent` → `#cc2d75` (Fenty Fuchsia) · `--color-accent-2` → `#bd0100` (Sale Red)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#2d2929` | `#e5e7eb` | 11.61:1 | AAA |
| `#2d2929` | `#ffffff` | 14.38:1 | AAA |
| `#2d2929` | `#000000` | 1.46:1 | fail |
| `#2d2929` | `#7f7f7f` | 3.59:1 | AA-large |
| `#ffffff` | `#e5e7eb` | 1.24:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#7f7f7f` | 4:1 | AA-large |
| `#cc2d75` | `#e5e7eb` | 4.04:1 | AA-large |
| `#cc2d75` | `#ffffff` | 5:1 | AA |
| `#cc2d75` | `#000000` | 4.2:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Brown | `--font-body` | webfont | 400, 300, 700, 900 | Site-wide display, navigation, product information, buttons, captions, and promotional copy. | Inter |

- **Brown:** Measured weights range from 300 to 900. Use bold, tight-leading headings, compact body copy, and uppercase button and eyebrow labels.

### Type scale — Perfect Fifth (ratio ≈ 1.508, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 900 | 1 | 0.01em | — | Brown | Large, heavy campaign or page headline. |
| h2 | 32px | 700 | 1 | 0.01em | — | Brown | Section headline introducing campaign and shopping modules. |
| h3 | 24px | 700 | 1 | 0.01em | — | Brown | Product names and smaller content headings. |
| body | 14px | 400 | 1.29 | 0 | — | Brown | Descriptions, promotional copy, and standard product information. |
| caption | 12px | 300 | 1.33 | 0 | — | Brown | Compact secondary labels and supporting details. |
| button | 12px | 700 | 1.33 | 0.025em | uppercase | Brown | Uppercase shopping and conversion actions. |
| nav | 14px | 400 | 1.29 | 0 | — | Brown | Header navigation and primary menu labels. |
| link | 12px | 400 | 1.33 | 0 | — | Brown | Small utility, product, and secondary action links. |
| eyebrow | 12px | 700 | 1 | 0.05em | uppercase | Brown | Short uppercase campaign and section labels. |

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 4, 5, 8, 10, 15, 20, 30, 40, 60 px.
- Section rhythm 40px · element gap 10px · card padding — · max content width 1360px.

The measured content reaches a 1360px maximum width, with compact spacing and a 40px section gap. The desktop header is layered into announcement, utility/brand, and category-navigation rows. A two-column hero leads into wide, multi-column product carousels and image-led gift modules. Most sections align to the left; campaign media can run full bleed. Preserve broad white bands between dense merchandise rows and let imagery span the available width.

## Shape & elevation

- Radius: button `50%` · media `2px` · xs `2px` · sm `4px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s ease-in-out` on interactive elements.

The interface is mostly flat: measured shadows are absent, cards have square corners, and product imagery supplies depth. Use thin, restrained separators between white navigation and content areas. Dark overlays and text panels belong to selected campaign tiles, not to a system of floating cards.

## Imagery

Use polished beauty product photography, campaign portraits, and packaging imagery. Product thumbnails sit against pale, low-detail backgrounds, while campaign assets use saturated pink, warm skin tones, and dramatic contrast. Include wide photographic or video banners for major launches and gift promotions. Keep product framing clean and legible, with packaging and shade details visible; treat the promotional artwork as image-led rather than forcing its colors into interface controls.

## Components

### Layered storefront header

A black promotional announcement sits above white utility, centered wordmark, and category-navigation rows; small utility icons remain secondary.

### Campaign hero

Two-column promotional panel pairs a large headline, short description, and contrasting SHOP HOLIDAY button with product-led campaign media.

### Product carousel

Dense horizontal product cards show pale imagery, names, ratings, size or shade details, sale pricing, and quick-shop or add-to-bag actions.

### Gift category tiles

Image-led gift categories use bold photography, occasional dark text overlays, and compact SHOP NOW links.

### Full-width campaign banner

Wide photography or video supports a short uppercase message and a focused action such as FIND YOUR SHADE.

### Newsletter and footer

A dark footer combines email and phone inputs with customer-service links, brand information, social links, and a campaign portrait.

### Measured component styles

- **Primary button** (“START SAVING”): background #000000 · text #ffffff · border 1px solid #ffffff · radius 0px · padding 15px 20px · 700 12px Brown · uppercase
- **Secondary button** (“SHOP HOLIDAY”): background #ffffff · text #000000 · border 1px solid #000000 · radius 0px · padding 15px 20px · 700 12px Brown · uppercase
- **Link** (“Invisimatte Instant Setting + Blotting P”): transparent background · text #2d2929 · radius 0px · padding 15px 0px 0px 0px · 400 16px Brown
- **Input**: transparent background · text #ffffff · radius 0px · padding 15px 20px · 300 12px Brown
- **Card** (“QUICK SHOP”): background #e5e7eb · text #2d2929 · radius 0px · padding 0px · 400 16px Brown
- **Navigation item** (“FENTY BEAUTY”): transparent background · text #2d2929 · radius 0px · padding 0px · 400 16px Brown

## Do

- Keep the core shopping canvas white and product focused.
- Use Beauty Charcoal #2d2929 for primary interface text.
- Reserve Fenty Black #000000 for strong controls and dark footer regions.
- Let saturated pink live primarily in campaign artwork.
- Use Brown-style typography with bold headings and compact copy.
- Keep product cards flat, square-edged, and information rich.
- Separate dense shopping rows with clear white section bands.

## Don't

- Do not apply campaign pink as a universal interface background.
- Do not add heavy shadows to product cards.
- Do not round buttons into pills; measured button corners are square.
- Do not let secondary copy compete with product names or campaign headlines.
- Do not crowd the header into a single navigation row.
- Do not turn illustrative or photographic colors into assumed brand tokens.

## Agent prompt

Build a new Fenty Beauty-style commerce page with a clean white canvas and a layered storefront header. Use Beauty Charcoal #2d2929 for navigation and product text, Fenty Black #000000 for high-contrast actions and dark footer areas, and Quiet Silver #d8d8d8 for restrained dividers. Keep Fenty Fuchsia #cc2d75 as a selective campaign accent, not a global UI fill. Set typography in Brown or a close sans-serif substitute, with bold compact headlines, readable body copy, and uppercase action labels. Combine a large editorial campaign area with dense horizontal product carousels and image-led category tiles. Favor crisp product photography, flat square-edged cards, and spacious white section bands. Keep purchase details and actions close to each product, and avoid decorative shadows or unnecessary interface ornament.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Announcement strip above utility, centered brand, and category navigation rows. | promotional announcement, category navigation, account and shopping utilities | black top strip, white header bands, centered wordmark |
| 2 | hero | Two-column campaign hero with copy on the left and product video or imagery on the right. | primary campaign CTA, seasonal promotion | saturated pink artwork, large uppercase headline, contrasting button |
| 3 | product-grid | Wide, horizontally browsable multi-column product carousel. | quick shop, sale pricing, ratings and shade details | pale product-image fields, compact cards, small sale labels |
| 4 | feature-split | Single wide image-led promotional band with centered copy and action. | social-proof discovery, shop now link | campaign photography, centered heading, small CTA |
| 5 | category-nav | Introductory gift guide followed by four image-led category panels. | gift discovery, category selection | editorial tiles, dark overlay panel, vertical category labels |
| 6 | product-grid | Section heading and short intro above a horizontally browsable multi-column product row. | new-item discovery, add to bag, ratings and pricing | product badges, pale image backgrounds, compact product details |
| 7 | video | Full-bleed campaign media with overlaid centered copy and a shade-finder action. | shade matching, find your shade CTA | wide portrait-led media, overlay text, light button |
| 8 | feature-split | Short full-width photographic strip with centered message and link. | feedback invitation, suggestion link | warm photographic background, compact centered copy |
| 9 | product-grid | Section heading above a dense, multi-column product carousel. | quick shop, ratings, shade and size information | flat product cards, new-item badges, light neutral image fields |
| 10 | feature-grid | Four-column row of image tiles with short descriptions and links. | themed discovery, shop now links | varied campaign art, compact captions, minimal framing |
| 11 | gallery | Social prompt and brand introduction above a four-image brand gallery. | social sharing prompt, brand exploration | portrait grid, white content field, compact labels |
| 12 | footer | Dark, multi-column footer with signup fields, service and brand links, and portrait imagery. | email signup, phone signup, support and policy navigation | black and charcoal surfaces, outlined inputs, social icons |

## Source CSS custom properties (selected)

```css
--chat-messenger-internal-default-font-family: 'Google Sans Text', 'Helvetica Neue', sans-serif;
--chat-messenger-internal-default-font-size: 14px;
--chat-messenger-internal-default-font-color: #1f1f1f;
--chat-messenger-internal-default-secondary-font-color: #757575;
--chat-messenger-internal-default-icon-font-color: #444746;
--chat-messenger-internal-default-primary-color: #0b57d0;
--chat-messenger-internal-default-link-font-color: #0b57d0;
--chat-messenger-internal-default-focus-color: #1e88e5;
--chat-messenger-internal-default-focus-color-contrast: #fff;
--chat-messenger-internal-default-border-color: #e0e0e0;
--chat-messenger-internal-default-border: 1px solid
      #e0e0e0;
--chat-messenger-internal-default-border-radius: 8px;
--chat-messenger-internal-default-chat-border-radius: 0;
--chat-messenger-internal-default-box-shadow: 0 2px 2px 0
      rgba(0, 0, 0, 0.24);
--chat-messenger-color--surface: #f8fafd;
--chat-messenger-color--surface-container: #fff;
--chat-messenger-color--surface-container-high: #f0f4f9;
--chat-messenger-color--primary: #303030;
--chat-messenger-color--primary-container: #e9eef6;
--chat-messenger-color--secondary: #dde3ea;
--chat-messenger-color--on-surface: #1f1f1f;
--chat-messenger-color--on-surface-variant: #444746;
--chat-messenger-color--on-primary: #f2f2f2;
--chat-messenger-color--on-primary-container: #1f1f1f;
--chat-messenger-color--on-secondary: #444746;
--chat-messenger-color--state-layer-on-surface: rgba(31,31,31,.08);
--chat-messenger-color--state-layer-on-primary: hsla(0,0%,100%,.08);
--chat-messenger-color--state-layer-on-secondary: rgba(31,31,31,.08);
--chat-messenger-color--state-layer-scrim: rgba(0,0,0,.16);
--chat-messenger-color--state-on-surface-mute: rgba(68,71,70,.38);
--chat-messenger-color--outline: #c4c7c5;
--chat-messenger-color--outline-variant: hsla(140,1%,46%,.16);
--chat-messenger-color--outline-active: #747775;
--chat-messenger-color--error: #b3261e;
--chat-messenger-color--error-container: #f9dedc;
--chat-messenger-color--on-error-container: #8c1d18;
--chat-messenger-color--link: #0b57d0;
--chat-messenger-shape--corner-fully-rounded: 100px;
--chat-messenger-elevation: 0 2px 16px 0 rgba(0,0,0,.16);
--chat-messenger-font-family: "Google Sans Text";
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/fentybeauty-com