---
version: alpha
name: "Under Armour"
website: "https://www.underarmour.com"
description: >-
  A performance-sportswear e-commerce site whose marketing canvas is achromatic to the point of philosophy — near-black #1d1d1d carries every CTA, nav bar, icon, and border while pure white handles cards and page floor, leaving zero chromatic brand voltage visible in the design system itself. Type runs NeuePlakUA (a condensed grotesque purpose-built for the brand) at weight 800 uppercase for hero displays and weight 600 at small sizes for every link and button label; the system treats all-caps lettering at 64px with 2px tracking as the brand's loudest typographic moment. Corner rounding is nearly absent — buttons use a full 9999px pill and inputs sit at 3px, but cards and section containers run completely flat.

seo:
  title: "Under Armour Design System for React — near-black, NeuePlakUA, pill CTAs, 15 components"
  metaDescription: "Under Armour's marketing design system as a DESIGN.md file. Near-black ink #1d1d1d on white canvas, NeuePlakUA grotesque at weight 800, pill-only CTAs, 14 color tokens, 15 components. For React, Next.js, and AI tools."
  highlights:
    - "Achromatic brand discipline — the entire marketing chrome runs on near-black and white with zero chromatic accent; all product photography carries the color"
    - "NeuePlakUA weight 800 uppercase — 64px / 2px tracking hero headlines are the loudest typographic moment; the brand shouts in condensed grotesque, not color"
    - "Pill-only CTA geometry — primary buttons are 9999px radius pills at 44px height with no other rounded surface in the system"
    - "Photography-as-chromatic-strategy — product and athlete images supply every color the chrome deliberately withholds"
    - "Weight 600 as the system's emphasis ceiling — links, nav labels, and button text sit at 600; 800 only appears in uppercase display moments"
  tags:
    - "E-commerce & Retail"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Under Armour's marketing site is achromatic by design — and not as a restraint, but as a strategy. The nav bar, primary CTA buttons, icon set, product-card borders, and tooltip backgrounds all render in the same near-black (#1d1d1d), while the page floor and card surfaces are pure white. There is no brand-voltage red, no accent blue, no highlight color applied anywhere in the chrome. The photography — athlete shots in neon training gear, colorway flats of shoes, outdoor action sequences — does every chromatic job the design system refuses to do. Where Nike draws a full-bleed gradient and Adidas adds a yellow accent strip, Under Armour withholds.

    The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 14 color tokens drawn almost entirely from an achromatic scale — near-black ink, mid-gray muted text, light-gray surface accents, pure white canvas — plus a handful of declared but rarely-rendered semantic colors (error red, amber, green) that live in form-validation states rather than brand chrome. Ten typography tokens run NeuePlakUA, a condensed grotesque Under Armour commissions for the brand; display tops at 64px weight 800 in uppercase with 2px tracking, body sits at 14–16px weight 400–600, and labels run 12px. Fifteen components cover the pill CTA, the near-black nav bar, the photography-first hero, hairline-bordered product cards, and the flat text input.

    Feed this file to Claude or Cursor to reproduce Under Armour's specific moves: near-black-on-white chrome with zero chromatic interruption, NeuePlakUA condensed grotesque at athletic weights, 9999px pill buttons as the only rounded surface, and photography as the sole source of color on the page. The system is worth studying not for what it does with color but for what it refuses to do — the achromatic discipline is the brand's confidence signal, and every colorful product image reads louder against it.
  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.underarmour.com"
      title: "Under Armour — official site"
      description: "Under Armour'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 Under Armour's primary brand color?"
      answer: "Under Armour's marketing site has no chromatic brand voltage — the near-black #1d1d1d is the dominant color and it is structural, not a brand accent. It appears 792 times across text (390), border (390), background (11), and shadow (1) uses. Wired as --base-color-black, --Button-primary-background-color, --color-primary-text, --color-nav-background, and dozens of component tokens. There is no red CTA, no accent blue, no highlight color in the chrome. Product photography and athlete imagery supply every chromatic moment on the page."
    - id: "typography"
      title: "What typeface does Under Armour use, and what should I use as a substitute?"
      answer: "Under Armour runs NeuePlakUA — a custom brand-commissioned condensed grotesque — as the sole typeface across every surface: display headlines at 64px weight 800, body at 14–16px weight 400–600, buttons at 14px weight 600, and nav links at ~16px weight 600. The font stack includes ARMOUR as a secondary fallback before Helvetica and Arial. For an open-source substitute, Barlow Condensed at weight 800 reproduces the condensed-athletic character at display sizes; for body and label tiers, plain Helvetica Neue at the same weights reads nearly identically."
    - id: "button-style"
      title: "What is Under Armour's button shape and size?"
      answer: "Under Armour's primary CTA button is a full-pill shape — 9999px border-radius, 44px height, 212px default width, 0×16px padding, near-black #1d1d1d fill with white text. The font is NeuePlakUA 14px weight 600. Secondary buttons use white fill with near-black text, same pill shape. The pill is the only rounded surface in the system — product cards, section containers, and form inputs run at 3px or completely flat, so the pill CTAs are visually distinct from every other surface."
    - id: "achromatic-strategy"
      title: "Why does Under Armour use no accent color in their design system?"
      answer: "Under Armour's marketing site runs a fully achromatic chrome — near-black #1d1d1d and white #ffffff with mid-gray (#5f5f5f) as the only secondary tone. This is a deliberate photography-first strategy: the page is built as a neutral display surface for product and athlete imagery, which arrives in vivid neons, saturated colorways, and action-sports palette. Adding a brand accent would compete with product photography and reduce the visual impact of each image. Nike uses a similar achromatic approach on its core brand surface. The declared semantic colors (error red #e51b24, green #008850, amber #ffc700) appear only in form-validation states, not in marketing chrome."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a sports e-commerce site in React?"
      answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Under Armour's specific moves: near-black-on-white chrome with no chromatic accent, NeuePlakUA or Barlow Condensed at athletic weights, pill-only CTA buttons, and a photography-forward hero section. You can also reference tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS custom properties. The achromatic approach transfers well to any product-photography-first context where the imagery needs to do the color work."

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

colors:
  ink: "#1d1d1d"
  ink-muted: "#5f5f5f"
  ink-mid: "#444444"
  canvas: "#ffffff"
  surface-1: "#f7f7f7"
  surface-2: "#f0f0f0"
  hairline: "#d0d0d0"
  hairline-mid: "#949494"
  canvas-dark: "#000000"
  error: "#dc0019"
  error-bright: "#e51b24"
  success: "#008850"
  focus-ring: "#14a1ff"
  amber: "#ffc700"

typography:
  display-xl:
    fontFamily: "NeuePlakUA, \"NeuePlakUA Fallback\", ARMOUR, Helvetica, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 800
    lineHeight: 64px
    letterSpacing: "2px"
  display-md:
    fontFamily: "NeuePlakUA, \"NeuePlakUA Fallback\", ARMOUR, Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 40px
    letterSpacing: "0.5px"
  heading-md:
    fontFamily: "NeuePlakUA, \"NeuePlakUA Fallback\", ARMOUR, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 32px
    letterSpacing: "0.5px"
  heading-sm:
    fontFamily: "NeuePlakUA, \"NeuePlakUA Fallback\", ARMOUR, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 28px
    letterSpacing: "normal"
  body-lg:
    fontFamily: "NeuePlakUA, \"NeuePlakUA Fallback\", ARMOUR, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: "0.5px"
  body-md:
    fontFamily: "NeuePlakUA, \"NeuePlakUA Fallback\", ARMOUR, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: "normal"
  body-sm:
    fontFamily: "NeuePlakUA, \"NeuePlakUA Fallback\", ARMOUR, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: "normal"
  label-md:
    fontFamily: "NeuePlakUA, \"NeuePlakUA Fallback\", ARMOUR, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 20px
    letterSpacing: "normal"
  button-md:
    fontFamily: "NeuePlakUA, \"NeuePlakUA Fallback\", ARMOUR, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 24px
    letterSpacing: "normal"
  nav-link:
    fontFamily: "NeuePlakUA, \"NeuePlakUA Fallback\", ARMOUR, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 24px
    letterSpacing: "normal"

rounded:
  none: "0px"
  xs: "3px"
  md: "8px"
  lg: "16px"
  full: "9999px"

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

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "0px 16px"
    height: "44px"
    width: "212px"
    border: "0"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "0px 16px"
    height: "44px"
    borderColor: "{colors.ink}"
  top-nav:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "0px 16px"
    height: "97px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.nav-link}"
    padding: "20px 10px 15px"
    height: "59px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-md}"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "16px"
    borderColor: "{colors.ink}"
  product-label:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.label-md}"
  pill-chip:
    backgroundColor: "{colors.surface-2}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.full}"
    padding: "8px 16px"
    height: "36px"
  pill-chip-active:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
    rounded: "{rounded.full}"
    padding: "8px 16px"
    height: "36px"
  text-input:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.none}"
    padding: "0px 24px 0px 0px"
    height: "44px"
    borderColor: "{colors.ink}"
  tooltip:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.xs}"
    padding: "8px 12px"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
    padding: "48px 16px"
---

## Overview

Under Armour's marketing site treats chromatic restraint as a performance stance. **Achromatic authority**: the nav bar, every primary CTA, product-card borders, tooltip backgrounds, search input, and icon set all render in near-black (#1d1d1d). The page floor and cards are pure white. There is no brand-voltage red, no accent color, no gradient — nothing between the two neutrals except a mid-gray (#5f5f5f) for secondary text and a lighter gray (#f7f7f7) for alternate surface rows. Where Nike drops a full-bleed hero sweep and Adidas holds a yellow accent for navigation moments, Under Armour withholds every chromatic signal and lets the product photography carry all of it.

The typographic system reinforces the athletic identity. **Condensed grotesque at maximum weight**: NeuePlakUA, a brand-commissioned condensed grotesque, tops out at 64px weight 800 in uppercase with 2px tracking — the loudest typographic moment on the page and the only place the system shouts. Below the hero, everything steps down to 600 and 400 weights at 12–16px. There is no middle display tier; the system is binary — one heavyweight moment at the top, then functional body text everywhere else.

Shape language is minimal: pill-only for CTAs (9999px radius), nearly flat for every other surface (3px on form inputs, 8px on a handful of secondary surfaces, otherwise 0px). This is the inverse of brands like Spline or Airbnb that use generous rounding across the system — Under Armour reserves curvature as a signal for the single most important action on the page.

**Key Characteristics:**
- Near-black #1d1d1d as the dominant tone — 792 total occurrences split evenly between text and border uses.
- Zero chromatic accent in the marketing chrome — all vivid color comes from product and athlete photography.
- NeuePlakUA weight 800 at 64px all-caps with 2px tracking — the only display-weight moment, reserved for hero headlines.
- Pill-only CTA geometry (9999px radius) — every other surface runs 0–8px rounding.
- 44px button height across primary and secondary CTAs — the brand's consistent tap-target standard.
- Mid-gray #5f5f5f for secondary text (tabs, form labels, placeholder text, muted links).
- Light gray #f7f7f7 as the surface-1 elevation tier — used for accordion backgrounds and alternate section fills.
- Eight-point base spacing with 16px as the dominant layout unit (appears 49 times in extracted spacing).

## Colors

### Structural

- **Ink** (`#1d1d1d`): frequency 792. Used as text (390), border (390), background (11), shadow (1). The system's single dominant tone — wired as `--base-color-black`, `--Button-primary-background-color`, `--color-nav-background`, `--color-primary-text`, and 40+ component tokens. This is not decoration; it is the system's entire chromatic vocabulary.
- **Canvas** (`#ffffff`): frequency 128. Used as text (61) on dark surfaces, border (61) on dark-fill components, background (6) on cards and dialogs. Wired as `--base-color-white`, `--color-page-background`, `--Button-secondary-background-color`, `--Dialog-background-color`, `--Card-background-color`.
- **Ink Muted** (`#5f5f5f`): frequency 74. Used as text (37) and border (37) — secondary text across tab labels, form field placeholders, floating label text, "text"-variant button labels, and autocomplete default state. Wired as `--color-secondary-text`, `--Tabs-text-color`, `--form-field-border-color`.
- **Surface-2** (`#f0f0f0`): frequency 5. Used as the selected/active background on autocomplete rows and pill-button default state. Wired as `--color-grey-2`, `--PillButton-default-background-color`, `--Message-alert-background-color`.
- **Surface-1** (`#f7f7f7`): declared but not rendered on the captured page — reserved for accordion large backgrounds and quote block containers. Wired as `--base-color-grey-1`, `--Accordion-large-background-color`, `--QuoteBlock-background-color`.
- **Hairline** (`#d0d0d0`): frequency 0 rendered, declared as divider — tab borders, accordion default borders, dialog action dividers, disabled radio states, and the arc-scale background. Wired as `--Accordion-default-border-color`, `--Tabs-border-color`.
- **Hairline Mid** (`#949494`): frequency 5. Carousel pagination dots in inactive state, secondary nav tone. Wired as `--color-grey-4`, `--color-secondary-nav`, `--Pager-bullet-color`.
- **Canvas Dark** (`#000000`): frequency 4 as background — the screen-overlay scrim and transparent-variant button base. Wired as `--color-screen-background` (at 50% opacity), `--Button-text-background-color`.

### Semantic

- **Error** (`#dc0019`): the resolved error color in form states, arc-scale fill, and tertiary-button background. Wired as `--base-color-red`, `--form-field-error-color`, `--Button-tertiary-background-color`. Not rendered in the captured marketing chrome.
- **Error Bright** (`#e51b24`): a second declared red, slightly lighter than the error tone. Wired as `--base-color-red-1`, `--color-red-1`. Not rendered in captured chrome.
- **Success** (`#008850`): declared as `--color-dark-green`, `--color-green`. Reserved for success states; not rendered in captured chrome.
- **Focus Ring** (`#14a1ff`): the single chromatic element in the system — used exclusively as a focus shadow on checkboxes and form inputs. Wired as `--color-focus-shadow`, `--form-field-checkbox-focus-color`. Classified as `layer: brand` in the extraction but never appears as a brand chrome element.
- **Amber** (`#ffc700`): declared as `--color-amber`. Reserved for star-rating fill or promotional badge — not rendered in captured chrome.

## Typography

### Font Family

The system runs **NeuePlakUA** — a brand-commissioned condensed grotesque that Under Armour uses exclusively. The font stack cascades to `"NeuePlakUA Fallback"`, then `ARMOUR` (a separate brand-face), then `Helvetica`, `Arial`, `sans-serif`. There is no second family for display or body. A small portion of cookie-consent and legal text renders in plain `Arial, sans-serif` from an injected third-party component.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 64px | 800 | 64px | 2px | Hero h1 uppercase display — "CAN STAND THE HEAT" |
| `{typography.display-md}` | 32px | 700 | 40px | 0.5px | Section h2 ("SUMMER CAMP CHECKLIST") |
| `{typography.heading-md}` | 24px | 600 | 32px | 0.5px | Sub-section heading tier |
| `{typography.heading-sm}` | 20px | 600 | 28px | normal | h5 feature-cell titles |
| `{typography.body-lg}` | 16px | 400 | 24px | 0.5px | Hero sub-paragraph, running body text |
| `{typography.body-md}` | 14px | 400 | 20px | normal | Default product copy, caption text |
| `{typography.body-sm}` | 12px | 400 | 20px | normal | Fine-print labels, subcategory metadata |
| `{typography.label-md}` | 12px | 600 | 20px | normal | Section labels, h2/h3 in smaller contexts |
| `{typography.button-md}` | 14px | 600 | 24px | normal | CTA button label ("Shop Men", "Shop Women") |
| `{typography.nav-link}` | 16px | 600 | 24px | normal | Top-nav primary link labels |

### Principles

The display tier goes to weight 800 at 64px — the most forceful weight in the system — and pairs it with 2px positive tracking and uppercase transform. This is the inverse of the no-bold-at-display approach used by brands like Stripe and Cloudflare; Under Armour's typography shouts because the color palette does not. Weight 600 is the system's emphasis ceiling below display; weight 700 appears only in the 32px section heading tier. Body and label text at 400 contrasts with the aggressive display, keeping editorial sections legible without competing with the hero.

### Note on Font Substitutes

NeuePlakUA is proprietary. **Barlow Condensed** at weight 800 is the closest open-source substitute for the display tier; its condensed proportions match UA's hero treatment at 64px. For body and label tiers (14–16px weight 400–600), **Barlow** (non-condensed) or plain **Helvetica Neue** transfers cleanly. Avoid humanist sans alternatives — the brand's identity depends on the geometric-condensed character.

## Layout

### Spacing System

- **Base unit:** 8px, with 16px as the dominant layout gap (49 occurrences in extracted spacing).
- **Tokens:** `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.base}` 16px · `{spacing.md}` 24px · `{spacing.lg}` 32px · `{spacing.xl}` 48px · `{spacing.2xl}` 64px · `{spacing.3xl}` 80px.
- **Section padding (vertical):** 80px between major editorial sections; 56px on the hero.
- **Card internal padding:** 16px (products and editorial cells).
- **Button padding:** 0×16px (handled by fixed height and width rather than symmetric padding).

### Grid & Container

- **Max content width:** 1440px (`--max-width`, `--content-max-width`), with `--max-container-width` at 1200px for editorial content.
- **Hero:** full-bleed photography with the headline and CTA centered in a text column.
- **Product grid:** 4-column at desktop, collapsing to 2-column on mobile (`--mobile-max-width` 432px).
- **Category row ("Train By Sport"):** horizontal scroll carousel with 300px fixed card width.

### Rhythm

The page moves top-to-bottom through photography-forward sections with editorial callouts. The hero is a full-bleed athlete shot with the CTA centered below. Below the fold, 4-column product grids alternate with full-bleed category banners. The only non-photographic section is the "SUMMER CAMP CHECKLIST" editorial block with text content on a white surface — the page's single moment of type-first design.

## Elevation

The system uses **no drop shadow tier**. Card borders use the near-black `{colors.ink}` hairline as the sole depth signal — cards read as framed objects on the white floor rather than elevated ones. The single declared shadow value is `0px 0px 2px` (appearing 23 times in the spacing extraction) used for focus states on form fields, not for card elevation.

- **Flat cards:** product cards, category tiles, editorial cells — all use a 1px `{colors.ink}` border.
- **Dark surface elevation:** the nav bar at #1d1d1d lifts above the page floor by contrast alone.
- **Modal overlay:** `{colors.canvas-dark}` (#000000 at 50% opacity) as the scrim behind dialogs.

## Shapes

The radius vocabulary is minimal — two tiers only:

- `{rounded.none}` 0px — the dominant state. Hero containers, product cards, section dividers, the search input, nav bar. Most surfaces in the system are completely flat.
- `{rounded.xs}` 3px — form inputs and small chip surfaces.
- `{rounded.md}` 8px — declared as `--border-radius-medium`; used on a small number of secondary surface elements.
- `{rounded.lg}` 16px — declared as `--border-radius-large`; rare, used on promotional modules.
- `{rounded.full}` 9999px — the primary and secondary CTA buttons, and the pill-chip filter set. The pill is the system's single warm, rounded element.

The pill-on-flat contrast is the system's shape signature. By keeping nearly every other surface at 0px rounding, the pill CTA stands out as the only "soft" element in the system — which is the visual cue for "action."

## Components

**`button-primary`** — Near-black `{colors.ink}` fill, white text, full pill rounding at 9999px, 44px height, 212px width, 0×16px padding, NeuePlakUA 14px weight 600. "Shop Men" and "Shop Women" are the canonical hero instances.

**`button-secondary`** — White `{colors.canvas}` fill, near-black text, 1px near-black border, same pill rounding and height as primary. Used for "Add to Bag" and secondary actions where the filled button would dominate too strongly.

**`top-nav`** — Near-black `{colors.ink}` surface, white text, 97px height (includes the 50px promo banner above the primary nav row). Houses the UA wordmark, primary nav links (New, Men, Women, Youth, UA for Teams, Sale, UA REWARDS), and right-side icons (search, favorites, account, bag).

**`nav-link`** — White text on the dark nav surface, NeuePlakUA 16px weight 600, 20×10px padding, 59px height. No hover background — the underline or border-bottom carries the active state.

**`hero-heading`** — Near-black or white text (context-dependent on photo background), NeuePlakUA 64px weight 800 uppercase, 64px line-height, 2px letter-spacing. "CAN STAND THE HEAT" is the captured instance.

**`section-heading`** — Near-black text at `{typography.display-md}` (32px / 700) — "SUMMER CAMP CHECKLIST" and category headings below the fold.

**`body-paragraph`** — Near-black text at `{typography.body-lg}` (16px / 400). Product descriptions and editorial section copy.

**`body-paragraph-muted`** — Mid-gray `{colors.ink-muted}` text at `{typography.body-md}` — subcategory labels, price comparisons, secondary metadata.

**`card`** — White `{colors.canvas}` fill, 1px near-black border, completely flat (0px radius), 16px internal padding. Product cards use this structure with photography filling the top area and metadata below.

**`product-label`** — Near-black text at `{typography.label-md}` (12px / 600). Product name labels beneath product images.

**`pill-chip`** — Light-gray `{colors.surface-2}` fill, near-black text, full pill rounding, 8×16px padding, 36px height. The inactive state of the filter/sort chip system.

**`pill-chip-active`** — Near-black fill, white text, full pill rounding, same dimensions. The selected filter state.

**`text-input`** — Transparent background on the dark nav, white text, 0px radius, no border (the parent container provides the border), NeuePlakUA 16px weight 600. The search field sits inside the nav bar's dark surface.

**`tooltip`** — Near-black fill, white text, `{rounded.xs}` 3px radius, 8×12px padding. Appears on icon labels and interactive states.

**`footer`** — White canvas, mid-gray muted text at `{typography.body-sm}`, 48×16px padding. No surface contrast against the page floor — the footer continues the white canvas.

## Do's and Don'ts

**Do** reserve near-black #1d1d1d for CTAs, nav surfaces, and borders. The system depends on this single tone doing all three structural jobs simultaneously — splitting it into a "CTA black" and a "border black" (even at very similar values) disrupts the visual unity.

**Do** use the pill shape (9999px) exclusively for CTA buttons and filter chips. It is the system's only curvature signal; applying 9999px to cards or containers blurs the distinction between "action" and "content."

**Do** place NeuePlakUA weight 800 uppercase only at 64px display scale. The weight is designed for the hero headline moment — using 800 at smaller sizes turns body copy into a headline-density wall.

**Do** let product photography supply all color. The achromatic chrome requires high-quality, chromatic photography to avoid reading as an unstyled page. Without vivid imagery, the system reads as a wireframe.

**Don't** add a chromatic accent color to the marketing chrome. The declared focus-ring blue (#14a1ff) appears exactly 0 times in the captured marketing render — it is a browser-accessibility utility, not a brand accent. Introducing blue or red as a hover state or link color would break the achromatic discipline entirely, a mistake that would seem natural given how bare the color palette is.

**Don't** use `{colors.error}` (#dc0019) for any decorative element. It appears in zero captured marketing occurrences and is strictly a form-validation state. Placing it on a badge or sale-price label — which many e-commerce sites do — conflicts with the achromatic strategy.

**Don't** reduce button height below 44px. The `--button-height: 44px` token is declared as a system-wide constant and matches the `--Select-height: 44px` standard. Shorter touch targets feel inconsistent with the brand's athletic physicality framing.

**Don't** introduce positive letter-spacing below the 64px display tier. The 2px tracking on the hero uppercase is intentional at that scale; applying positive tracking at 14–16px body sizes gives text a "printed label" feel that undermines the editorial tone of product descriptions.

## Known Gaps

- **Hero color context:** the hero extraction captured a modal dialog overlaid on the page rather than the full-bleed photography hero. Color values are accurate (the modal itself uses standard system tokens), but the hero composition and photography context are partially obscured in the captured screenshot.
- **Responsive breakpoints:** the extraction captures the 1440px desktop viewport. Mobile nav (81px bottom bar, `--mobile-bottom-nav-height`) and tablet transitions are declared in CSS but not reflected in component definitions.
- **Hover and focus states:** documented for `{component.pill-chip-active}` only; the full state matrix (button hover tint, nav-link underline, card hover border) is not captured from the static marketing render.
- **Color from product photography:** the system's chromatic moments (neon greens, athletic teals, shoe colorways) live entirely in product imagery and are not tokenized anywhere in the design system. The token spec captures only chrome colors.
- **Promotional / sale price styling:** price-comparison typography (strikethrough original price, red sale price) is referenced via error-color tokens but the exact rendering on product cards was not captured.
- **Dark-mode and regional variants:** the site serves multiple locales (`/en-us/`); regional variants (UA for Teams, UA REWARDS) may carry additional surface tokens not present in the standard marketing capture.