# Swoosh Nike · Design system migration spec

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

> Excellent example of premium e-commerce design where restraint and negative space put focus entirely on the product.

## 1. Identity DNA

The Swoosh Nike design system operates on a principle of radical restraint, functioning as a curated gallery for exclusive sneaker releases. Like a well-lit showroom, every element exists to frame the product—the system itself recedes, leaving the sneakers as the sole objects of attention. This is minimalism as a function of focus, not mere aesthetic reduction.

**One-liner:** A minimalist, image-first platform for discovering and buying premium sneakers.
**Keywords:** Sneaker · Drop · Culture · Exclusive
**Analogy:** A curated gallery for exclusive sneaker releases

## 2. Color

The palette is built on high-contrast black on off-white, with near-black (#111111) text on a clean (#F5F5F5) field. Brand red is a deliberate exception, appearing only within product imagery to let the sneakers themselves define the color story.

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

**Color principle:** High-contrast black on off-white with brand red used sparingly in imagery

The principle is strict: color is the product's domain, not the interface's.

## 3. Typography

Typography uses Helvetica Now Text, a clean grotesque-sans, set at a medium weight (500) for primary text to ensure clarity without heaviness. The type scale is hierarchical, with tight letter-spacing for display sizes, guiding the eye from navigation down through product titles, descriptions, and metadata.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 53px | 1.0 | 500 | -1px | Navigation and large headers |
| headline | 20px | 1.2 | 500 | 0px | Product titles |
| body | 16px | 1.75 | 500 | 0px | Product subtitles and descriptions |
| caption | 14px | 1.5 | 400 | 0px | Secondary metadata |
| label | 12px | 1.33 | 500 | 0.5px | Category tags and small labels |

**Type rules:**
- Use Helvetica Now Text or equivalent grotesque-sans
- Maintain medium weight (500) for primary text
- Keep letter-spacing tight for display sizes

## 4. Spacing

The spacing rhythm is established on a consistent 4px-based grid, creating a predictable and clean modular scale throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px-based spacing system with standard increments

## 5. Surfaces

Surfaces are defined by depth through subtlety: very low-opacity shadows (0.06) provide gentle lift, while thin 1px borders using a nearly transparent rgba(17,17,17,0.1) delineate boundaries without creating visual noise. The effect is one of clean, layered planes.

- **Radius:** sm 8px · md 12px · lg 16px · pill 999px
- **Shadows:**
  - 0px 4px 8px 0px rgba(17,17,17,0.06)
  - 0px 0px 24px 4px rgba(17,17,17,0.03)
  - 0px -1px 0px 0px rgb(229,229,229) inset
- **Borders:** Thin 1px borders using rgba(17,17,17,0.1)

## 6. Layout

The layout skeleton is a simple, honest 4-column grid of image cards. Product imagery sits above, with text information strictly left-aligned below, creating a clean, scannable rhythm that repeats with uniform 24px gutters.

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

**Skeleton:** 4-column grid of image cards with text below

## 7. Motion & Interaction

Motion philosophy is one of unobtrusive feedback: smooth fade-ins for content loading and subtle background transitions acknowledge user actions without drawing focus. Transitions are short and fluid, using standard cubic-bezier curves to maintain a polished but secondary presence.

- **Durations:** micro 150ms · small 250ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth fade-ins for content loading
  - Subtle background transitions

- **Hover:** Subtle background color change or scale effect
- **Click:** Immediate visual feedback with reduced opacity
- **Transition:** Smooth transitions for layout changes and state updates
- **Keyboard:** Standard tab navigation through interactive elements

## 8. Voice & Don'ts

The editorial voice is direct, informative, and product-focused, favoring bold, concise product names and action-oriented CTAs like 'Learn More'. It avoids promotional language, technical complexity, and informal slang unless part of a product's official name.

- **Tone:** Direct, informative, and product-focused
- **Headline style:** Bold and concise product names
- **CTA style:** Action-oriented buttons like 'Learn More'
- **Avoid:** Overly enthusiastic or promotional language / Complex technical descriptions / Informal slang unless part of product name

### Don'ts
- ❌ Don't use gradient backgrounds — screenshot shows solid off-white (#F5F5F5) or white (#FFFFFF) backgrounds
- ❌ Don't use decorative serifs — screenshot shows Helvetica Now (grotesque-sans) for all text
- ❌ Don't use heavy drop shadows — screenshot shows very subtle shadows (0.06 opacity) or none
- ❌ Don't center-align product text — screenshot shows left-aligned product names and descriptions
- ❌ Don't use complex card layouts — screenshot shows simple image cards with text below
- ❌ Don't use multiple accent colors — screenshot shows neutral palette with brand red only in images

They deliberately do not use gradient backgrounds, decorative serifs, heavy drop shadows, center-aligned product text, complex card layouts, or multiple accent colors.

## System Prompt (paste into AI tool)

```
Nike SNKRS platform for exclusive sneaker releases. Minimalist design with generous white space and image-first approach. Primary colors: off-white background (#F5F5F5), near-black text (#111111), with brand red appearing only in product imagery. Typography uses Helvetica Now Text (grotesque-sans) at medium weight (500). Layout is a clean 4-column grid with 24px gutters. Critical don'ts: Never use gradient backgrounds, avoid decorative serifs, don't add heavy shadows, keep text left-aligned, maintain simple card layouts, avoid multiple accent colors.
```