nike.com design system

---
version: alpha
name: "nike.com"
description: "Design system extracted from https://www.nike.com/ on 2026-09-28"
colors:
  background: "#f5f5f5"
  surface: "#e5e5e5"
  foreground: "#111111"
  muted-foreground: "#707072"
  primary: "#111111"
  on-primary: "#ffffff"
typography:
  headline-display:
    fontFamily: "Helvetica Now Text Medium"
    fontSize: "76px"
    fontWeight: 700
    lineHeight: "1.4"
  headline-lg:
    fontFamily: "Nike Futura ND"
    fontSize: "76px"
    fontWeight: 500
    lineHeight: "0.9"
  headline-md:
    fontFamily: "Nike Futura ND"
    fontSize: "76px"
    fontWeight: 500
    lineHeight: "0.9"
  body-md:
    fontFamily: "Helvetica Now Text Medium"
    fontSize: "12px"
    fontWeight: 500
    lineHeight: "1.5"
  label-md:
    fontFamily: "Helvetica Now Display Medium"
    fontSize: "20px"
    fontWeight: 500
    lineHeight: "1.2"
  button:
    fontFamily: "Helvetica Now Text Medium"
    fontSize: "16px"
    fontWeight: 500
    lineHeight: "1.5"
rounded:
  none: "0px"
  2xl: "30px"
  xl: "24px"
  full: "9999px"
spacing:
  unit: "4px"
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "20px"
  6: "24px"
  7: "36px"
  8: "48px"
  9: "60px"
components:
  button-ghost:
    backgroundColor: "#ffffff"
    textColor: "#111111"
    typography: "{typography.button}"
    rounded: "0px"
    height: "21px"
    padding: "0px 0px"
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#111111"
    typography: "{typography.button}"
    rounded: "30px"
    height: "36px"
    padding: "6px 16px"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "30px"
    height: "36px"
    padding: "6px 16px"
  input:
    backgroundColor: "#f5f5f5"
    rounded: "24px"
    height: "36px"
---

# nike.com

## Overview

Nike. Just Do It. Nike.com: Inspiring the world's athletes, Nike delivers innovative products, experiences and services.

Soft, well-rounded controls, flat surfaces separated by hairlines, large display type at 76px / 700, a single neutral accent on neutrals. The site ships in light mode by default. Measured from 3994 rendered elements at 1440px wide on 2026-09-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#f5f5f5` | Page background |
| surface | `#e5e5e5` | Cards, panels, raised or recessed surfaces |
| foreground | `#111111` | Primary text |
| muted-foreground | `#707072` | Secondary text, captions |
| primary | `#111111` | Accent: primary buttons, links, focus |
| on-primary | `#ffffff` | Text on the accent |

Full painted palette by area (largest first): `#f5f5f5`, `#111111`, `#e5e5e5`.

The accent `#111111` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **Nike Futura ND** for h2, h3: self-hosted webfont, not freely available; use **Jost** from Google Fonts as the stand-in.
- **Helvetica Now Text Medium** for body, button: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.
- **Helvetica Now Display Medium** for label: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | Helvetica Now Text Medium | 76px | 700 | 1.4 | normal |
| headline-lg | Nike Futura ND | 76px | 500 | 0.9 | normal |
| headline-md | Nike Futura ND | 76px | 500 | 0.9 | normal |
| body-md | Helvetica Now Text Medium | 12px | 500 | 1.5 | normal |
| label-md | Helvetica Now Display Medium | 20px | 500 | 1.2 | normal |
| button | Helvetica Now Text Medium | 16px | 500 | 1.5 | normal |

Type scale in use: 12px, 14px, 16px, 20px, 24px, 48px, 76px. Base body size 12px.

The H1 renders at 76px / 500, left aligned, up to 0px wide. Sample: "EVERYTHINGLED HERE".

## Layout

- Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 20, 24, 36, 48, 60 (px).
- Flex and grid gaps: 4, 12, 24 px.
- Content max width: 1344px, centred.
- Breakpoints: 320px, 600px, 959px, 960px, 1920px.
- Header: 96px tall, fixed, background `rgb(255, 255, 255)`; 12 nav links at 14px / 500 (Skip to main content · Accessibility at Nike · Find a Store · Help · Help · Order Status · Shipping & Delivery · Returns).

## Elevation & Depth

No box shadows in use; depth comes from hairline borders and surface tints (flat design).

## Shapes

- Buttons: 30px
- Inputs: 24px
- Cards and panels: 0px
- Images and media: 0px
- Radius scale: none 0px, 2xl 30px, xl 24px, full 9999px

## Components

### Button, ghost

Background transparent (it sits on `#ffffff`, so place it on that colour), text `#111111`, border none, radius 0px, height 21px, padding 0px 0px, 16px / 500. Sample label: "Shop By Sport".

### Button, secondary

Background `#ffffff`, text `#111111`, border none, radius 30px, height 36px, padding 6px 16px, 16px / 500. Sample label: "Shop MLB".

### Button, primary

Background `#111111`, text `#ffffff`, border none, radius 30px, height 36px, padding 6px 16px, 16px / 500. Sample label: "Shop Sam Kerr".

### Input

Height 36px, background `#f5f5f5`, border 0px solid #111111, radius 24px, 16px text, padding 7px 0px.

### Link

Colour `#111111`, no underline at rest, weight 500.

## Dark Mode

No dark mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute.

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1344px | 1135px | 16px | 76px, 0 lines, left | 96px, 240 links, 3 CTA | text only | 3→2 col; 3→3 col; 3→3 col | 2 full-width |
| laptop 1024px | 928px | 719px | 16px | 76px, 0 lines, left | 96px, 240 links, 3 CTA | text only | 3→2 col; 3→3 col; 3→3 col | 2 full-width |
| tablet 768px | 720px | 674px | 16px | 40px, 0 lines, left | 60px, hamburger (menu), 3 CTA | text only | 3→2 col; 3→3 col; 3→3 col | 3 full-width |
| phone 390px | 342px | 296px | 16px | 40px, 2 lines, left | 60px, hamburger (menu), 3 CTA | text only | 3→2 col; 3→3 col; 3→3 col | content-width |

- H1 goes 76px → 40px (53%), 0 → 2 lines.
- Nav collapses to a hamburger by 390px (first seen at 768px); header 96px → 60px.
- Card grids: 2 columns → 2 columns on phones (gap normal → normal).
- Body text stays 16px at every width.
- Phone side gutter 296px.

## Interaction & Motion

259 elements carry transitions; typical 0.5s with ease, mostly on opacity, transform, all. 2 running keyframe animations (_3FGhfyw3 0.65s 1; open 0.25s 1).

- Hover on button-primary: background #f5f5f5 → #cacacb, border transparent → #cacacb; cursor pointer.
- Hover on button-secondary ("Shop MLB"): no visible change; cursor pointer.
- Hover on nav-link ("Find a Store"): text #111111 → #707072, border #111111 → #707072; cursor pointer.
- Hover on input: no visible change; cursor text.
- Focus on button-primary: box-shadow ring rgb(17, 81, 255) 0px 0px 0px 2px.
- Focus on input: no visible focus style measured (may rely on :focus-visible with keyboard only).
- Tooltip triggers exist (36 × aria-describedby, 41 × title) but none opened on hover in the first viewport; title attributes fall back to the browser's native tooltip.
- Hover/click menus: below the trigger, 44px gap, shifted left; transparent, radius 0px, padding 36px 0px, shadow none; 1 items, 21px tall, 16px, padding 0px 0px, with descriptions; appears instantly (no fade); stays open after the pointer leaves (click-away or hover-intent grace).
- 36 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe).
- Portal roots present: modal-root.

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Do use 4px multiples for every padding, margin and gap; the site does not use odd values.
- Do reserve `#111111` for actions and focus; never paint large areas with it.
- Do keep body text at 12px in Helvetica Now Text Medium and headings in Nike Futura ND.
- Do match corner radii per element class (buttons 30px, cards 0px); do not pick one radius for everything.
- Don't add drop shadows; this design is flat.
- Don't substitute a different accent hue or introduce gradients that are not listed above.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: The primary action colour is the ink colour (monochrome palette); chromatic colours appear only as small accents.