What is Rare Beauty's primary brand color?

Rare Beauty's brand voltage is deep plum #7f2549 — a near-burgundy that sits midway between red and purple, appearing 211 times in the captured page as text (106 occurrences) and border (105 occurrences). It drives every display headline (the Ogg Regular h2 and h3 tiers), every navigation link, the search input text, and all product-card callout text. Notably, it never appears as a background fill — the brand color exists entirely in text and outline form against the white canvas. The plum is not declared in any CSS custom property in the extracted set; it is hard-coded on typography and border rules throughout the page.

What typefaces does Rare Beauty use, and what should I substitute?

Rare Beauty runs three typefaces: Ogg Regular (a licensed humanist serif from OH no Type Co) at 18-48px for every display heading and the search input; Neue Hass Unica Regular and Medium (a licensed geometric neo-grotesque from Linotype) at 9-20px with 1-6.4px letter-spacing for all UI text, buttons, and nav labels; and Rare Script (a proprietary custom script) at 48px for logotype moments in section headers. For substitutes: Cormorant Garamond or Freight Display Pro replaces Ogg at display sizes. Inter at weight 400 with CSS letter-spacing of 0.15-0.4em replaces Neue Hass Unica at small tracked sizes. There is no open-source match for Rare Script — replace with a display script like Parisienne for logotype applications.

What corner-radius values does Rare Beauty use?

Rare Beauty uses only two radius values across the entire captured page. The dominant radius is 50% (105 occurrences), which renders as a full circle on square icon buttons and color-swatch chips. The secondary radius is 100px (2 occurrences), used on the outline CTA button and the search input field to produce a pill shape. There is no 4px, 8px, or 16px card-radius in the system — every bordered surface is either circular or full-pill. The absence of conventional card rounding is the shape language's most distinctive move: it keeps all edges soft and avoids the grid-card aesthetic common to e-commerce platforms.

What are the earthy gradient colors used in Rare Beauty illustrations?

The gradient illustration tier runs five stop colors: pale peach #ffdcc6, medium peach #ebb288, warm terracotta #e5955b, rich rust #c86128, and deep terracotta brown #732a18. Each appears exactly once in the extracted data, all classified as layer:brand with gradient usage only — meaning they appear exclusively inside CSS gradients on decorative illustration elements, not as solid fills, text colors, or borders. The gradient reads as a warm sunset skin-tone range, consistent with the brand's diversity-and-inclusion positioning. These values should not be used in UI chrome; they are illustration-only tokens.

How does Rare Beauty style its navigation links?

Rare Beauty's navigation links run Neue Hass Unica Regular at 12px with 3px letter-spacing in tracked uppercase, rendered in the brand's deep plum #7f2549 on a white background with zero padding and zero background fill. The links sit at 18px line-height with 0px border-radius — no hover pill background is captured in the marketing surface. The top nav includes the Rare Beauty wordmark flush left and the primary product category links (Shop, About, Foundation Finder, @RareBeauty, and the mental health initiative). Secondary utility links (search, bag icon) appear at the right. The overall nav is the brand's most compact typographic moment — 12px tracked uppercase at near-zero padding keeps it from competing with the 48px Ogg display headlines below.

Rare Beauty Design System

Rare Beauty's marketing design system: Ogg Regular serif headers in deep plum, Neue Hass Unica tracked-uppercase UI text, pill geometry, and earthy gradient illustration.

About Rare Beauty DESIGN.md

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

E-commerce & Retail

Rare Beauty's site opens on a full-bleed photograph of Selena Gomez holding the True to Myself Foundation, with the h2 headline set in Ogg Regular at 48px in deep plum — a serif typeface you would more likely find in Vogue than on a DTC makeup storefront. Below the photograph the page shifts to a product grid and editorial rails, all of it carrying that same serif for section titles while Neue Hass Unica handles every chip, button, and navigation label at 10-12px in tracked uppercase. The combination is not what the category convention is — most beauty brands (Charlotte Tilbury, NARS, Fenty) run a single geometric sans across both tiers. Where they flatten the display tier to a geometric sans and let photography carry personality, Rare Beauty inverts it and lets the typeface carry personality against the photography.

The DESIGN.md file packages the extracted system into a machine-readable spec for React and AI tools. Inside: 14 color tokens organized around a single deep-plum voltage (#7f2549, 211 total occurrences as text and border), a near-black ink tone (#000914 at 768 occurrences), a warm-cream canvas tint (#fff7e7) used for subtle section backgrounds, and a set of earthy peach-terracotta gradient stops that exist only in decorative illustration. Twelve typography tokens span Ogg Regular at 18-48px for display and heading, Neue Hass Unica Regular/Medium at 9-20px with letter-spacing 1-6.4px for UI, and the proprietary Rare Script at 48px for brand logotype moments. Two radius values — 50% circles and 100px pills — define the entire shape language. Sixteen component definitions cover the full-bleed hero, editorial product card, outline CTA button, nav link chip, and text input.

Feed this file to Claude or Cursor to reproduce Rare Beauty's specific moves: an Ogg serif display tier for headings (substitute Freight Display or Cormorant Garamond), tracked-uppercase Neue Hass Unica for all UI chrome (substitute Inter at 400 with manual letter-spacing), deep plum as the single brand voltage for text and borders, and full-pill geometry everywhere. The one disciplined move worth studying is the absence of any brand-colored fill — the brand color appears only as text and outline, never as a button background or section surface. The canvas stays white; the plum carries the brand through type alone.

What makes it distinct

Serif display in e-commerceOgg Regular at 48px carries every h2/h3, the only beauty site in the directory with an editorial serif headline tier
Tracked uppercase as UI voiceNeue Hass Unica at 10-12px / 3-5px letter-spacing runs every button, nav link, and label, giving the chrome a fashion-editorial feel
Deep plum voltagethe brand's near-burgundy #7f2549 appears 211 times as both text and border, driving every headline and interactive element against the white canvas
Pill-only radiusthe system uses 50% circles and 100px pills exclusively; there is no 4-8px card rounding anywhere on the page
No solid brand fillthe primary button and nav links are text-only or outline; the only background color is pure white, with peach-terracotta appearing only in gradient illustrations

Live at rarebeauty.com

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

rarebeauty.com

Explore Rare 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.

Other

Specialty colors.

Rare Beauty design system FAQ

Common questions about Rare 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.

Rare Beauty — official site

Rare 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.