# Nike — Design Reference

> Shouting condensed capitals over full-bleed athletes, on a plain white shelf

**Theme:** light · **Measured from:** nike.com (English, 1440 px)

Nike's site is a campaign wall with a store attached. Huge full-bleed photographs run edge to edge, and on top of them, bottom-left, sit massive condensed uppercase headlines in white (Nike Futura at 76px with line-height 0.9 — the lines overlap almost). Under each headline: one short white sentence and a small white pill button with black text ("Shop", "Watch ▶"). Everything else is deliberately plain: black `#111111` type on white, gray `#707072` for secondary info, and light gray `#f5f5f5` for the utility bar, search field and product photo backgrounds. There are no brand colors in the UI, no shadows, no rounded image tiles. The photos supply all the color and energy.

## Colors

| Name | Hex | Role |
|------|-----|------|
| Ink | `#111111` | Headings, nav and text on white; text of white pills |
| White | `#ffffff` | Canvas, headlines over photos, pill fill |
| Steel Gray | `#707072` | Secondary text: product subtitles, colorways, footer |
| Snow | `#f5f5f5` | Utility bar, search pill, product image background |
| Line | `#e5e5e5` | Carousel arrow circles, hover fills, dividers |
| Ember | `#ff7334` | Rare promo text accent only |

Nike's design system (Podium) defines full red, orange, yellow, green, blue and teal ramps as CSS variables, but the homepage uses none of them in the UI. Stay black, white and gray.

## Typography

**Nike Futura ND** for campaign headlines. Substitute: **Anton** from Google Fonts (heavy, condensed, uppercase).
**Helvetica Now Display / Text** for everything else. Substitute: **Inter** 400/500 from Google Fonts.

- Campaign headlines are always UPPERCASE, 76px, line-height 0.9, white over photos (or Ink when centered on white: "DESIGNED FOR PHOTO FINISHES").
- Weight 500 is the default for UI text — nav, buttons, labels, product names. 400 only for paragraphs.
- Tile titles are sentence case Helvetica Now Display 500 at 24px, with a 14px label above them ("Look Who's Up", "The Declaration").

| Role | Size | Weight | Line height | Letter spacing |
|------|------|--------|-------------|----------------|
| Display | 76px | 500 | 0.9 | 0 |
| Tile title | 24px | 500 | 1.2 | 0 |
| Body | 16px | 400 | 1.5 | 0 |
| Nav | 16px | 500 | 1.5 | 0 |
| Button | 16px | 500 | 1.5 | 0 |
| Body small | 14px | 500 | 1.5 | 0 |
| Caption | 12px | 500 | 1.5 | 0 |

## Shape and spacing

- **Buttons:** pill, 30px radius.
- **Search field:** 24px radius, Snow fill, 36px tall.
- **Images and tiles:** square corners, always.
- **Base unit:** 4px. Scale: 4, 8, 12, 16, 24, 48, 120.
- **Content width:** 1344px (48px side gutters at 1440); campaign images go full-bleed.
- **Grid gap:** 12px between image tiles.
- **Section gap:** about 120px of white between blocks.

## Components

### Primary button
White pill over photography: `#ffffff` fill, Ink `#111111` text, 30px radius, Helvetica Now Text Medium 16px, about 16px horizontal padding, about 35px tall. No border, no shadow. Labels: "Shop", "Shop MLB", "Shop 76ers". The capture shows no filled button on the white canvas; when one is needed there, invert it (Ink fill, white text) with the same shape.

### Secondary button
Same white pill with a trailing play icon: "Watch ▶". Sits 8px to the right of "Shop".

### Navigation
Two bars. A 36px Snow utility bar with Jordan and Converse marks on the left and "Find a Store | Help | Join Us | Sign In" in 12px Medium on the right. Below it, a 60px white bar: swoosh on the left, centered categories (Men, Women, Kids, Jordan, NikeSKIMS, Sport, Sportswear) in Ink 16px Medium, and on the right a Snow search pill (24px radius) followed by heart and bag icons.

### Campaign hero
Full-bleed photo about 700px tall. Bottom-left: uppercase display headline in white, one 16px white sentence, then the white pill. No overlay box, no gradient panel.

### Story tiles
Two or three square-cornered photos side by side with 12px gaps, each with a 14px label, a 24px white title and a white pill pinned to the bottom-left.

### Product carousel
Row of product shots on Snow `#f5f5f5` backgrounds, square corners, with round Line-colored prev/next arrows at the top right.

## Do

- Let one full-bleed photograph fill each campaign block.
- Set campaign headlines in heavy condensed UPPERCASE, line-height 0.9.
- Anchor headline, sentence and pill to the bottom-left of the image.
- Use small white pills with black text on photos.
- Keep product imagery on `#f5f5f5`, square-cornered.
- Use weight 500 for almost all UI text.

## Don't

- Don't use brand colors in buttons or backgrounds.
- Don't round image corners or add shadows.
- Don't put text in boxes or darken the photo with a visible panel.
- Don't set display headlines in lowercase or a regular-width font.
- Don't use pure black; use `#111111`.
- Don't make buttons big; they stay small and pill-shaped.

## Layout

Two-bar header, then a full-bleed campaign hero. Below it, a three-up row of square photos (48px gutters, 12px gaps), then another full-bleed campaign block, a two-up story row, a split two-photo campaign with a product carousel under it, and a centered Ink headline on white ("DESIGNED FOR PHOTO FINISHES") introducing another photo row. Rhythm: big image, smaller images, big image.

## Agent prompt guide

- Text: `#111111` · Secondary: `#707072` · On photos: `#ffffff`
- Canvas: `#ffffff` · Light fills: `#f5f5f5` · Lines: `#e5e5e5`
- Action: white pill with `#111111` text on photos; `#111111` pill with white text on white

Example prompts:

1. "Campaign hero: full-bleed photo 700px tall; bottom-left, a two-line uppercase headline in Anton 76px, line-height 0.9, white; one 16px Inter white sentence; a white pill button 'Shop' (30px radius, Inter 500 16px, #111111 text, padding 6px 16px)."
2. "Header: 36px #f5f5f5 utility bar with 12px Inter 500 links separated by |; below, 60px white bar with logo left, centered categories in Inter 500 16px #111111, and a #f5f5f5 search pill (24px radius, 36px tall) plus heart and bag icons on the right."
3. "Product carousel: square-cornered product images on #f5f5f5, 12px gaps, product name in Inter 500 16px #111111 and subtitle in #707072; round #e5e5e5 prev/next arrows top right."

## Quick start

### CSS variables

```css
:root {
  /* Colors */
  --color-ink: #111111;
  --color-white: #ffffff;
  --color-steel-gray: #707072;
  --color-snow: #f5f5f5;
  --color-line: #e5e5e5;
  --color-ember: #ff7334;

  /* Fonts */
  --font-display: 'Nike Futura ND', 'Anton', ui-sans-serif, system-ui, sans-serif;
  --font-heading: 'Helvetica Now Display', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Helvetica Now Text', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 76px;
  --text-display--line-height: 0.9;
  --text-display--font-weight: 500;
  --text-heading: 24px;
  --text-heading--line-height: 1.2;
  --text-heading--font-weight: 500;
  --text-body: 16px;
  --text-body--line-height: 1.5;
  --text-body--font-weight: 400;
  --text-nav: 16px;
  --text-nav--line-height: 1.5;
  --text-nav--font-weight: 500;
  --text-button: 16px;
  --text-button--line-height: 1.5;
  --text-button--font-weight: 500;
  --text-body-sm: 14px;
  --text-body-sm--line-height: 1.5;
  --text-body-sm--font-weight: 500;
  --text-caption: 12px;
  --text-caption--line-height: 1.5;
  --text-caption--font-weight: 500;

  /* Radius */
  --radius-buttons: 30px;
  --radius-inputs: 24px;
  --radius-cards: 0px;
  --radius-tags: 30px;

  /* Spacing */
  --spacing: 4px;

  /* Layout */
  --container-page: 1344px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ink: #111111;
  --color-white: #ffffff;
  --color-steel-gray: #707072;
  --color-snow: #f5f5f5;
  --color-line: #e5e5e5;
  --color-ember: #ff7334;

  /* Fonts */
  --font-display: 'Nike Futura ND', 'Anton', ui-sans-serif, system-ui, sans-serif;
  --font-heading: 'Helvetica Now Display', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Helvetica Now Text', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 76px;
  --text-display--line-height: 0.9;
  --text-display--font-weight: 500;
  --text-heading: 24px;
  --text-heading--line-height: 1.2;
  --text-heading--font-weight: 500;
  --text-body: 16px;
  --text-body--line-height: 1.5;
  --text-body--font-weight: 400;
  --text-nav: 16px;
  --text-nav--line-height: 1.5;
  --text-nav--font-weight: 500;
  --text-button: 16px;
  --text-button--line-height: 1.5;
  --text-button--font-weight: 500;
  --text-body-sm: 14px;
  --text-body-sm--line-height: 1.5;
  --text-body-sm--font-weight: 500;
  --text-caption: 12px;
  --text-caption--line-height: 1.5;
  --text-caption--font-weight: 500;

  /* Radius */
  --radius-buttons: 30px;
  --radius-inputs: 24px;
  --radius-cards: 0px;
  --radius-tags: 30px;

  /* Spacing */
  --spacing: 4px;

  /* Layout */
  --container-page: 1344px;
}
```

---

*Measured from https://www.nike.com/ on 2026-10-28 by Faundr. Inspired by Nike; not its official design system and not affiliated with Nike.*