01 — Color
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
Surface
Text
Semantic
Category Accents (chips, swatch dots, editorial only)
02 — Typography
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.
03 — Components
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.
04 — Cards
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.
Member Benefit Cards
SNKRS
Nike By You
Run Club
Category Icon Cards (Latest in Clothing strip)
Badges
05 — Disclosure
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.
06 — Navigation
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.
07 — Forms
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.
08 — Layout
8px base unit. Section rhythm sits at 48px — the universal vertical gap between major content blocks across every page.
09 — Shapes
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.
Cards, tiles, photography, nav, footer
Avatar / icon container in member lockups
Search pill, search submit, filter input
Every CTA pill — primary, secondary, on-image, chip
Swatch dots and circular icon buttons
10 — 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.
11 — Responsive
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 |