Design System — Nike Design System

Visual Theme & Atmosphere

Nike's commerce system is built on a single, almost violently simple idea: photography speaks, the chrome doesn't. Every page reads as an athletic editorial — towering uppercase Futura display lockups ({typography.display-campaign}) burned into full-bleed campaign imagery, with everything else (nav, filters, buttons, cards, footer) reduced to neutral typography and pill geometry on {colors.canvas} and {colors.soft-cloud}. There is no decorative gradient, no soft shadow nostalgia, no accent color used for "tone" — the system saves all chromatic energy for product photography and the small handful of moments that actually need to signal (sale price {colors.sale}, success {colors.success}, swatch dots).

The result is a layout that feels physical — campaign hero, product grid, sport tile, footer — stacked like a printed catalog rather than animated like a typical SaaS landing page. Density is high but never crowded, because the system relies on three relentless devices: square or near-square 1:1 product imagery on {colors.soft-cloud}, pill-shaped black CTAs ({rounded.full}) anchoring every actionable surface, and a tight 8px-base spacing scale that keeps cards and filters mathematically aligned across PLP, PDP, and editorial pages.

...

Key Characteristics:

Editorial campaign hero with {typography.display-campaign} (Nike Futura ND, 96px, line-height 0.9, uppercase) burned directly into full-bleed photography
...

Live Visual Theme Representation:

Visual Theme Example

Color Palette & Roles

> Source pages: /men (primary), /w/mens-acg-trail-running-shoes-…, /t/acg-zegama-…, /membership, /w/jordan-golf-…. The chrome palette is identical across all five — only photography varies.

Brand & Accent

Nike Black ({colors.ink} — #111111): The brand's only "color." It is the primary CTA, the swatch dot, the active filter chip, the campaign overlay, the headline color, and the body text. When Nike wants to assert anything, it goes black.
Pure White ({colors.on-primary}, {colors.canvas} — #ffffff): Equal partner to black. Carries every page background, the on-image CTA, and the inverse text on {colors.ink} surfaces.

Surface

Soft Cloud ({colors.soft-cloud} — #f5f5f5): The most-used non-white surface in the entire system. Product card image backgrounds, search pill, secondary CTA, utility bar, sport-category swatch tiles. It is the "color" of every product photograph's stage.
Hairline ({colors.hairline} — #cacacb): 1px dividers between filter rows, footer columns, and PDP disclosure rows.
...

Text

Ink ({colors.ink} — #111111): Primary text on light surfaces — headlines, product names, prices, nav.
Charcoal ({colors.charcoal} — #39393b): Slightly softer body where ink is too heavy.
...

Semantic

Sale ({colors.sale} — #d30005): Discounted price color and "% off" copy — the only red in the entire retail chrome.
Sale Deep ({colors.sale-deep} — #780700): Sale price hover/pressed and dark-mode sale anchor.
...

Category Accents (sport / collection chips)

These appear sparingly — almost exclusively as small chip backgrounds, swatch dots, or category illustrations in editorial tiles. They are never used as text or primary CTA color.

Accent Pink ({colors.accent-pink} — #ed1aa0): SKIMS / women's collection moments.
Accent Pink Soft ({colors.accent-pink-soft} — #ffb0dd): Soft tinting on member-experience tiles.
...

primary

#111111

on-primary

#ffffff

canvas

#ffffff

soft-cloud

#f5f5f5

ink

#111111

charcoal

#39393b

ash

#4b4b4d

mute

#707072

stone

#9e9ea0

hairline

#cacacb

hairline-soft

#e5e5e5

sale

#d30005

sale-deep

#780700

success

#007d48

success-bright

#1eaa52

info

#1151ff

info-deep

#0034e3

accent-pink

#ed1aa0

accent-pink-soft

#ffb0dd

accent-purple-soft

#beaffd

accent-purple-pale

#d6d1ff

accent-teal

#0a7281

accent-pink-deep

#4c012d

Typography Rules

Font Family

Nike Futura ND (display campaign only) — proprietary geometric sans for the towering uppercase headlines burned into campaign hero photography. Falls back to Helvetica Now Text Medium → Helvetica → Arial.
Helvetica Now Display Medium (headings 16–32px) — modern Helvetica cut tuned for display sizes; carries every section title, PDP product name, and dialog headline.
...

When substituting on systems without proprietary Nike fonts: pair Inter (Display 700 for body chrome, Display 500 for buttons) with Bebas Neue or Anton at 96px/0.9 line-height for the campaign headline tier. Tighten letter-spacing slightly (-0.5%) on the substitute to approximate Futura ND's optical weight.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
...	...	...	...	...	...

Principles

The system runs on extreme typographic contrast: a single 96px uppercase display tier reserved for editorial campaign moments, and a quiet 12–16px Helvetica Now Text/Medium tier carrying everything else. There is almost no middle ground — the jump from {typography.heading-xl} (32px) directly to {typography.body-strong} (16px) is intentional and creates the "billboard above, catalog below" effect across every page. Letter-spacing is left at 0 (Futura ND and Helvetica Now are both cut for tight optical fit at scale).