# Nike — Marketing site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Core

| 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 |

### Grey ladder

`50 #FAFAFA` · `100 #F5F5F5` · `200 #E5E5E5` · `300 #CACACB` · `400 #9E9EA0` · `500 #707072` · `600 #4B4B4D` · `700 #39393B` · `800 #28282A` · `900 #1F1F21`

### Text (semantic, with on-light / on-dark pairs)

| 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` |

### Backgrounds

| 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` |

### Borders

`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`

### Button tokens

| 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` |

### Status & scrims

`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)`

### Hue ramps

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.

## 3. Typography Rules

- Display: `"Nike Futura ND", "Helvetica Now Text Medium"` — condensed, uppercase, campaign headlines only
- UI headings: `"Helvetica Now Display Medium", Helvetica`
- Body / UI: `"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.

## 4. Component Stylings

**Nav** — a 96px white bar with a small `#F5F5F5` utility strip above it (Find a Store / Help / Join Us / Sign In at 16/500). Primary links at 16/500 sentence case, then search, favourites and bag icons. The `#F5F5F5` promo band below carries a centered offer line.

**Buttons** — the published `button-border-radius` is **30px**, so every button is a pill at 36px:

| Variant | Fill | Text | Border | Radius | Height | Padding | Type |
|---|---|---|---|---|---|---|---|
| Primary | `#111111` | `#FFFFFF` | none | 30px | 36px | 6px 16px | 16/500 |
| Primary on dark | `#FFFFFF` | `#111111` | none | 30px | 36px | 6px 16px | 16/500 |
| Secondary / chip | `#F5F5F5` | `#111111` | none | 30px | 36px | 6px 16px | 16/500 |
| On-image | `#FFFFFF` | `#111111` | none | 30px | 36px | 6px 16px | 16/500 |

Hover is a token step, not an opacity change: primary `#111111` → `#707072` (on dark `#FFFFFF` → `#CACACB`); disabled `#E5E5E5` (on dark `#707072`).

**Signature image tile** — a full-bleed photograph with a sentence-case white 20/24 label and a white on-image pill sitting directly on the picture, no card, no scrim box. Scrims (`rgba(17,17,17,0.36)` / `0.80`) are applied only where legibility requires.

**Search field** — a pill (30px) on `#F5F5F5` with an inline magnifier glyph.

**Inputs** — beyond search, not captured (no exposed forms on the landing page).

## 5. Layout Principles

Full-bleed edge-to-edge tiles with no page gutter: a 3-across category row (Women's / Men's / Kids') and 2-across campaign splits, each a photograph carrying its own overlay label and pill. Product grids sit inside a padded container. Published radius scale: `size-border-radius-s 4px` / `m 8px` / `l 12px` / `xl 24px`, plus `button-border-radius 30px`. Observed radii also include `2px`, `4.2px`, `4.8px`, `0 0 8px 8px` and `50%`.

## 6. Depth & Elevation

Radius scale: `4 / 8 / 12 / 24px` (published s/m/l/xl) and `30px` for buttons.

Published elevation tokens are z-index steps, not shadows: `elevation-10` through `elevation-100` in tens.

Shadow recipes:

- `shadow-100` — `0px 4px 8px 0px rgba(17,17,17,0.06), 0px 0px 24px 4px rgba(17,17,17,0.03)`
- `shadow-100-inverse` — `0px 4px 8px 0px rgba(17,17,17,0.18), 0px 0px 24px 4px rgba(17,17,17,0.09)`
- `button-box-shadow-width` / `-hover-width` — `0` (buttons are explicitly flat)

Observed in the DOM: `rgb(229,229,229) 0px -1px 0px 0px inset` — a hairline drawn as an inset shadow. Depth is otherwise flat; separation comes from photography edges and grey fills.

## 7. Motion

Published motion tokens:

- Easings: `motion-easing-functional cubic-bezier(0.4, 0, 0.2, 1)` and `motion-easing-expressive cubic-bezier(0.6, 0, 0.1, 1)`
- Durations: `150ms` / `250ms` / `300ms` / `350ms` / `400ms`

Observed: `transform 0.15s`, `opacity 0.25s, transform 0.25s`. The two-easing split (functional vs expressive) is the notable structure — utility transitions use the material-style curve, brand moments the sharper expressive one.

## 8. Backgrounds, Effects & WebGL

Photography-first and otherwise flat: no WebGL, no canvas, no backdrop-filter, no grain. The only gradients observed are legibility scrims over imagery, e.g. `linear-gradient(rgba(0,0,0,0.8), rgba(255,255,255,0))`. `bg-image` and `bg-loading` both resolve to `#F5F5F5`, so image slots hold a grey placeholder while loading.

## 9. Do's and Don'ts

### Do
- Use `#111111` as the black — never pure `#000`.
- Reserve Nike Futura ND for uppercase campaign headlines, and set it with a sub-1.0 line-height (76/68.4).
- Keep all other type in Helvetica Now at weight 500, sentence case, normal tracking.
- Make every button a 30px pill at 36px, black-on-white or white-on-black.
- Use the on-light / on-dark token pairs so components work over photography.
- Let full-bleed photography carry the colour; lay white labels and pills directly on it.
- Change state by stepping the token (`#111111` → `#707072`), not by changing opacity.

### Don't
- Don't use Nike Orange `#FF5000` as a button, link or chrome colour — it is a brand token.
- Don't set the display face in sentence case, or use it for UI copy.
- Don't add drop shadows to buttons; `button-box-shadow-width` is explicitly `0`.
- Don't use weight 700 — the system ships the token but the surface stays at 500.
- Don't put the merchandising hue ramps into chrome.
- Don't box photography into cards with gutters; tiles run full-bleed.

## 10. Responsive Behavior

Not captured — no media-query census was resolved from the accessible stylesheets. The token set is fixed-pixel rather than rem-based, so breakpoint behaviour is component-level.

## 11. Agent Prompt Guide

- Canvas `#FFFFFF` · Ink `#111111` · Secondary `#707072` · Border `#CACACB` / `#E5E5E5` · Fill `#F5F5F5` · Link `#1151FF` · Brand (non-UI) `#FF5000`
- Font: Nike Futura ND (uppercase display), Helvetica Now Display/Text Medium at 500 · Body: 16/24 · Radius: 30px button / 4-24px surfaces · Control height: 36px
- Focus: ring `#1151FF`, shadow `rgba(17,17,17,0.12)` · Hover fill: `#111111` → `#707072` (on dark `#FFFFFF` → `#CACACB`) · Motion `150-400ms` on `cubic-bezier(.4,0,.2,1)` / `cubic-bezier(.6,0,.1,1)`

<nike_design_language>
An athletic commerce system built to sit on top of photography, driven by the published Podium CDS token set. Chrome is deliberately quiet: a white canvas, a soft-black #111111 ink (never pure #000), and a ten-step grey ladder (#FAFAFA, #F5F5F5, #E5E5E5, #CACACB, #9E9EA0, #707072, #4B4B4D, #39393B, #28282A, #1F1F21) with secondary text at #707072 and hairlines at #CACACB/#E5E5E5. Nike Orange #FF5000 is a BRAND token only — never a button, link or chrome colour — and the sole blue is the #1151FF link and focus ring. Every semantic role ships an on-light and on-dark pair, because the same component must work over white or over an image. Type splits sharply: Nike Futura ND, condensed and UPPERCASE, is reserved for campaign headlines and is set with a sub-1.0 line-height (76/68.4) so it stacks like a poster, while all UI and body copy is Helvetica Now Display/Text Medium pinned at weight 500, sentence case, normal tracking, at 24/28.8, 20/24 and 16/24. Buttons are always 30px pills at 36px with 6px/16px padding, black-on-white or white-on-black, and are explicitly flat (button-box-shadow-width is 0); state changes step the token — #111111 to #707072 on light, #FFFFFF to #CACACB on dark — rather than changing opacity. Layout is full-bleed photographic tiles with no gutter, white 20/24 labels and white pills laid directly on the image, with rgba(17,17,17,.36) and .80 scrims only where legibility demands. Surfaces are otherwise flat: radii 4/8/12/24px, one soft shadow-100 recipe, and hairlines drawn as inset shadows. Motion runs 150-400ms across two published curves, functional cubic-bezier(.4,0,.2,1) and expressive cubic-bezier(.6,0,.1,1). Feels: athletic, editorial, high-contrast, photography-first. Avoid: using Nike Orange in chrome, setting the display face in sentence case or in UI, weight 700, drop shadows on buttons, merchandising hue ramps in the interface, and boxing photography into gutter-separated cards.
</nike_design_language>