@dante · E-commerce & Retail
Photography-first commerce system: towering uppercase Futura campaign lockups over a near-monochrome retail chrome of pill-shaped black CTAs, gray search pills, and flat 8px-grid product cards.
Nike's commerce system runs 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 burned into full-bleed campaign imagery, with nav, filters, buttons, cards, and footer reduced to neutral typography and pill geometry on white and soft-cloud gray. There is no decorative gradient, no soft-shadow nostalgia, no accent color used for 'tone'. The layout stacks like a printed catalog — campaign hero, product grid, sport rail, footer — rather than animating like a typical SaaS landing page. The signature is maximum editorial expression in the imagery, maximum mechanical restraint everywhere else.
The palette is near-monochrome: pure Ink (#111111), pure Canvas white (#ffffff), and a single Soft Cloud surface (#f5f5f5) carry roughly 95% of the chrome. Ink is the only 'color' — primary CTA, swatch dot, active filter chip, campaign overlay, headline, and body text. A warm-neutral gray ramp (Charcoal #39393b, Ash #4b4b4d, Mute #707072, Stone #9e9ea0) handles text emphasis, and hairlines (#cacacb, #e5e5e5) do all dividing. Chromatic energy is reserved for two things only: product photography and semantic signal — Sale red (#d30005) on price rows, Success green (#007d48), Info blue (#1151ff). Category accent tints (#ed1aa0, #beaffd, #0a7281) appear sparingly as swatch dots and editorial tile fills, never as chrome.
Extreme typographic contrast. A single 96px uppercase Nike Futura ND display tier (line-height 0.9) is reserved strictly for editorial campaign lockups; everything else lives in a quiet 12–16px Helvetica Now Text / Medium tier. There is almost no middle ground — the jump from Helvetica Now Display 32px section headers directly to 16px body creates the 'billboard above, catalog below' effect on every page. Letter-spacing stays at 0. Substitute Bebas Neue or Anton for the display tier and Inter for UI text when proprietary Nike fonts are unavailable.
8px base spacing scale (2 / 4 / 8 / 12 / 18 / 24 / 30) with a universal 48px section rhythm between major blocks. Content maxes at ~1440px with gutters that grow to ~80px on ultrawide viewports rather than stretching. PLP grids run 3-up desktop → 2-up → 1-up with 8px gutters; a 220px fixed filter sidebar collapses to a 'Hide Filters' toggle. Every container is zero-radius; every CTA, search field, and chip is a pill at 30px (or 24px for search). Depth is entirely flat — no drop shadows anywhere in retail chrome; the only depth cues are 1px hairline dividers and a single inset bottom-line under sticky bars. Product cards carry zero internal padding: the image is full-bleed on soft-cloud, metadata sits directly below.
Buttons are pills only: black primary, soft-cloud secondary, white on-image overlay (bottom-left of every editorial tile), and circular icon controls at 40px. The search pill is the system's one documented form field — soft-cloud at 24px radius, flipping to white with a 2px ink border and 12px soft-cloud halo on focus. Product cards are flat and unpadded with an 8px metadata stack; filter chips flip fully inverted when active; swatch dots gain a 2px ink concentric ring when selected. Sale price is the only non-neutral chrome moment. Disclosure rows and footer columns are separated by 1px hairlines.
Derived view rendered server-side from package tokens and components — no authored copy.
#111111#ffffff#ffffff#f5f5f5#111111#39393b#4b4b4d#707072#9e9ea0#cacacb#e5e5e5#d30005#780700#007d48#1eaa52#1151ff#0034e3#ed1aa0#ffb0dd#beaffd#d6d1ff#0a7281#4c012dNike Futura ND, 'Bebas Neue', 'Anton', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serifHelvetica Now Display Medium, Inter, Helvetica, Arial, sans-serifHelvetica Now Text, Inter, Helvetica, Arial, sans-serifHelvetica Now Text Medium, Inter, Helvetica, Arial, sans-serif'Helvetica Neue', ui-monospace, Menlo, monospace{
"displayCampaign": "96px/0.90",
"headingXl": "32px/1.20",
"headingLg": "24px/1.20",
"headingMd": "16px/1.75",
"bodyMd": "16px/1.50",
"bodyStrong": "16px/1.50",
"buttonMd": "16px/1.50",
"buttonSm": "14px/1.50",
"linkMd": "16px/1.75",
"captionMd": "14px/1.50",
"captionSm": "12px/1.50",
"utilityXs": "9px/1.75"
}The universal Nike CTA. Pure-black pill (primary), soft-cloud pill (secondary), white-on-image overlay pill, and circular icon control — every button is a pill at 30px radius, never square.
The search pill — the system's only documented form field. Soft-cloud fill at 24px radius; on focus it flips to white with a 2px ink border and a 12px soft-cloud halo, the system's single focus-ring effect.
The product card — zero radius, zero shadow, image full-bleed on soft-cloud. The photograph is the card; metadata sits directly below with 8px gaps. Sale price shows Sale red, strike-through original in Mute.
Promo pill on imagery (white fill, hairline border) plus the containerless Sale-text badge — the only badge in the system with no background.
Extreme typographic contrast — a single 96px uppercase Futura display tier for campaign lockups, then a quiet Helvetica Now 32/24/16px tier with no middle ground.
Underlined inline link in Helvetica Now Text. Underline is reserved almost exclusively for these links and the active nav indicator — nothing else in the system is underlined.
The campaign tile — full-bleed photography with a 96px uppercase Futura headline burned in and a single white on-image pill anchored bottom-left. The brand's signature editorial unit.
Primary navigation on white — swoosh left, centered nav row in body-strong, search pill + wishlist + bag right. The active section gets a 2px ink bottom underline, no background fill.
Four-column footer on white with a single hairline top divider — column headers in body-strong ink, links in Mute, and a 9px utility fine-print row at the very bottom.
PLP filter chip pill. Default is white with a hairline border; when selected it flips fully inverted to ink + white. No middle state.
12px colorway dots on product cards and PDP color pickers. Selected state adds a 2px ink outer ring with a white interior gap — Nike's concentric-ring selected state — with no size change.
The price row — regular price in ink, or discounted price in Sale red followed by a strike-through original in Mute and a '% off' figure in Sale. The only place a non-neutral color enters retail chrome.
PDP / FAQ accordion rows — stacked labels with 24px vertical padding, a right-aligned chevron, and a 1px hairline divider below each. No shadow, no fill.
The 'Latest in Clothing' icon card — a centered ~80px category illustration on white with a caption label directly below. Zero radius, no shadow.
Nike's commerce system runs 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 burned into full-bleed campaign imagery, with nav, filters, buttons, cards, and footer reduced to neutral typography and pill geometry on white and soft-cloud gray. There is no decorative gradient, no soft-shadow nostalgia, no accent color used for 'tone'. The layout stacks like a printed catalog — campaign hero, product grid, sport rail, footer — rather than animating like a typical SaaS landing page. The signature is maximum editorial expression in the imagery, maximum mechanical restraint everywhere else.
The palette is near-monochrome: pure Ink (#111111), pure Canvas white (#ffffff), and a single Soft Cloud surface (#f5f5f5) carry roughly 95% of the chrome. Ink is the only 'color' — primary CTA, swatch dot, active filter chip, campaign overlay, headline, and body text. A warm-neutral gray ramp (Charcoal #39393b, Ash #4b4b4d, Mute #707072, Stone #9e9ea0) handles text emphasis, and hairlines (#cacacb, #e5e5e5) do all dividing. Chromatic energy is reserved for two things only: product photography and semantic signal — Sale red (#d30005) on price rows, Success green (#007d48), Info blue (#1151ff). Category accent tints (#ed1aa0, #beaffd, #0a7281) appear sparingly as swatch dots and editorial tile fills, never as chrome.
Extreme typographic contrast. A single 96px uppercase Nike Futura ND display tier (line-height 0.9) is reserved strictly for editorial campaign lockups; everything else lives in a quiet 12–16px Helvetica Now Text / Medium tier. There is almost no middle ground — the jump from Helvetica Now Display 32px section headers directly to 16px body creates the 'billboard above, catalog below' effect on every page. Letter-spacing stays at 0. Substitute Bebas Neue or Anton for the display tier and Inter for UI text when proprietary Nike fonts are unavailable.
8px base spacing scale (2 / 4 / 8 / 12 / 18 / 24 / 30) with a universal 48px section rhythm between major blocks. Content maxes at ~1440px with gutters that grow to ~80px on ultrawide viewports rather than stretching. PLP grids run 3-up desktop → 2-up → 1-up with 8px gutters; a 220px fixed filter sidebar collapses to a 'Hide Filters' toggle. Every container is zero-radius; every CTA, search field, and chip is a pill at 30px (or 24px for search). Depth is entirely flat — no drop shadows anywhere in retail chrome; the only depth cues are 1px hairline dividers and a single inset bottom-line under sticky bars. Product cards carry zero internal padding: the image is full-bleed on soft-cloud, metadata sits directly below.
Buttons are pills only: black primary, soft-cloud secondary, white on-image overlay (bottom-left of every editorial tile), and circular icon controls at 40px. The search pill is the system's one documented form field — soft-cloud at 24px radius, flipping to white with a 2px ink border and 12px soft-cloud halo on focus. Product cards are flat and unpadded with an 8px metadata stack; filter chips flip fully inverted when active; swatch dots gain a 2px ink concentric ring when selected. Sale price is the only non-neutral chrome moment. Disclosure rows and footer columns are separated by 1px hairlines.
DESIGN.mdtext/markdownSKILL.mdtext/markdowntokens/colors.jsonapplication/jsontokens/typography.jsonapplication/jsontokens/components.jsonapplication/jsonadapters/tokens.csstext/cssadapters/html/index.htmltext/htmladapters/html/styles.csstext/css