Nike

version alpha

name Nike

description | A photography-first commerce system built on extreme typographic contrast — towering uppercase Futura display lockups burned into editorial campaign imagery, sitting above a dense, neutral, near-monochrome retail chrome of pill-shaped black CTAs, gray search and tag pills, and tight 8px-grid product cards. The brand's voice is athletic, kinetic, and absolute: pure black, pure white, a single soft surface gray, and a deliberately small set of semantic accents (sale red, success green, restrained category tints) — every chromatic moment is reserved for editorial photography or pricing signal, never decorative chrome.

colors 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 display-campaign: fontFamily: Nike Futura ND fontSize: 96px fontWeight: 500 lineHeight: 0.9 letterSpacing: 0 textTransform: uppercase heading-xl: fontFamily: Helvetica Now Display Medium fontSize: 32px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0 heading-lg: fontFamily: Helvetica Now Display Medium fontSize: 24px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0 heading-md: fontFamily: Helvetica Now Display Medium fontSize: 16px fontWeight: 500 lineHeight: 1.75 letterSpacing: 0 body-md: fontFamily: Helvetica Now Text fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-strong: fontFamily: Helvetica Now Text Medium fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0 button-lg: fontFamily: Helvetica Now Display Medium fontSize: 24px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0 button-md: fontFamily: Helvetica Now Text Medium fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0 button-sm: fontFamily: Helvetica Now Text Medium fontSize: 14px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0 link-md: fontFamily: Helvetica Now Text fontSize: 16px fontWeight: 500 lineHeight: 1.75 letterSpacing: 0 textDecoration: underline caption-md: fontFamily: Helvetica Now Text Medium fontSize: 14px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0 caption-sm: fontFamily: Helvetica Now Text Medium fontSize: 12px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0 utility-xs: fontFamily: Helvetica Neue fontSize: 9px fontWeight: 500 lineHeight: 1.75 letterSpacing: 0

rounded none: 0px sm: 18px md: 24px lg: 30px full: 9999px

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

components button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: 16px 32px height: 48px button-primary-active: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.full}" button-secondary: backgroundColor: "{colors.soft-cloud}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: 16px 32px height: 48px button-outline-on-image: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: 12px 24px button-icon-circular: backgroundColor: "{colors.soft-cloud}" textColor: "{colors.ink}" rounded: "{rounded.full}" size: 40px search-pill: backgroundColor: "{colors.soft-cloud}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 8px 16px height: 40px search-pill-focused: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.md}" filter-chip: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: 8px 16px filter-chip-active: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.full}" badge-promo: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.caption-sm}" rounded: "{rounded.full}" padding: 4px 12px badge-sale-text: textColor: "{colors.sale}" typography: "{typography.caption-md}" product-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-strong}" rounded: "{rounded.none}" padding: 0px product-card-image: backgroundColor: "{colors.soft-cloud}" rounded: "{rounded.none}" swatch-dot: backgroundColor: "{colors.ink}" rounded: "{rounded.full}" size: 12px swatch-dot-active: backgroundColor: "{colors.ink}" rounded: "{rounded.full}" size: 12px campaign-tile: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.display-campaign}" rounded: "{rounded.none}" category-icon-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.caption-md}" rounded: "{rounded.none}" member-benefit-card: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.heading-lg}" rounded: "{rounded.none}" faq-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.heading-md}" rounded: "{rounded.none}" padding: 24px 0px pdp-disclosure-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-strong}" rounded: "{rounded.none}" padding: 24px 0px utility-bar: backgroundColor: "{colors.soft-cloud}" textColor: "{colors.ink}" typography: "{typography.caption-sm}" rounded: "{rounded.none}" height: 36px primary-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-strong}" rounded: "{rounded.none}" height: 56px filter-sidebar: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-strong}" rounded: "{rounded.none}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.mute}" typography: "{typography.caption-md}" rounded: "{rounded.none}"

Overview

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.

Across /men, the trail-running listing, the Zegama PDP, /membership, and Jordan Golf, the same chrome appears in identical proportions — only the photography and copy change. That is the system's signature: maximum editorial expression in the imagery, maximum mechanical restraint everywhere else.

Key Characteristics:

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

• Pure black/white/single-gray UI palette: {colors.ink}, {colors.canvas}, and {colors.soft-cloud} carry ~95% of the chrome surface area

• Pill geometry everywhere: every CTA, search field, filter chip, and badge uses {rounded.full} (30px) or {rounded.md} (24px) — there are no sharp-cornered buttons in the system

• Product cards have zero radius, zero shadow, sit directly on {colors.soft-cloud} swatch backgrounds — the photograph is the card

• Two-tone CTA hierarchy: {component.button-primary} (black on anything light) versus {component.button-secondary} ({colors.soft-cloud} on anything bright) — never both at once on the same surface

• 8px spacing system with section rhythm at {spacing.section} (48px) creating consistent vertical breathing across PLP, PDP, and editorial pages

• Sale signaling is the only place a non-neutral color appears in retail chrome: {colors.sale} price + strike-through original price, no badge background

Colors

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.

• Hairline Soft ({colors.hairline-soft} — #e5e5e5): Inset 1px shadow under sticky bars and tab strips, the only "shadow" the system uses.

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.

• Ash ({colors.ash} — #4b4b4d): Disabled secondary border on dark surfaces and very low-emphasis utility text.

• Mute ({colors.mute} — #707072): Product category subtitles ("Men's Trail Running Shoes"), footer link text, secondary metadata.

• Stone ({colors.stone} — #9e9ea0): Inverse secondary text on dark surfaces and lowest-emphasis utility text.

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.

• Success ({colors.success} — #007d48): Confirmation messages, in-stock indicators, eligibility ticks.

• Success Bright ({colors.success-bright} — #1eaa52): Inverse success on dark surfaces.

• Info ({colors.info} — #1151ff): Informational link/badge accent in member-experience callouts.

• Info Deep ({colors.info-deep} — #0034e3): Pressed state for info accent.

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.

• Accent Purple Soft ({colors.accent-purple-soft} — #beaffd): Editorial swatch dot, soft category chip.

• Accent Purple Pale ({colors.accent-purple-pale} — #d6d1ff): Lightest soft-tile fill.

• Accent Teal ({colors.accent-teal} — #0a7281): Trail / outdoor / ACG editorial accent in lockups.

• Accent Pink Deep ({colors.accent-pink-deep} — #4c012d): Deepest e