# Nike — Design System
> Official online store for Nike athletic footwear, apparel, and sports gear.
- **Canonical:** https://uiuxskills.com/library/nike-2
- **Source:** https://www.nike.in/?utm_source=Google&utm_medium=Search&utm_campaign=Core_11-02-26_Acquisition_Google_Search_Text_Low_Keyword_PanIndia_Web&gad_source=1&gad_campaignid=23550254850&gbraid=0AAAABCZeWhjkFejGsAU6xyGyeZKertWuW&gclid=Cj0KCQjw4orUBhCjARIsAIbF3qwFqo7fNu2SxrNZfUO9gu22d0WRKj159yXV4oKNo2oWCLNvKTriwIsaAnLWEALw_wcB
- **Category:** E-commerce & Retail
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-08-18T18:29:22.644Z

---

---
version: alpha
name: Nike
tagline: Just Do It.
description: Official Online Store for Athletic Shoes, Clothing & Sports Gear.
tone: Inspirational, bold, athletic, and uncompromising.
color-scheme: light
colors:
  primary: "#111111"
  on-primary: "#FFFFFF"
  secondary: "#707072"
  on-secondary: "#FFFFFF"
  surface: "#FFFFFF"
  on-surface: "#111111"
  surface-container: "#F5F5F5"
  outline: "#E5E5E5"
  error: "#D32F2F"
  success: "#2E7D32"
typography:
  display-lg:
    fontFamily: Helvetica Neue, Helvetica, Arial, sans-serif
    fontSize: 64px
    fontWeight: 800
    lineHeight: "1.1"
    letterSpacing: "-0.02em"
  display-md:
    fontFamily: Helvetica Neue, Helvetica, Arial, sans-serif
    fontSize: 48px
    fontWeight: 800
    lineHeight: "1.15"
    letterSpacing: "-0.01em"
  headline-lg:
    fontFamily: Helvetica Neue, Helvetica, Arial, sans-serif
    fontSize: 32px
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: 0em
  headline-md:
    fontFamily: Helvetica Neue, Helvetica, Arial, sans-serif
    fontSize: 24px
    fontWeight: 700
    lineHeight: "1.25"
    letterSpacing: 0em
  headline-sm:
    fontFamily: Helvetica Neue, Helvetica, Arial, sans-serif
    fontSize: 20px
    fontWeight: 700
    lineHeight: "1.3"
    letterSpacing: 0em
  body-lg:
    fontFamily: Helvetica Neue, Helvetica, Arial, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: 0em
  body-md:
    fontFamily: Helvetica Neue, Helvetica, Arial, sans-serif
    fontSize: 14px
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: 0em
  body-sm:
    fontFamily: Helvetica Neue, Helvetica, Arial, sans-serif
    fontSize: 12px
    fontWeight: 400
    lineHeight: "1.4"
    letterSpacing: 0em
  label-lg:
    fontFamily: Helvetica Neue, Helvetica, Arial, sans-serif
    fontSize: 16px
    fontWeight: 600
    lineHeight: "1"
    letterSpacing: 0.05em
  label-md:
    fontFamily: Helvetica Neue, Helvetica, Arial, sans-serif
    fontSize: 14px
    fontWeight: 600
    lineHeight: "1"
    letterSpacing: 0.02em
  label-sm:
    fontFamily: Helvetica Neue, Helvetica, Arial, sans-serif
    fontSize: 12px
    fontWeight: 600
    lineHeight: "1"
    letterSpacing: 0.05em
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 24px
  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-lg}"
    rounded: "{rounded.full}"
    padding: 0 {spacing.lg}
    height: 48px
    borderColor: transparent
  button-primary-hover:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.full}"
    padding: 0 {spacing.lg}
    height: 48px
    borderColor: transparent
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.full}"
    padding: 0 {spacing.lg}
    height: 48px
    borderColor: "{colors.primary}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.primary}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.full}"
    padding: 0 {spacing.lg}
    height: 48px
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    padding: "{spacing.md}"
    borderColor: transparent
  card-elevated:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    padding: "{spacing.md}"
    borderColor: transparent
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 0 {spacing.md}
    height: 44px
    borderColor: "{colors.outline}"
  input-field-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 0 {spacing.md}
    height: 44px
    borderColor: "{colors.primary}"
  link:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    borderColor: transparent
  link-hover:
    backgroundColor: transparent
    textColor: "{colors.secondary}"
    typography: "{typography.label-md}"
    borderColor: transparent
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: "{spacing.xs} {spacing.sm}"
    borderColor: transparent
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: "{spacing.xs} {spacing.sm}"
    borderColor: transparent
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: "{spacing.xs} {spacing.sm}"
    borderColor: transparent
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  swatch-on-secondary:
    backgroundColor: "{colors.on-secondary}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.05)
  md: 0 4px 6px rgba(0,0,0,0.05)
  lg: 0 10px 15px rgba(0,0,0,0.05)
---

## Overview

Nike's visual identity is defined by high-contrast, high-energy minimalism. It pairs bold, heavy, uppercase typography with raw athletic photography to create an urgent, inspirational, and premium sports aesthetic. The interface is designed to step back, allowing high-impact product imagery and bold messaging to drive user engagement.

## Colors

The color strategy relies on an ultra-high-contrast, minimal palette that acts as a neutral canvas for dynamic product photography. By limiting the brand colors to deep blacks, pure whites, and cool greys, interactive elements and product details take absolute priority.

*   `{colors.primary}` (inferred) (`#111111`): The dominant brand color used for primary typography, solid buttons, and core branding elements.
*   `{colors.on-primary}` (inferred) (`#FFFFFF`): High-contrast white text used on primary dark backgrounds.
*   `{colors.secondary}` (inferred) (`#707072`): Medium grey used for secondary text, subtitles, and less prominent UI elements.
*   `{colors.on-secondary}` (inferred) (`#FFFFFF`): Text color used on secondary dark elements.
*   `{colors.surface}` (inferred) (`#FFFFFF`): Clean white background used across the entire e-commerce experience to let products stand out.
*   `{colors.on-surface}` (inferred) (`#111111`): Dark charcoal/black text used on white surface backgrounds.
*   `{colors.surface-container}` (inferred) (`#F5F5F5`): Light grey container background used for product cards, badges, and hover states.
*   `{colors.outline}` (inferred) (`#E5E5E5`): Subtle border color used to separate sections and define input fields.
*   `{colors.error}` (inferred) (`#D32F2F`): Standard error red used for validation states and critical alerts.
*   `{colors.success}` (inferred) (`#2E7D32`): Standard success green used for positive confirmations and stock availability.

## Typography

The typography uses a clean, highly legible sans-serif scale to establish a hierarchy that mimics editorial sports design. Heavy weights and tight letter-spacing are reserved for high-impact headlines, while standard weights ensure readability for product details.

*   `{typography.display-lg}` (inferred): Heavy, high-impact uppercase font family used for primary hero headlines.
*   `{typography.display-md}` (inferred): Heavy font family used for secondary hero banners and campaign titles.
*   `{typography.headline-lg}` (inferred): Bold font family used for major section headers like 'Featured' and 'Trending'.
*   `{typography.headline-md}` (inferred): Bold font family used for product collection titles and promotional headers.
*   `{typography.headline-sm}` (inferred): Bold font family used for smaller card headings and section sub-headers.
*   `{typography.body-lg}` (inferred): Regular weight font family used for primary body copy and product descriptions.
*   `{typography.body-md}` (inferred): Regular weight font family used for secondary body copy, product details, and pricing.
*   `{typography.body-sm}` (inferred): Regular weight font family used for legal disclaimers, helper text, and fine print.
*   `{typography.label-lg}` (inferred): Semi-bold font family used for primary button labels and navigation links.
*   `{typography.label-md}` (inferred): Semi-bold font family used for secondary buttons and interactive controls.
*   `{typography.label-sm}` (inferred): Semi-bold font family used for badges, tags, and micro-interactive elements.

## Layout

*   **Grid & Spacing**: Nike utilizes a clean, high-density grid system structured around an 8px base unit, leveraging `{spacing.md}` and `{spacing.lg}` for tight, structured spacing that prioritizes content over decorative whitespace.
*   **Section Order**: The page flows top-to-bottom through: `nav` → `promo-banner` → `hero` → `featured` → `trending` → `bestsellers` → `footer`.
*   **Hero Pattern**: Full-width high-impact athletic imagery or video with bold, centered overlay typography using `{typography.display-lg}` and rounded pill-shaped CTA buttons.
*   **Responsive Behavior**: A fluid grid collapses from a 4-column product layout on desktop to a 2-column layout on mobile, utilizing horizontal swiping for product carousels to preserve vertical screen space.

## Elevation & Depth

Depth is kept extremely flat, relying on high-contrast borders and solid color blocks rather than heavy drop shadows to establish hierarchy.

*   `elevation.sm` (inferred): Used for subtle card lift and minor interactive elements.
*   `elevation.md` (inferred): Reserved for floating interactive elements like dropdowns and popovers.
*   `elevation.lg` (inferred): Used for high-priority overlays, modals, or drawer elements.

## Shapes

The shape language is built on a deliberate contrast between sharp, structural layouts and organic, pill-shaped interactive elements. This juxtaposition mirrors the intersection of technical sports equipment and human movement.

Product cards, content blocks, and structural containers utilize sharp, precise corners with `{rounded.sm}` or `{rounded.md}` to maintain a clean, grid-locked aesthetic. In contrast, interactive elements such as buttons (`{button-primary}`) and tags (`{badge}`) utilize `{rounded.full}` to provide an athletic and highly touch-friendly interface.

## 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`

### Primary Button (`button-primary`)
The primary button is a fully rounded pill shape utilizing `{rounded.full}` with a `{colors.primary}` background and `{colors.on-primary}` text styled in `{typography.label-lg}`. On hover, it transitions to `{button-primary-hover}` using `{colors.secondary}`. Use this component for the main call-to-action on a page or hero section.

### Secondary Button (`button-secondary`)
This button features a `{colors.surface}` background with a `{colors.primary}` border and text, using `{typography.label-lg}` and `{rounded.full}`. On hover, it transitions to `{button-secondary-hover}` with a `{colors.surface-container}` background. Use this for secondary actions, such as alternative choices or secondary filters.

### Card (`card`)
The standard card uses a `{colors.surface}` background with a sharp `{rounded.sm}` corner radius and `{spacing.md}` padding. It displays product imagery and metadata in `{colors.on-surface}`. Use this component to display items in product grids.

### Elevated Card (`card-elevated`)
This variant shares the same layout and `{rounded.sm}` shape as the standard card, but incorporates a subtle shadow layer using `elevation.sm` to lift it off the background. Use this to highlight featured products or promotional content.

### Input Field (`input-field`)
The input field features a `{colors.surface}` background, `{colors.on-surface}` text in `{typography.body-md}`, and a `{colors.outline}` border with `{rounded.md}` corners. Upon focus, it transitions to `{input-field-focus}` where the border color shifts to `{colors.primary}`. Use this for search inputs, checkout forms, and user registration.

### Link (`link`)
A text-only interactive element using `{typography.label-md}` and `{colors.on-surface}` text with a transparent background. On hover, it transitions to `{link-hover}` where the text color changes to `{colors.secondary}`. Use this for navigation menus, footer links, and inline text actions.

### Badge (`badge`)
A small, pill-shaped indicator utilizing `{rounded.full}` and `{spacing.xs} {spacing.sm}` padding. The default badge uses `{colors.surface-container}` and `{colors.on-surface}` text, while `{badge-error}` uses `{colors.error}` and `{badge-success}` uses `{colors.success}`. Use this to display product tags, stock status, or promotional alerts.

### Divider (`divider`)
A structural line with a height of 1px and a background color of `{colors.outline}`. Use this component to separate distinct content blocks, product listings, or sections within the layout.

### Color Swatch (`swatch-on-secondary`)
A small, square container measuring 32px with `{rounded.sm}` corners and a `{colors.on-secondary}` background. Use this component to display color options on product detail pages.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary call-to-actions to maintain brand authority. | Do not use `{colors.secondary}` for primary buttons as it reduces visual urgency. |
| Apply `{typography.display-lg}` in uppercase for high-impact campaign headlines. | Never use `{typography.body-lg}` for major hero section headings. |
| Utilize `{rounded.full}` on all interactive buttons like `{button-primary}` to ensure an athletic aesthetic. | Never use soft, rounded corners like `{rounded.lg}` on product imagery cards; keep them sharp with `{rounded.sm}`. |
| Separate product listings and content blocks cleanly using `{colors.outline}` or `{divider}`. | Avoid using complex drop shadows; stick to flat layouts or subtle `{elevation.sm}` when absolutely necessary. |
| Ensure high contrast by pairing `{colors.on-surface}` text directly with `{colors.surface}` backgrounds. | Do not use low-contrast text colors on `{colors.surface}`; always maintain readability with `{colors.primary}` or `{colors.secondary}`. |
| Use `{typography.label-sm}` inside `{badge}` components to keep metadata compact and legible. | Do not mix multiple decorative font families; stick strictly to the clean sans-serif scale defined in `{typography}`. |
| Apply `{spacing.md}` padding to `{card}` elements to maintain a tight, high-density layout. | Do not exceed `{spacing.xl}` for standard card padding as it dilutes the high-density aesthetic. |
| Use `{input-field-focus}` with a `{colors.primary}` border to clearly indicate active form states. | Do not leave the border as `{colors.outline}` when an input field is focused. |

## Content Style

*   **CTA Style**: Call-to-actions must use direct, action-oriented verbs in uppercase or sentence case. Keep labels short, punchy, and urgent (e.g., "Shop", "Explore", "Watch") to drive immediate user action.
*   **Heading Tone**: Headlines must be inspirational, bold, and urgent. Phrasing should rely on short, high-impact statements (e.g., "TRAIN RIGHT" or "RACE THE NIGHT AWAY") that evoke athletic performance and determination.
*   **Copy Density**: Maintain low copy density across all layouts. Focus heavily on large imagery and video, using minimal, highly-focused supporting copy to prevent cognitive overload and keep the focus on the product.

## Imagery & Icons

The imagery treatment is strictly photographic, focusing on high-energy, dynamic athletic photography that features athletes in motion. Product imagery must be shot in clean, high-contrast studio lighting against neutral grey or white backgrounds to ensure the product remains the focal point. Icons should follow a minimal, clean, and sharp line-art style that aligns with the sans-serif typography scale.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Nike, a bold, minimal, and accessible athletic brand with an inspirational, uncompromising tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.display-lg}`, `{rounded.full}` — never hardcode hex values, font sizes, or pixel radii.
2. Use only the components listed under `components:` (`button-primary`, `card`, `badge`, etc.). Do not invent variants, states, or shapes the spec does not define.
3. Follow `shapesNotes` precisely: `{rounded.sm}` on product cards and structural containers; `{rounded.full}` on all interactive buttons and badges. Never apply `{rounded.lg}` to card imagery.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with a rule — for example, requesting soft card corners or decorative shadows — surface the conflict before proceeding.
5. Apply `{spacing.xs}` through `{spacing.2xl}` for all paddings and gaps. Follow `layoutNotes` for full-width hero sections and multi-column product grids.

## Output contract

**Must:**
- Use token names for every color, type style, radius, and spacing value.
- Cover hover, focus, and disabled states for any interactive component the spec defines (e.g., `button-primary-hover`, `input-field-focus`, `link-hover`).
- Render hero headlines in `{typography.display-lg}`, uppercase, per the heading tone in `voiceAndContent`.
- Maintain contrast >= 4.5:1; default text pairings are `{colors.on-surface}` on `{colors.surface}` and `{colors.on-primary}` on `{colors.primary}`.
- Match CTA copy style: direct, action-oriented, short (e.g., "Shop", "Explore").

**Must NOT:**
- Invent colors, fonts, or radii outside the spec.
- Apply decorative drop shadows or multi-family typography.
- Add emoji, filler text, or marketing copy not supplied by the product team.
- Rewrite, replace, or invent page copy, headings, button labels, or navigation items.
- Alter information architecture as a side effect of applying tokens.

## When in doubt
- If a value is not defined in the spec, ask the product team before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds use `{colors.surface}`; for ambiguous containers use `{colors.surface-container}`; for ambiguous text use `{colors.on-surface}`.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px, consistent with the high-density grid described in `layoutNotes`.
- Any token marked "(inferred)" in the spec is a visual approximation; defer to an authoritative token source if one exists.