Ulta Beauty Design System

Overview

Ulta Beauty's homepage is the most product-dense surface in this collection of beauty design systems. Weight as editorial restraint: where most mass-market e-commerce platforms commit to weight 400 or 500 for product text to maintain legibility at density, Ulta runs Circular at weight 300 for product names, descriptions, and most body copy — 184 of the most-frequent typography instances are light-weight. The effect is a catalog that reads less like a database and more like an editorial magazine spread, even while stacking several hundred products across the same page viewport.

The chromatic system is singular. Deep magenta #cc0058 — wired as --pal-color-brand-magenta-500 — carries 100 elements across the page: sale badge text, promotional chip borders, promo headline color, and hover-state fills. Everything else is near-charcoal (#232323), pure black (#000000), mid-grey (#6e6e6e), or white. Unlike Sephora (which runs a bold black-and-white with a bright red CTA) or Fenty (which uses warm beige and deep red), Ulta has a single saturated accent and holds it strictly to callout and promotional roles.

PAL — a structured semantic layer: the PAL design-token system distinguishes between raw color values (--pal-color-brand-magenta-500) and semantic role tokens (--pal-colors-default-background-brand-02-knockout). This two-tier pattern means the same magenta hex is reused across many contextual roles without each context hard-coding the raw value — a sophistication visible in the 140+ exposed CSS custom properties that goes beyond most DTC beauty brands.

Key Characteristics:

• Deep magenta (#cc0058, --pal-color-brand-magenta-500) — 100 page occurrences: 46 text, 8 bg, 46 border. Every promotional callout and brand-coded interactive element.
• Circular at weight 300 as the default text weight — 184 occurrences, dominating product names, descriptions, and nav labels.
• 100px pill geometry on every primary button, badge, category chip, and promo pill — 65 occurrences.
• PAL token system with semantic and raw tiers: 140+ CSS custom properties in --pal-color- and --pal-colors-default- namespaces.
• Five secondary brand-color families (Berry, Plum, Golden, Fire, Teal) — declared in PAL system but absent from the homepage render (zero occurrences); appear only in campaign-specific sections.
• Primary button: pure black (#000000) fill, white text, 100px pill — the black CTA on the white canvas with the magenta reserved for brand-coded moments only.
• 8px dominant card radius (135 occurrences) contrasting with 100px pill on interactive surfaces.

Colors

Brand

• Primary Magenta ({colors.primary} — #cc0058): frequency 100. Used as text (46), bg (8), border (46). Wired as --pal-color-brand-magenta-500 and --pal-colors-default-background-brand-02-knockout. The brand's sole chromatic voltage — sale badges, promotional chip borders, and brand-coded hover fills.
• Primary Bright ({colors.primary-bright} — #e90b5a): frequency 1, as background. Wired as --pal-color-brand-magenta-400 and --pal-colors-default-content-brand-02. The slightly brighter magenta step — declared as the theme-color meta value and used in xstrong brand-background contexts.

Structural

• Ink ({colors.ink} — #232323): frequency 4264. Used as text (2134), border (2130). Wired as --pal-color-neutral-900 and --pal-colors-default-content-default. The dominant near-charcoal — not pure black. Drives every product name, price, description, and UI label on the page.
• Ink Secondary ({colors.ink-secondary} — #000000): frequency 1225. Used as text (407), bg (53), border (461), gradient (304). Wired as --pal-color-button-primary-background and --asc-color-primary-default. Pure black fills the primary CTA button and appears inside gradient-band promotional sections.
• Ink Muted ({colors.ink-muted} — #6e6e6e): frequency 366. Used as text (183), border (183). Wired as --pal-color-neutral-600. Disabled states, secondary nav labels, and de-emphasized metadata.
• Ink Mid ({colors.ink-mid} — #505050): frequency 26. Used as text (13), border (13). Wired as --pal-color-neutral-700 and --pal-color-input-border-default. The input field border and tertiary structural chrome.
• Canvas ({colors.canvas} — #ffffff): frequency 354. Used as text (135), bg (137), border (82). Wired as --pal-color-neutral-white and --pal-colors-default-background-default. Page floor and button-primary text color.
• Primary Hover ({colors.primary-hover} — #232323): the button-primary hover state — near-charcoal rather than a darker black, wired as --pal-color-button-primary-background-hover.

Surface

• Surface Blush ({colors.surface-blush} — #fdf1f3): frequency 27, all as background. Wired across multiple PAL surface variables including --pal-color-brand-magenta-50. The light-blush background behind promotional badge areas and light-brand-accent sections.
• Hairline ({colors.hairline} — #e6e6e6): frequency 3, as background. Wired as --pal-color-neutral-200 and --pal-colors-default-background-subtle. Very light grey for the most subtle surface differentiators.

Campaign Brand Families (declared in PAL; absent from homepage render)

• Berry ({colors.berry} — #b90b70): wired as --pal-color-brand-berry-500. Deep berry-red-purple. Campaign editorial use only.
• Plum ({colors.plum} — #8c1865): wired as --pal-color-brand-plum-500. Dark plum. Campaign editorial use only.
• Golden ({colors.golden} — #d99107): wired as --pal-color-brand-golden-500. Warm gold-amber. Campaign editorial use only.
• Fire ({colors.fire} — #f04c24): wired as --pal-color-brand-fire-400. Vivid orange-red. Campaign editorial use only.
• Teal ({colors.teal} — #13b7bf): wired as --pal-color-brand-teal-500. Medium teal. Campaign editorial use only.

Typography

Font Family

The system runs Circular (Lineto, a licensed geometric sans) as its sole typeface — declared in the CSS as CircularStd-Book in the --asc-text-global-font-family custom property. The weight strategy is the defining typographic move: weight 300 (light) is the default, appearing on product names, descriptions, nav labels, and captions. Weight 500 (medium) handles section headings, card titles, and button labels. Weight 700 (bold) appears only on the 40px display h2 and on price emphasis elements. For open-source substitutes, Inter at 300/500/700 is the closest match; DM Sans at the same weights is a second option.

Hierarchy

Principles

Weight 300 is the loudest decision in the system. Running light-weight type on 4733 elements — most of them product catalog entries — creates a page that feels airy despite its density. The system then uses weight contrast (300 vs. 500) rather than size contrast to mark hierarchy within the product card: the product name and the price sit at the same 12-14px size but the price uses weight 700 to achieve visual priority. Display uses negative tracking (-0.3px) at 24-40px to tighten the headline geometry; body runs slight positive tracking (+0.25-0.3px) to keep light-weight text legible at small sizes.

Layout

Spacing System

• Base unit: 8px (212 occurrences) — the dominant gap and margin value throughout.
• Tokens: {spacing.xxs} 2px · {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 11px · {spacing.base} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 48px.
• Button padding: {spacing.md} 11px vertical / {spacing.lg} 24px horizontal — the PAL system names this as the primary-button padding spec.
• Section rhythm: 32-48px between major content bands.

Grid & Container

• Hero band: full-width editorial photograph with headline and CTA, centered on a black-gradient overlay at desktop.
• Product grid: 4-column product cards at desktop with 8px gap — each card holds a product image (square), product name (14px/300), brand name (12px/300 muted), and price (12px/700).
• Campaign bands: full-width alternating dark (black fill) and light (white) promotional sections, each carrying a 24px section heading and 2-3 CTA pills.
• AI-assistant section: a full-width editorial block with a card-grid on the right and a 36px headline plus body paragraph on the left.

Rhythm

The page alternates between campaign density (full-width black promotional bands with photography) and product density (4-column white product grids). The two rhythms sit at opposite aesthetic registers — the campaign bands are high-contrast, large-format, and photography-led; the product grids are information-dense, lightweight, and catalog-style. The system uses the band alternation to give the eye repeated relief across a long scroll.

Elevation

The PAL system defines three elevation tiers: --pal-elevation-low, --pal-elevation-medium, and --pal-default-elevation-high. In the extracted page, captured shadow instances use a neutral rgba(0,0,0,*) stack — no tinted shadows. Product cards in resting state carry the elevation-low value (0px -1px 1px 0px rgba(0,0,0,.05) + 0px 1px 1px 0px rgba(0,0,0,.1) + 0px 2px 2px 0px rgba(0,0,0,.15)) — a very subtle bottom-weighted lift above the white canvas. Modals and drawers use the elevation-high tier.

Shapes

The radius system is dual-register: soft product cards and pill-shaped interactive surfaces.

• {rounded.none} 0px — not present on most surfaces; sharp corners reserved for section-band edges.
• {rounded.sm} 4px — 77 occurrences on form chips, toggle buttons, small badges, and text inputs.
• {rounded.md} 8px — 135 occurrences, the dominant product card radius. Every product tile in the grid uses 8px rounding.
• {rounded.lg} 16px — 5 occurrences on larger card surfaces and the AI-assistant panel.
• {rounded.pill} 100px — 65 occurrences. Every primary button, category navigation chip, promotional CTA, and sale badge pill. The PAL system exposes this as --pal-border-corners-rounded: 6.25rem.
• {rounded.full} 50% — 19 occurrences on circular icon buttons and avatar elements.

Components

hero-heading — White {colors.canvas} text, Circular 40px / 700 at {typography.display-xl}, transparent background. The captured hero headline sits on a photography overlay — "Messi Elixir Parfum Intense" — at 40px bold.

section-heading — Ink {colors.ink} text, Circular 24px / 500 at {typography.heading-md}, transparent background. "BOGO 50% off select suncare" and similar promotional section labels.

body-paragraph — Ink {colors.ink} text, Circular 16px / 300 at {typography.body-lg}, transparent background. The AI-assistant description and editorial section copy: "Get recommendations, ask questions and find what you're looking for, in seconds."

body-paragraph-muted — Muted {colors.ink-muted} text, Circular 12px / 300 at {typography.body-sm}. Secondary labels and de-emphasized copy across product cards.

button-primary — Pure black {colors.ink-secondary} fill, white text, Circular 14px / 500 at {typography.button-md}, 100px pill {rounded.pill}, 11×24px padding, 40px height, black border. "Shop now" is the canonical instance.

button-primary-hover — Near-charcoal {colors.primary-hover} (#232323) fill — the system shifts from pure black to its near-charcoal ink on hover.

button-secondary — White {colors.canvas} fill, ink text, ink border, same pill geometry. Used for secondary actions on campaign bands.

button-brand — Deep magenta {colors.primary} fill, white text, pill geometry. Used specifically for brand-coded CTAs in promotional contexts where the magenta needs to be the fill rather than the text.

top-nav — White {colors.canvas} surface, ink text, Circular 12px / 300 at {typography.nav-link}, 56px height, flat bottom edge. Houses the Ulta wordmark, the primary category nav (Makeup / Skin Care / Hair / Fragrance / Bath & Body / Tools / Salon / Wellness), a search input, and account/bag icons.

nav-link — Transparent background, muted {colors.ink-muted} text in {typography.nav-link} (12px / 300), 4×8px padding.

card — White {colors.canvas} surface, ink text, Circular 12px / 300 at {typography.body-sm}, 8px radius {rounded.md}, 8px padding. Every product tile in the 4-column grid.

badge-magenta — Light blush {colors.surface-blush} background, magenta {colors.primary} text and border, Circular 12px / 500 / 1px tracking at {typography.label-caps}, 100px pill, 4×8px padding. Used for "SALE", percentage-off labels, and "NEW" callouts.

promo-band — Pure black {colors.ink-secondary} fill, white text, Circular 24px / 500 at {typography.heading-md}, flat corners, 32×24px padding. Full-width campaign sections.

product-name — Circular 14px / 300 at {typography.body-md}, ink text. Product name below the product image — deliberately light-weight to let price contrast via weight 700.

price-label — Circular 12px / 700 at {typography.body-sm-bold}, ink text. The price element in each product card — the system's weight-based hierarchy over the same-size product name.

text-input — White {colors.canvas} fill, ink text, Circular 14px / 300 at {typography.body-md}, 4px radius {rounded.sm}, 8×16px padding, 40px height, 1px {colors.ink-mid} border. Resting state; active state thickens border to 2px at {colors.ink-secondary}.

Do's and Don'ts

Do use {colors.primary} (#cc0058) only on promotional/callout surfaces — sale badges, promo chip borders, brand-coded hover fills. The primary CTA button uses pure black ({colors.ink-secondary}), not the magenta; applying the magenta to the default primary button misreads the brand hierarchy.

Do default to Circular weight 300 for product names and body copy. The lightness is the brand's typographic signature for catalog density — switching to weight 400 or 500 as the default makes the product grid feel heavier and undercuts the editorial-airy feel.

Do use 100px pill geometry ({rounded.pill}) for every interactive element — buttons, chips, badges, and nav pills. The 8px card radius belongs to content cards; interactive surfaces are pill-shaped.

Do keep the five secondary campaign colors (Berry, Plum, Golden, Fire, Teal) inside campaign-specific promotional bands only. They are not part of the primary navigation or product chrome; applying them to standard UI elements creates a multi-accent chaos that the PAL system was designed to prevent.

Don't use {colors.ink} (#232323) and {colors.ink-secondary} (#000000) interchangeably. The near-charcoal #232323 is the default text color for all product and UI copy; pure black #000000 is reserved for button fills, gradient overlays, and strong structural borders. The difference is subtle but systematic.

Don't apply negative tracking to body or small text. The -0.3px tracking in {typography.display-xl} and {typography.heading-md} is a display-size tightening; at 12-14px light-weight it would make the already-light text read as compressed and difficult to scan on a dense product grid.

Don't introduce {colors.surface-blush} (#fdf1f3) as a general section background. It is the background for the {component.badge-magenta} callout surface — using it as a hero or section fill would read as a site-wide pink tint and dilute the magenta's callout function.

Don't use the campaign brand colors (Berry #b90b70, Plum #8c1865, Golden #d99107, Fire #f04c24, Teal #13b7bf) as text or border colors outside dedicated campaign bands. In the PAL system they have their own semantic token families — using them ad hoc outside their campaign context breaks the PAL semantic layer's intent.

Known Gaps

• Campaign sections: the five secondary brand-color families (Berry, Plum, Golden, Fire, Teal) are declared in the PAL system but appear with zero render frequency in the homepage capture. Their actual usage patterns — which campaign uses which family, how they interact with product photography — are not represented in this spec.
• Dark mode: no dark-mode variant is present in the marketing surface or hinted at in the PAL custom properties.
• Hover, focus, and active states: documented for {component.button-primary-hover} only. The full PAL state matrix (focus rings, disabled tints, toggle active/inactive, input focus) is partially visible in the custom properties but not in the rendered component capture.
• Loyalty / Ultamate Rewards surfaces: the reward-program account surfaces carry their own point-balance display, tier-status badge, and dashboard card system that are not represented in the marketing-page extraction.
• Mobile navigation: the mobile drawer and flyout category navigation are not captured in the desktop-first extraction.
• Motion and animation: the PAL system exposes --pal-anim-transition-* variables at 100ms through 5000ms and --pal-anim-functions-* easing curves, but no component animation sequences are represented in the token spec.
• AI assistant widget: the Ask Ulta AI block carries its own message-bubble components (a primary blue and a near-black secondary, both in the --asc-color-message-bubble-* custom property family) that are not included in the primary component set — they belong to a third-party chat widget.