An athletic commerce system built to sit on top of photography, driven by the published Podium CDS tokens: the chrome is deliberately quiet black, white and a ten-step grey ladder, with Nike Orange held back as a brand token rather than a UI colour, every semantic role shipped as an on-light/on-dark pair, all buttons flat 30px pills whose states step the token instead of fading, and the condensed uppercase Futura display set at a sub-1.0 line-height so campaign headlines stack like a poster.
Browse Nike in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: nike.com (live DOM, computed styles + the published Podium CDS token set, --podium-cds-*), 2026-07-19. Coverage: home / shop landing (AU locale). Logged-in account surface not captured (needs login). Note: Podium publishes 376 colour tokens; this spec records the full semantic layer and the grey ladder, and summarises the 10-step hue ramps rather than listing all of them.
Nike's commerce surface is deliberately *quiet* so the photography can shout. The chrome is pure white with a near-black #111111 ink and a 10-step grey ladder, and it carries almost no colour of its own — Nike Orange #FF5000 is a brand token, not a UI fill, and the buttons are black-and-white pills. All the energy comes from two places: full-bleed athletic photography that runs edge to edge with white text laid directly on it, and Nike Futura ND, the condensed uppercase display face, set at 76px with a *negative* line-height ratio (76/68.4) so headlines stack tight like a poster. Everything else is Helvetica Now, kept at 500. The system is fully token-driven with on-light/on-dark pairs for every semantic role — a merchandising system built to sit on top of imagery. Feels: athletic, editorial, high-contrast, photography-first.
| Token | Hex | Role / usage |
|---|---|---|
color-black | #111111 | The ink (a soft black, not #000) |
color-white | #FFFFFF | Canvas |
brand-nike-orange | #FF5000 | Brand token — logo/brand contexts, not UI chrome |
brand-snkrs-red | #EE0005 | SNKRS sub-brand |
50 #FAFAFA · 100 #F5F5F5 · 200 #E5E5E5 · 300 #CACACB · 400 #9E9EA0 · 500 #707072 · 600 #4B4B4D · 700 #39393B · 800 #28282A · 900 #1F1F21
| Token | Hex |
|---|---|
text-primary / -on-light | #111111 |
text-primary-inverse / -on-dark | #FFFFFF |
text-secondary / -on-light | #707072 |
text-secondary-inverse / -on-dark | #9E9EA0 |
text-hover / -on-light | #707072 |
text-hover-inverse / -on-dark | #E5E5E5 |
text-disabled / -on-light | #9E9EA0 |
text-disabled-inverse / -on-dark | #4B4B4D |
text-link | #1151FF |
text-critical | #D30005 |
text-success | #007D48 |
text-badge | #D33918 |
| Token | Hex |
|---|---|
bg-primary | #FFFFFF |
bg-primary-inverse | #1F1F21 |
bg-primary-on-light | #28282A |
bg-active / bg-image / bg-loading | #F5F5F5 |
bg-hover | #E5E5E5 |
bg-hover-inverse | #39393B |
bg-disabled | #E5E5E5 |
bg-disabled-inverse | #4B4B4D |
bg-always-dark / -light | #111111 / #FFFFFF |
bg-on-image-primary / -secondary | #FFFFFF / #E5E5E5 |
bg-critical / bg-success / bg-warning | #D30005 / #007D48 / #FEDF35 |
border-active #111111 (inverse #FFFFFF) · border-primary #707072 (inverse #9E9EA0) · border-secondary #CACACB · border-tertiary #E5E5E5 · border-disabled #CACACB (on-dark #39393B) · border-critical #D30005 · border-success #007D48
| Token | Hex |
|---|---|
button-bg-primary / -on-light | #111111 |
button-bg-primary-on-dark | #FFFFFF |
button-bg-primary-hover / -on-light | #707072 |
button-bg-primary-hover-on-dark | #CACACB |
button-bg-primary-disabled / -on-light | #E5E5E5 |
button-bg-primary-disabled-on-dark | #707072 |
button-border-secondary / -on-light | #CACACB |
button-border-secondary-on-dark | #9E9EA0 |
critical #D30005 (inverse #FF4E4A) · success #007D48 (inverse #1EAA52) · info #1151FF (inverse #1190FF) · warning #FEDF35 (inverse #FEEA55) · focus-ring #1151FF · box-focus-ring rgba(39,93,197,1) · focus-shadow rgba(17,17,17,0.12) · scrim-primary rgba(17,17,17,0.36) · scrim-primary-inverse / scrim-100-inverse rgba(17,17,17,0.80)
Podium also publishes 10-step ramps (50–900) for red, orange, yellow, green, blue, teal, purple, pink — e.g. red #FFE5E5…#530300, orange #FFE2D6…#3E1009 (with orange-400 #FF5000 being Nike Orange). These are merchandising/illustration ramps and do not appear in chrome.
Rules. The interface is black, white and grey; Nike Orange is a *brand* token, never a button or link colour. Every semantic role ships an on-light and on-dark pair because the same component must sit on white or on photography. Links are the only blue.
"Nike Futura ND", "Helvetica Now Text Medium" — condensed, uppercase, campaign headlines only"Helvetica Now Display Medium", Helvetica"Helvetica Now Text" and "Helvetica Now Text Medium"Published weights: font-weight-regular 400 · font-weight-medium 500 · font-weight-bold 700
| Role | Family | Size/Line | Weight | Tracking | Case |
|---|---|---|---|---|---|
| Campaign display | Nike Futura ND | 76/68.4 | 500 | normal | UPPERCASE |
| Section h2 | Helvetica Now Display Medium | 24/28.8 | 500 | normal | sentence |
| Card / overlay h1-h3 | Helvetica Now Display Medium | 20/24 | 500 | normal | sentence |
| Price / meta h3 | Helvetica Now Text Medium | 16/24 | 500 | normal | sentence |
| Nav link | Helvetica Now Text Medium | 16 | 500 | normal | sentence |
| Button label | Helvetica Now Text Medium | 16 | 500 | normal | sentence |
Patterns: the display face is the *only* uppercase role and the only place a condensed face appears — and it runs a line-height below 1.0 (68.4 on 76px, a 0.9 ratio), which is what produces the stacked-poster look. Everything else is Helvetica Now pinned at 500; despite a bold 700 token existing, no 700 was observed in use. Tracking is normal at every size.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.