# Nike · Design system migration spec

> Source: https://www.nike.com  ·  Curated by OpenDesign  ·  en

> This site exemplifies how a global brand achieves premium positioning through radical restraint—letting world-class photography and bold type do all the emotional work.

## 1. Identity DNA

The system is engineered like a high-performance athletic arena: every element is stripped to its essential function, serving as a platform for peak human performance. The design language is built on a foundation of bold, dynamic imagery and confident typography that communicates speed and power. This is not a decorative system; it is a functional one, where the brand's energy is expressed through scale and clarity.

**One-liner:** A bold, photographic e-commerce experience that lets high-impact imagery and clean typography drive product storytelling.
**Keywords:** athletic · premium · minimal · bold · performance
**Analogy:** A premium athletic showroom with cinematic product showcases

## 2. Color

The color strategy is one of deliberate restraint, built on a high-contrast foundation of black and white. This creates a neutral, powerful canvas where the vibrant product photography becomes the primary color story.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F5F5F5` | card background |
| `--ink` | `#111111` | body text |
| `--ink-soft` | `#707072` | secondary text |
| `--muted` | `#E5E5E5` | placeholder |
| `--line` | `rgba(17,17,17,0.15)` | divider |

**Color principle:** High-contrast monochrome palette with photography providing all chromatic energy

The principle is clarity through contrast, letting imagery deliver emotional impact while the framework remains rigorously functional.

## 3. Typography

The typographic voice is defined by two clear roles: an extended, bold sans-serif for impactful headlines and a neutral, highly legible sans-serif for body copy. Headlines employ tight tracking and uppercase treatment to convey urgency and authority, while body text remains purely functional.

- **Display:** grotesque-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1.5px | Hero headlines and product names |
| headline | 32px | 1.2 | 500 | -0.5px | Section titles and category headings |
| body | 16px | 1.75 | 400 | 0px | Standard body text and descriptions |
| caption | 12px | 1.5 | 500 | 0px | Labels, metadata, and secondary information |

**Type rules:**
- Headlines use weight 500 (medium) rather than heavy weights
- Body text uses weight 400 (regular) for readability
- All typography uses tight negative letter-spacing for display sizes
- Chinese text uses Noto Sans SC with same weight hierarchy as Latin text

## 4. Spacing

Generous spacing is the fundamental rhythm, creating necessary breathing room around large photography and bold content blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px base grid with generous whitespace around hero sections

## 5. Surfaces

Surfaces are deliberately flat and borderless, relying on full-bleed imagery and whitespace to define separation and depth. The visual field is clean and unadorned, avoiding any complex shadows or borders that would dilute the photographic impact.

- **Radius:** sm 4px · md 8px · lg 30px · pill 999px
- **Shadows:**
  - rgba(17,17,17,0.06) 0px 4px 8px 0px
  - rgba(17,17,17,0.03) 0px 0px 24px 4px
- **Borders:** 1px solid rgba(17,17,17,0.15) with 0px 0px 2px pattern for dividers

## 6. Layout

The layout skeleton is built on spacious, grid-based sections that frequently employ full-bleed photography to create a sense of scale and editorial weight. This structure allows for large, focused content blocks that guide the user's journey with clear hierarchy.

- **Container max:** 1920px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width hero images with centered text overlays, single-column content flow with wide margins

## 7. Motion & Interaction

Motion is employed as a functional guide, not as decoration. Transitions are smooth and subtle, designed to focus attention and confirm interaction without distracting from the core content.

- **Durations:** micro 220ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Opacity transitions on hover states (0.3s)
  - Background-color transitions on interactive elements (0.5s)
  - Transform animations for scroll reveals (0.8s)

- **Hover:** Subtle opacity reduction and color transition on navigation links
- **Click:** No visible active states beyond standard browser defaults
- **Transition:** All properties transition smoothly at 0.3s default duration
- **Keyboard:** Standard focus management with visible focus indicators on interactive elements

## 8. Voice & Don'ts

The editorial voice is confident, motivational, and direct, mirroring the boldness of the visual system. Communication is short, impactful, and action-oriented, avoiding passive voice and generic corporate language.

- **Tone:** Confident, aspirational, direct
- **Headline style:** Bold, declarative statements with minimal supporting text
- **CTA style:** Action-oriented verbs in compact pill buttons ('即刻探索' / 'Shop Now')
- **Avoid:** Excessive punctuation / Overly casual language / Dense paragraphs

### Don'ts
- ❌ Don't use decorative backgrounds — screenshot shows clean white backgrounds (#FFFFFF) that let photography dominate
- ❌ Don't use rounded card containers — screenshot shows full-bleed images without visible card boundaries
- ❌ Don't use heavy font weights — screenshot shows weight 500 (medium) maximum for headlines, never bold/black weights
- ❌ Don't add accent colors to UI elements — screenshot shows buttons and links in pure black (#111111) without color highlights
- ❌ Don't use complex multi-column layouts — screenshot shows single-column centered content with generous whitespace
- ❌ Don't add drop shadows to text — screenshot shows text rendered directly over photography without shadows or overlays
- ❌ Don't use small, cramped navigation — screenshot shows generous padding (36px 0px 12px 0px) in header areas
- ❌ Don't mix multiple typefaces — screenshot shows consistent Noto Sans SC family throughout with Helvetica Neue fallback

The system deliberately avoids decorative typography, complex shadows, and cluttered layouts, committing fully to a clean, performance-driven aesthetic.

## System Prompt (paste into AI tool)

```
Nike.com is a premium athletic e-commerce platform that uses bold typography and cinematic photography to showcase products. The design language is clean and minimal with a monochrome palette: primary background white (#FFFFFF), secondary gray (#F5F5F5), ink black (#111111), and muted gray (#707072). Typography uses grotesque-sans for display (weight 500, negative letter-spacing) and humanist-sans (Noto Sans SC) for body text at weight 400. UI elements like buttons use pill shapes (border-radius: 30px) in solid black. Layout is full-width with generous whitespace and single-column content flow. Key donts: Never use decorative backgrounds that compete with photography, never exceed medium weight (500) for type, never add accent colors to navigation or buttons, never use heavy drop shadows on text overlays, never create cramped multi-column layouts, never mix typeface families.
```
