What is Fenty Beauty's primary brand color?

Fenty Beauty has no chromatic brand accent in its marketing chrome. The primary color is pure black (#000000), which carries every border, heading, body text, button fill, and CTA across the page — it appears 2,227 times as the dominant structural token. The only other brand-layer color in the extracted data is a warm dark brown (#4a2a28), which appears once as a background fill and reads as a product-context color rather than a brand accent. The system is deliberately monochromatic: product photography provides all chromatic energy, and the brand's identity comes from typographic rhythm and editorial layout density rather than from a signature brand hue.

What typeface does Fenty Beauty use, and what should I use as a substitute?

Fenty Beauty runs Brown, a geometric sans-serif by Lineto, as its exclusive typeface. Brown is a licensed family — not freely available. It appears at weight 300 (12px micro-copy), weight 400 (14–16px body), and weight 700 (12–32px headings, buttons, and uppercase labels). The uppercase 32px / weight 700 / 0.32px letter-spacing treatment is the brand's primary typographic identity. The closest open-source substitute is Inter at the same weights, though Brown's slightly rounder counters and more geometric proportions at large sizes are hard to replicate exactly. For the uppercase category-label treatment (13px / weight 400 / 3.9px letter-spacing), any geometric sans at the same tracking value will read close.

Why does Fenty Beauty use uppercase for so many elements?

Uppercase formatting in Brown appears across five distinct contexts in the system: the hero h1 (32px / 700 uppercase), section h2 headings (32px / 700 uppercase), product-category labels (14px / 700 uppercase with 0.14px tracking), the generously-tracked category-strip label (13px / 400 / 3.9px tracking), and button labels (14px / 700 uppercase). Lowercase and sentence-case appear only in running body text and product-description paragraphs. The effect is magazine-editorial — uppercase is used as a structural rhythm device rather than as a shouting mechanism. The 3.9px tracking on the category strip is the most distinctive instance: it spreads a 13px label across the width of a wider column, creating a caption-like visual break between sections.

What corner-radius scale does Fenty Beauty use?

Fenty Beauty's radius scale is dominated by 10px (13 occurrences) and 50% circles (10 occurrences for avatar and swatch chips). The secondary radius is 5px (7 occurrences), used on smaller chips and input fields. A 2px radius appears on very small UI elements. The scale notably skips 16px, 20px, and any pill radius — there is no fully-rounded button pill. The primary button uses a 0px radius (flat square corners), which is the most brand-specific radius choice: beauty brands in the same category (Charlotte Tilbury, NARS, Urban Decay) typically use pill or heavily-rounded buttons as a softness signal; Fenty uses flat rectangles, which reads as fashion-editorial directness.

Can I use this DESIGN.md to build my own beauty e-commerce product page?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Fenty Beauty's specific moves: white canvas with pure-black text and borders, Brown uppercase display at 32px / weight 700, dense product-card grid with 10px rounding, and letter-spacing from 0.14px (body) through 3.9px (category label). The token references resolve cleanly — {colors.ink} for all text and borders, {colors.canvas} for all backgrounds, {rounded.sm} for card rounding. The system depends entirely on high-quality product photography for visual richness; without strong imagery the flat monochromatic chrome will read as underdesigned rather than editorially restrained.

Fenty Beauty Design System

Fenty Beauty's marketing-site design system as a DESIGN.md file.

About Fenty Beauty DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source fentybeauty.com

E-commerce & Retail

Fenty Beauty's marketing site operates like a fashion magazine that has been handed a product catalog to fill. The hero is a full-bleed editorial photograph — a model bathed in warm amber light, with a 32px weight-700 uppercase Brown headline ("ALL THINGS AMBER BOUQUET") placed bottom-left in white. Below the hero, the page becomes a relentless product grid: 8–12 product tiles per row, with product names, prices, and star ratings running in Brown at 14–16px, all in the same ink-black that carries every other element on the page. There is no accent color. Where Charlotte Tilbury uses its signature red to signal luxury and NARS uses its matte-black packaging as a design system, Fenty Beauty builds visual interest entirely from photography density and uppercase typographic rhythm.

The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 13 color tokens built from a two-tone structural palette — pure black (#000000) as the single ink/border/CTA color, pure white (#ffffff) as canvas and inverse text, a light gray (#d8d8d8) for UI borders, a near-black (#231f20) for text on product photography, and a light surface (#f2f2f2) for input and chip backgrounds. Eleven typography tokens span Brown at weights 300 through 700 — the range is wider than it first appears, with weight 300 appearing at 12px micro-copy and weight 700 at 32px uppercase display. 14 components cover the editorial hero strip, the product-card grid, the uppercase category label, and the newsletter input.

Feed this file to Claude or Cursor and it reproduces Fenty Beauty's specific moves: pure ink-on-white structure, Brown uppercase display at 32px / weight 700, 10px card rounding, dense product-photography grid, and letter-spacing from 0.14px (body) up to 3.9px (category label caps). The system is worth studying for its discipline: a beauty brand that generates intense visual richness from photography alone, without reaching for the coral or gold accents that define most of its category peers. The restraint is the brand statement.

What makes it distinct

Zero-accent monochromeink (#000000) is the only brand color; the 2,227-occurrence total makes it the dominant structural element across every surface
Brown single-family with uppercase display32px weight 700 uppercase is the hero display treatment; every heading, label, and button shares the same family
Uppercase as brand signalBrown at weight 700 uppercase appears across h1, h2, buttons, and category labels; lowercase and mixed-case appear only in running body text
Product photography at editorial densitya high-count product grid (8–12 tiles above the fold) gives the page its visual richness without any decorative chrome
10px as the dominant radiuscard thumbnails, inputs, and interactive chips use 10px; the scale skips anything above 10px

Live at fentybeauty.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

fentybeauty.com

Explore Fenty Beauty

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Fenty Beauty design system FAQ

Common questions about Fenty Beauty's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Fenty Beauty — official site

Fenty Beauty's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.