What is Ulta Beauty's primary brand color?

Ulta Beauty's brand voltage is deep magenta #cc0058 — a saturated reddish-pink wired into the PAL design-token system as --pal-color-brand-magenta-500 and --pal-colors-default-background-brand-02-knockout. It appears 100 times in the captured page: 46 as text, 8 as background fill, 46 as border. The magenta drives sale badge text, promotional chip borders, brand-coded hover states on interactive elements, and the animated promotional band headings. The theme-color meta tag on the site declares a slightly lighter variant #e90b5a (wired as --pal-color-brand-magenta-400), but the rendered dominant magenta is #cc0058. A darker hover step #232323 (near-charcoal) replaces the magenta on button-primary-hover states.

What typeface does Ulta Beauty use?

Ulta Beauty runs Circular (a licensed geometric sans by Lineto) as its sole typeface — the CSS custom property --asc-text-global-font-family declares 'CircularStd-Book', sans-serif. The weight strategy is unusual for e-commerce: weight 300 (light) carries 184 of the most-frequent text instances — product names, descriptions, price labels, and nav links. Weight 500 (medium) is used for section headings and card titles. Weight 700 (bold) appears only on the 40px display h2 and on strong emphasis elements. This three-weight Circular system with a 300-as-default creates a catalog page that feels editorial and airy despite containing hundreds of products. Inter at equivalent weights is the closest open-source substitute; DM Sans at 300/500/700 is a second option.

What is Ulta's PAL design token system?

PAL stands for Palette and is Ulta's internal CSS custom-property naming convention, visible in the extracted page as the --pal-* prefix on 140+ variables. The system distinguishes between two tiers: raw color tokens (--pal-color-brand-magenta-500 maps to the hex #cc0058) and semantic role tokens (--pal-colors-default-background-brand-02-knockout maps the same magenta to its specific contextual role). This two-tier system allows the same magenta hex to be reused across many semantic contexts — button background, badge text, hover border — without each context hard-coding the hex. It is the most structured token system visible in the marketing-surface extractions for a beauty brand in the directory.

What corner-radius values does Ulta Beauty use?

Ulta runs a radius system anchored on two values: 8px (135 occurrences, the product card default) and 100px (65 occurrences, all interactive elements). The 100px value renders every primary button, promotional chip, sale badge, and category navigation pill as a full-pill shape. 4px (77 occurrences) appears on smaller form chips, toggle buttons, and secondary UI elements. 50% (19 occurrences) renders circular icon buttons and avatar elements. 16px (5 occurrences) appears on a few larger card surfaces. The binary between 8px cards and 100px pills is the system's shape philosophy — content cards are mildly rounded, interactive surfaces are fully-rounded pill shapes.

What are the five secondary brand-color families in Ulta's system?

The PAL token system includes five secondary brand-color ramps beyond the primary magenta: Berry (#b90b70 at 500, a deep berry-red-purple), Plum (#8c1865 at 500, a dark plum), Golden (#d99107 at 500, a warm gold-amber), Fire (#f04c24 at 400, a vivid orange-red), and Teal (#13b7bf at 500, a medium teal). Each family has a 50-600 ramp of 5-7 steps. In the captured marketing homepage, only the magenta is rendered with meaningful frequency (100 occurrences); the other five families appear with zero rendered occurrences in the extracted color data, meaning they are declared in CSS but not applied to any visible element on the homepage. They appear in campaign-specific promotional sections and category-themed editorial bands that were not captured in this extraction.

Ulta Beauty Design System

Ulta Beauty's marketing design system as DESIGN.md: deep magenta #cc0058, Circular at weight 300, PAL token system, pill-only interactive geometry, 15 colors, 16 components.

About Ulta Beauty DESIGN.md

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

E-commerce & Retail
Marketplaces

Ulta Beauty's homepage is one of the denser e-commerce surfaces in the directory — a white canvas stacked with product carousels, promotional campaign bands, an AI-assistant widget, editorial category rails, and a loyalty program block, all carrying 4733 scanned elements. Against that density, the design system holds a single chromatic voltage: deep magenta #cc0058, wired into a PAL (Palette) design-token system as --pal-color-brand-magenta-500. It appears on 100 elements — 46 as text, 8 as background, 46 as border — and carries every sale badge, promo headline, interactive chip hover state, and brand-code border across the page. Every other surface is black, near-black, grey, or white. The magenta is the only element that makes the product grid feel like a store rather than a database.

The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 15 color tokens drawn from the PAL system's most-rendered values, organized around a near-charcoal ink (#232323, 4264 total occurrences), the brand magenta, and a white-canvas surface; 14 typography tokens spanning Circular at 12-40px in weights 300/500/700 for the full hierarchy; 5 radius tokens dominated by the 8px card value and 100px pill interactive value; 8 spacing tokens on an 8px base; and 16 component definitions covering the pill primary button, the magenta sale badge, the AI-assistant widget, the product grid card, and the top navigation.

Feed this file to Claude or Cursor to reproduce Ulta's specific moves: white canvas with near-charcoal ink (#232323, not #000000), Circular at weight 300 for most body and product text, deep magenta reserved exclusively for brand-coded interactive moments and promotional callouts, and 100px full-pill geometry on every interactive element. The disciplined move worth borrowing is the PAL semantic token layer — the system distinguishes between `--pal-color-brand-magenta-500` (the raw hex) and `--pal-colors-default-background-brand-02-knockout` (the semantic role for knockout-on-brand use), allowing the same magenta to be reused without overloading a single variable.

What makes it distinct

Deep magenta voltage#cc0058 wired as --pal-color-brand-magenta-500 and --pal-colors-default-background-brand-02-knockout drives every interactive brand moment against the white canvas
Circular at weight 300 as the workhorseproduct names, descriptions, and most body text run light weight, giving a 4000+ element product page a featherweight editorial feel
100px pill-only interactive geometryevery primary button, badge, and category chip renders as a full pill; no 4-8px card rounding exists on interactive surfaces
PAL token system140+ CSS custom properties in --pal-color-* and --pal-colors-default-* namespaces expose a complete semantic layer that maps colors to their contextual role
Five secondary brand-color familiesBerry, Plum, Golden, Fire, and Teal ramps each appear in promotional campaign sections and never in primary navigation or product chrome

Live at ulta.com

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

ulta.com

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

Ulta Beauty design system FAQ

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

Ulta Beauty — official site

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