# Nike — Design System
> Global athletic footwear and apparel brand.
- **Canonical:** https://uiuxskills.com/library/nike
- **Source:** https://www.nike.com
- **Category:** E-commerce & Retail
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:12:24.587Z

---

---
version: alpha
name: Nike
description: Global athletic footwear and apparel brand.
tone: >-
  Confident, direct, and inspiring. The voice is concise and action-oriented, reflecting the 'Just
  Do It' philosophy.
color-scheme: light
colors:
  primary: "#2E2E2E"
  primary-hover: "#181818"
  surface: "#FFFFFF"
  on-surface: "#111111"
  on-primary: "#FFFFFF"
  neutral-dim: "#F5F5F5"
  outline: "#E5E5E5"
  error: "#D92121"
  success: "#28A745"
  focus-ring: "#000000"
typography:
  display-lg:
    fontFamily: Helvetica Neue, sans-serif
    fontSize: 48px
  display-md:
    fontFamily: Helvetica Neue, sans-serif
    fontSize: 36px
  headline-lg:
    fontFamily: Helvetica Neue, sans-serif
    fontSize: 30px
  headline-md:
    fontFamily: Helvetica Neue, sans-serif
    fontSize: 24px
  headline-sm:
    fontFamily: Helvetica Neue, sans-serif
    fontSize: 20px
  body-md:
    fontFamily: Helvetica Neue, sans-serif
    fontSize: 16px
  label-sm:
    fontFamily: Helvetica Neue, sans-serif
    fontSize: 12px
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
  card:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
  input-field:
    padding: "{spacing.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.primary-hover}"
  badge:
    backgroundColor: "{colors.neutral-dim}"
    textColor: "{colors.primary}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-on-surface:
    backgroundColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

Nike's visual identity is defined by bold, high-contrast typography and a minimalist, performance-oriented aesthetic. The brand leverages a monochromatic palette to keep the focus on product imagery, creating a premium, aspirational experience for athletes worldwide.

## Colors

The color strategy is strictly monochromatic, utilizing a dark-to-light scale to establish hierarchy and focus.

*   Primary (#2E2E2E): The core dark neutral for primary UI elements and buttons.
*   Primary-hover (#181818): The active state for primary interactive elements.
*   Surface (inferred) (#FFFFFF): The foundational background for clean content presentation.
*   On-surface (inferred) (#111111): The primary text color for high readability.
*   On-primary (inferred) (#FFFFFF): The text color for buttons and dark-themed components.
*   Neutral-dim (inferred) (#F5F5F5): Background for secondary sections and cards.
*   Outline (inferred) (#E5E5E5): Border color for dividers and input fields.
*   Error (inferred) (#D92121): Semantic color for critical error states.
*   Success (inferred) (#28A745): Semantic color for success indicators.
*   Focus-ring (inferred) (#000000): High-contrast indicator for accessibility.

## Typography

The brand relies on a single, clean sans-serif family, *Helvetica Neue*, to maintain a direct and authoritative tone across all touchpoints.

*   Display-lg (inferred): Reserved exclusively for hero headlines.
*   Display-md (inferred): Used for major section titles.
*   Headline-lg (inferred): Used for primary product titles.
*   Headline-md (inferred): Used for sub-headlines.
*   Headline-sm (inferred): Used for card titles.
*   Body-md (inferred): Standard paragraph text.
*   Label-sm (inferred): Small UI labels and metadata.

## Layout

Nike employs a fluid grid system that prioritizes full-bleed imagery on desktop, transitioning to a stacked single-column layout on mobile. The page structure follows a consistent flow: nav, hero, product-showcase, featured-icons, and footer. Spacing is generous, utilizing the 4px base unit with large whitespace (up to {spacing.2xl}) to separate distinct product categories. The hero pattern features full-bleed imagery with bold, overlaid typography and a primary CTA.

## Elevation & Depth

Depth is used sparingly to maintain a flat, minimalist aesthetic. Subtle shadows are applied only to interactive components to indicate focus or elevation.

*   Elevation.sm: Used for subtle card lift.
*   Elevation.md: Used for dropdowns and popovers.
*   Elevation.lg: Used for modal or drawer overlays.

## Shapes

The shape language balances professional structure with athletic agility. Layout containers utilize sharp, square corners, while primary call-to-action buttons use {rounded.full} to create a distinct, approachable, and high-energy feel. Smaller UI elements, such as swatches or badges, utilize {rounded.sm} for a tighter, more technical appearance.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Primary buttons use {colors.primary} with {rounded.full} to emphasize action. Secondary buttons use a white {colors.surface} background with a {colors.primary} border, suitable for secondary actions within a hero or grid.

### Card
Cards are designed to be clean and minimalist, using {colors.surface} with a subtle {colors.outline} border. Elevated cards may use {elevation.sm} to distinguish them from the background.

### Input Field
Input fields use a standard height with {spacing.sm} padding and an {colors.outline} border. On focus, the border must transition to {colors.focus-ring} to ensure high visibility.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for all primary CTAs. | Never use {colors.error} for non-critical UI elements. |
| Maintain generous whitespace using {spacing.2xl}. | Avoid mixing too many font weights. |
| Apply {typography.display-lg} for hero headlines. | Do not use {elevation.lg} on flat content blocks. |
| Use {colors.outline} for all subtle dividers. | Never apply {typography.label-sm} for primary headlines. |
| Ensure all buttons use {rounded.full}. | Do not use sharp corners on primary buttons. |
| Use {colors.on-surface} for body text. | Avoid using {colors.neutral-dim} for primary content. |
| Apply {elevation.sm} for interactive card lift. | Do not use {colors.primary} for background surfaces. |
| Use {spacing.md} for internal component padding. | Avoid inconsistent button corner radii. |

## Content Style

CTA labels are imperative, short, and direct. Use verbs like "Shop," "Explore," or "Choose" to drive immediate user action.

Headings are inspirational and benefit-driven. They should be declarative and concise, reflecting the brand's "Just Do It" philosophy.

Copy density is minimalist. Rely on high-impact imagery to tell the story, using text only to provide necessary context or direct the user to the next step.

## Imagery & Icons

Imagery features high-quality, high-impact photography of athletes in motion. Product shots are clean, often placed on neutral backgrounds to allow the product to stand out. Icons should be minimal and functional, adhering to the same monochromatic, high-contrast aesthetic as the rest of the UI.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Nike, a minimal and bold athletic brand. Match its confident, direct, action-oriented tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{spacing.lg}`, `{typography.display-lg}` — never hardcode hex values, pixel sizes, or font names.
2. Use only components defined under `components:`. Do not invent variants (e.g., no `button-ghost`, no `card-outlined` unless the spec lists them).
3. Apply `{rounded.full}` to all buttons and `{rounded.sm}` to badges and swatches. Layout containers use square corners. Follow the Shapes section exactly — never apply sharp corners to primary buttons.
4. Consult the Do's and Don'ts table before rendering any component. If a user request conflicts with a rule in that table, surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook, component metadata) is available, those values override the spec.

## Output contract

**Must:**
- Use token names for every color, spacing, radius, typography, and elevation value.
- Cover hover, focus, and disabled states for all interactive components where the spec defines them (e.g., `button-primary-hover`, `input-field-focus`).
- Apply `{colors.focus-ring}` as the focus indicator on all interactive elements.
- Use `{typography.display-lg}` only for hero headlines; follow the typography hierarchy defined in the spec for all other contexts.
- Use `{spacing.2xl}` between distinct content sections and `{spacing.md}` for internal component padding.

**Must NOT:**
- Invent colors, radii, fonts, or elevation values absent from the spec.
- Use generic utility defaults when a brand token exists.
- Add emoji, filler copy, or marketing language.
- Apply `{elevation.lg}` to flat content blocks or `{colors.error}` to non-critical elements.
- Rewrite, replace, or invent page copy, button labels, headings, or navigation items.
- Alter navigation structure or page section order as a side effect of applying tokens.

## When in doubt
- If a value is unspecified, ask the user before inventing a token.
- Prefer composing existing components over introducing new ones.
- For ambiguous backgrounds, default to `{colors.surface}`; for ambiguous text, default to `{colors.on-surface}`.
- For unspecified breakpoints, use mobile-first with one breakpoint at 768px, following the stacked-to-fluid-grid pattern described in Layout.
- Inferred tokens are approximations; defer to any authoritative design source if one is provided.