---
version: alpha
name: "Ulta Beauty"
website: "https://www.ulta.com"
description: >-
  A mass-market beauty retailer whose marketing site runs Circular — a licensed geometric
  sans — in weights 300/500/700 across a white canvas anchored by a deep-magenta voltage
  at #cc0058, the only chromatic brand moment in a system that otherwise runs pure black
  and white. The brand operates a structured design-token system named PAL (Palette), with
  140+ CSS custom properties organizing the magenta into a six-step ramp (magenta 50-600),
  plus five secondary brand color families (Berry, Plum, Golden, Fire, Teal) that appear
  only in promotional campaign bands and never in primary navigation or product chrome.
  Circular at weight 300 carries 80% of the body copy — an unusually light weight for an
  e-commerce product grid — giving the dense product catalog a featherweight editorial feel.

seo:
  title: "Ulta Beauty Design System for React — deep magenta #cc0058, Circular geometric sans, pill buttons, 16 components"
  metaDescription: "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. For React, Next.js, and AI tools."
  highlights:
    - "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 workhorse — product names, descriptions, and most body text run light weight, giving a 4000+ element product page a featherweight editorial feel"
    - "100px pill-only interactive geometry — every primary button, badge, and category chip renders as a full pill; no 4-8px card rounding exists on interactive surfaces"
    - "PAL token system — 140+ 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 families — Berry, Plum, Golden, Fire, and Teal ramps each appear in promotional campaign sections and never in primary navigation or product chrome"
  tags:
    - "E-commerce & Retail"
    - "Marketplaces"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.ulta.com"
      title: "Ulta Beauty — official site"
      description: "Ulta Beauty's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Ulta Beauty's primary brand color?"
      answer: "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."
    - id: "typography"
      title: "What typeface does Ulta Beauty use?"
      answer: "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."
    - id: "pal-token-system"
      title: "What is Ulta's PAL design token system?"
      answer: "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."
    - id: "radius-philosophy"
      title: "What corner-radius values does Ulta Beauty use?"
      answer: "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."
    - id: "promotional-brand-colors"
      title: "What are the five secondary brand-color families in Ulta's system?"
      answer: "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."

mockups:
  - "marketing-hero"
  - "media-grid"

colors:
  primary: "#cc0058"
  primary-hover: "#232323"
  primary-bright: "#e90b5a"
  ink: "#232323"
  ink-secondary: "#000000"
  ink-muted: "#6e6e6e"
  ink-mid: "#505050"
  canvas: "#ffffff"
  surface-blush: "#fdf1f3"
  hairline: "#e6e6e6"
  berry: "#b90b70"
  plum: "#8c1865"
  golden: "#d99107"
  fire: "#f04c24"
  teal: "#13b7bf"

typography:
  display-xl:
    fontFamily: "Circular, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 40px
    letterSpacing: "-0.3px"
  display-lg:
    fontFamily: "Circular, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 32px
    letterSpacing: "-0.3px"
  heading-md:
    fontFamily: "Circular, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 28px
    letterSpacing: "-0.3px"
  heading-sm:
    fontFamily: "Circular, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 24px
    letterSpacing: "0.15px"
  body-lg:
    fontFamily: "Circular, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 20px
    letterSpacing: "0.25px"
  body-md:
    fontFamily: "Circular, sans-serif"
    fontSize: 14px
    fontWeight: 300
    lineHeight: 16px
    letterSpacing: "0.25px"
  body-sm:
    fontFamily: "Circular, sans-serif"
    fontSize: 12px
    fontWeight: 300
    lineHeight: 16px
    letterSpacing: "0.3px"
  body-sm-bold:
    fontFamily: "Circular, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 16px
    letterSpacing: "0.3px"
  nav-link:
    fontFamily: "Circular, sans-serif"
    fontSize: 12px
    fontWeight: 300
    lineHeight: 16px
    letterSpacing: "0.3px"
  label-md:
    fontFamily: "Circular, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 16px
    letterSpacing: "0.25px"
  button-md:
    fontFamily: "Circular, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 16px
    letterSpacing: "0.25px"
  label-caps:
    fontFamily: "Circular, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 16px
    letterSpacing: "1px"
  body-md-medium:
    fontFamily: "Circular, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 20px
    letterSpacing: "0.25px"
  caption:
    fontFamily: "Circular, sans-serif"
    fontSize: 12px
    fontWeight: 300
    lineHeight: 24px
    letterSpacing: "0.3px"

rounded:
  none: "0px"
  sm: "4px"
  md: "8px"
  lg: "16px"
  pill: "100px"
  full: "50%"

spacing:
  xxs: "2px"
  xs: "4px"
  sm: "8px"
  md: "11px"
  base: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "48px"

components:
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.display-xl}"
    padding: "0"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.heading-md}"
    padding: "0"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
    padding: "0"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
    padding: "0"
  button-primary:
    backgroundColor: "{colors.ink-secondary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "11px 24px"
    height: "40px"
    borderColor: "{colors.ink-secondary}"
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "11px 24px"
    height: "40px"
    borderColor: "{colors.primary-hover}"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "11px 24px"
    height: "40px"
    borderColor: "{colors.ink}"
  button-brand:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "11px 24px"
    height: "40px"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "8px 16px"
    height: "56px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.nav-link}"
    padding: "4px 8px"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: "8px"
  badge-magenta:
    backgroundColor: "{colors.surface-blush}"
    textColor: "{colors.primary}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.pill}"
    padding: "4px 8px"
    borderColor: "{colors.primary}"
  promo-band:
    backgroundColor: "{colors.ink-secondary}"
    textColor: "{colors.canvas}"
    typography: "{typography.heading-md}"
    rounded: "{rounded.none}"
    padding: "32px 24px"
  product-name:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    padding: "0"
  price-label:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm-bold}"
    padding: "0"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "8px 16px"
    height: "40px"
    borderColor: "{colors.ink-mid}"
---

## 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

| Token | Size | Weight | Line Height | Tracking | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 40px | 700 | 40px | -0.3px | Hero campaign h2 |
| `{typography.display-lg}` | 32px | 500 | 32px | -0.3px | Sub-hero display |
| `{typography.heading-md}` | 24px | 500 | 28px | -0.3px | Section headings |
| `{typography.heading-sm}` | 20px | 500 | 24px | 0.15px | Card section titles |
| `{typography.body-lg}` | 16px | 300 | 20px | 0.25px | Default body copy |
| `{typography.body-md}` | 14px | 300 | 16px | 0.25px | Product names, descriptions |
| `{typography.body-sm}` | 12px | 300 | 16px | 0.3px | Caption, meta |
| `{typography.body-sm-bold}` | 12px | 700 | 16px | 0.3px | Price labels, bold tags |
| `{typography.nav-link}` | 12px | 300 | 16px | 0.3px | Utility nav links |
| `{typography.label-md}` | 14px | 500 | 16px | 0.25px | Medium-weight labels |
| `{typography.button-md}` | 14px | 500 | 16px | 0.25px | Button labels |
| `{typography.label-caps}` | 12px | 500 | 16px | 1px | Uppercase-tracked section labels |
| `{typography.body-md-medium}` | 16px | 500 | 20px | 0.25px | Medium-weight body |
| `{typography.caption}` | 12px | 300 | 24px | 0.3px | Extended caption rows |

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