01 — Color

## Color Palette

Pure black and pure white carry the chrome. Soft Cloud (#f5f5f5) is the studio backdrop for every product photograph and the soft alternate for secondary CTAs. Sale red is the only non-neutral color permitted in retail chrome.

Brand & Accent

Nike Black (ink)

#111111

Primary CTA, headlines, body text, active filter chip, swatch dot

Pure White (canvas / on-primary)

#ffffff

Page background, on-image pill, inverse text on ink surfaces

Surface

Soft Cloud

#f5f5f5

Product card image backdrop, search pill, secondary CTA, utility bar

Hairline

#cacacb

1px row dividers, footer columns, PDP disclosure separators

Hairline Soft

#e5e5e5

Inset 1px shadow under sticky utility/sub-nav strips

Text

Ink

#111111

Headlines, product names, prices, primary nav

Charcoal

#39393b

Slightly softer body where ink is too heavy

Ash

#4b4b4d

Disabled secondary border on dark surfaces

Mute

#707072

Product subtitles, footer link text, secondary metadata

Stone

#9e9ea0

Inverse secondary text on dark surfaces

Semantic

Sale

#d30005

Discounted price + "% off" copy. Only red in retail chrome.

Sale Deep

#780700

Sale price pressed and dark-mode anchor

Success

#007d48

Confirmation messages, in-stock indicators

Success Bright

#1eaa52

Inverse success on dark surfaces

Info

#1151ff

Informational link/badge in member callouts

Info Deep

#0034e3

Pressed state for info accent

Category Accents (chips, swatch dots, editorial only)

Accent Pink

#ed1aa0

SKIMS / women's collection moments

Accent Pink Soft

#ffb0dd

Soft tinting on member-experience tiles

Accent Purple Soft

#beaffd

Editorial swatch dot, soft category chip

Accent Purple Pale

#d6d1ff

Lightest soft-tile fill

Accent Teal

#0a7281

Trail / outdoor / ACG editorial accent

Accent Pink Deep

#4c012d

Heritage / Jordan editorial wash

02 — Typography

## Typography Scale

Extreme typographic contrast: a single 96px uppercase Futura display tier reserved for editorial campaign moments, and a quiet 12–16px Helvetica Now tier carrying everything else. Almost no middle ground — the jump from 32px section header directly to 16px body is intentional.

display-campaignNike Futura ND
96px / 500 / lh 0.9 / uppercase
JUST DO IT
heading-xlHelvetica Now Display Medium
32px / 500 / lh 1.2
Featured Footwear
heading-lgHelvetica Now Display Medium
24px / 500 / lh 1.2
Member Benefits Lockup
heading-mdHelvetica Now Display Medium
16px / 500 / lh 1.75
Card title or filter group header
body-mdHelvetica Now Text
16px / 400 / lh 1.5
Body copy carries product descriptions, search placeholders, and any long-form prose at 16px regular weight.
body-strongHelvetica Now Text Medium
16px / 500 / lh 1.5
Product card name and primary nav link
button-mdHelvetica Now Text Medium
16px / 500 / lh 1.5
Notify Me
button-smHelvetica Now Text Medium
14px / 500 / lh 1.5
Compact pill CTA, badge label
link-mdHelvetica Now Text
16px / 500 / lh 1.75 / underline
View Product Details
caption-mdHelvetica Now Text Medium
14px / 500 / lh 1.5
Men's Trail Running Shoes
caption-smHelvetica Now Text Medium
12px / 500 / lh 1.5
Filter chip label · color count · badge text
utility-xsHelvetica Neue
9px / 500 / lh 1.75
Legal copyright fine-print row at the very bottom of the page

03 — Components

## Button Variants

Pill or icon-circular — that is the entire button shape vocabulary. Every CTA in the system is `rounded.full` (30px). There are no sharp-cornered buttons.

button-primary

bg ink · text on-primary · rounded full · 48px height · padding 16/32

button-secondary

bg soft-cloud · text ink · rounded full · 48px height

button-outline-on-image

bg canvas · text ink · rounded full · padding 12/24 · anchored bottom-left of campaign tiles

button-icon-circular

40px · rounded full · soft-cloud bg · back / next / wishlist

filter-chip + filter-chip-active

default: canvas + 1px hairline border · active: ink fill + on-primary text. No middle state.

Search Products
Air Max

search-pill + search-pill-focused

rounded md (24px) · 40px height · soft-cloud default · canvas + 2px ink border + 12px halo when focused

04 — Cards

## Card Examples

Cards sit flat on the page — no shadow, no radius, no border on the container itself. The image is the card. Photography stages on Soft Cloud; metadata stacks below with 8px gaps.

3 Colors

ACG Trail Runner

Men's Trail Running Shoes

$180
Recycled Materials
3 Colors

Pegasus Trail GORE-TEX

Men's Waterproof Trail Running

$141.97 $180 21% off
Just In
2 Colors

Air Zoom Pegasus 41

Men's Road Running Shoes

$170

### ACG
Pegasus
Trail

Member Benefit Cards

SNKRS

#### Your Ultimate Sneaker Community

Nike By You

#### Your Customization Service

Run Club

#### Let's Run Together

Category Icon Cards (Latest in Clothing strip)

Tops

Tees & Shirts

Shorts

Pants

Hoodies

Tracksuits

Badges

Just In Coming Soon Recycled Materials Member Exclusive Bestseller Sale Price (badge-sale-text)

05 — Disclosure

## PDP & FAQ Rows

Stacked rows with 24px vertical padding and a 1px Hairline divider below each. Identical structure on the PDP product page and the membership FAQ — only label weight changes.

View Product Details
Shipping & Returns
Reviews (0)
What is Nike Membership?
Am I a Nike Member?
Is Nike Membership free?

06 — Navigation

## Utility Bar & Primary Nav

Always-present 36px utility bar on Soft Cloud, then a 64px primary nav on Canvas with the swoosh logo at left, centered nav links, and search pill + icon cluster at right.

Find a Store Help Join Us Sign In

07 — Forms

## Form Elements

Nike's only documented form input is the search pill. It uses 24px radius (slightly less than the 30px CTA pill) and lives on Soft Cloud by default; on focus the background flips to Canvas with a 2px Ink outline and a 12px Soft Cloud halo.

Search (Default)
Search Products soft-cloud bg · rounded 24px · 40px height
Search (Focused)
Air Max 1 canvas bg · 2px ink border · 12px soft-cloud halo
Inline Form Text canvas + 1px hairline · rounded 30px · 48px height (inferred from CTA pill)
Submit (paired with email)
button-primary · always full-width below stacked email fields

08 — Layout

## Spacing Scale

8px base unit. Section rhythm sits at 48px — the universal vertical gap between major content blocks across every page.

xxs · 2
xs · 4
sm · 8
md · 12
lg · 18
xl · 24
xxl · 30
section · 48

09 — Shapes

## Border Radius Scale

Every container — card, campaign tile, footer, nav — uses radius 0. Every button, chip, and icon-circle is fully rounded. The only "soft" radii in the system are the 24px search pill and the 18px avatar container.

none · 0

Cards, tiles, photography, nav, footer

sm · 18

Avatar / icon container in member lockups

md · 24

Search pill, search submit, filter input

lg · 30

Every CTA pill — primary, secondary, on-image, chip

full · 9999

Swatch dots and circular icon buttons

10 — Depth

## Elevation & Depth

No drop shadows in retail chrome. The only depth cues are the 1px Hairline divider on rows and the 1px Hairline-Soft inset on sticky strips.

Level 0 — Flat
no shadow / no border
Level 1 — Hairline
1px solid #cacacb bottom
Level 2 — Inset Hairline-Soft
inset 0 -1px 0 #e5e5e5

11 — Responsive

## Responsive Behavior

14 declared breakpoints, but the practical break stack reduces to 7 zones. Section rhythm shrinks from 48px → 32px → 24px on the way down.

Name | Width | Key Changes
--- | --- | ---
ultrawide | 1920px+ | Content max-width holds at 1440px; gutters grow to ~80px
desktop-large | 1440px | Default desktop — 3-up product grid, full primary nav
desktop | 1200px | Same layout, slightly narrower outer gutters
desktop-small | 1024px | Filter sidebar compresses; sport rail shows ~3 tiles
tablet | 1023–961px | 3-up PLP collapses to 2-up; "Hide Filters" default toggle
tablet-narrow | 960–640px | Primary nav collapses to hamburger; search pill becomes icon
mobile-landscape | 639–600px | 2-up PLP collapses to 1-up; cards become full-width
mobile | 599–320px | Single-column; campaign tiles full-screen with ~64px Futura

320mobile
600m-landscape
960tablet-narrow
1024desktop-small
1440desktop-large

### Touch Targets

- WCAG AAA (≥ 44×44px): button-primary and button-secondary at 48px height with 32px horizontal padding.
- Filter chip: 40px height with 16px padding — sits just under AAA but above AA.
- Icon-circular button: 40×40 (back, next, wishlist) with extended hit-target padding to 48×48 inside the parent.
- Disclosure rows: 24px vertical padding — full row is the tap target (~70px tall total).

### Collapsing Strategy

- Primary nav: desktop center cluster → mobile drawer triggered by hamburger left of swoosh.
- PLP grid: 3-up → 2-up → 1-up at 1023, 599, and below; gutters drop from 8px to 4px on mobile.
- Filter sidebar: 220px fixed → "Hide Filters" toggle → off-canvas full-screen drawer at mobile.
- Sport rail: desktop horizontal scroll with ~5 visible → mobile peek-next-card with ~1.5 visible.
- Section spacing: 48px desktop → 32px tablet → 24px mobile.
- Campaign headline: desktop 96px → tablet 64px → mobile 48px, line-height holds at 0.9.
- Image art-direction: 16:9 wide hero on desktop swaps to 4:5 portrait on mobile to keep figure centered.