Overview
Nike's design system is defined by a high-contrast black-and-white foundation, oversized condensed display typography from the proprietary Nike Futura ND typeface, and generous white space that lets product imagery breathe. The system scales fluidly from 320px mobile viewports to 1920px+ large screens with deliberate typographic size jumps at key breakpoints. Interaction patterns use ripple effects on buttons, smooth 250ms transitions, and a focus ring built on #1151FF for accessibility clarity.
Signature traits: oversized uppercase display type, stark black-on-white contrast, pill-shaped CTAs (30px radius), fluid 12-column grid with 48px gutters on desktop, responsive typography scales across five breakpoints, minimal decorative ornamentation.
Colors
| Role | Token | Hex | Usage |
|------|-------|-----|-------|
| Background | --color-background | #FFFFFF | Page backgrounds, nav bar, footer |
| Surface | --color-surface | #F5F5F5 | Card backgrounds, search input, secondary surfaces |
| Text Primary | --color-text-primary | #111111 | Headings, body copy, primary labels |
| Text Secondary | --color-text-secondary | #707072 | Captions, meta text, secondary labels |
| Border | --color-border | #E5E5E5 | Dividers, outlines, tertiary borders |
| Accent | --color-accent | #111111 | Primary CTAs, active states, highlights |
Typography
| Role | Family | Size | Weight | Line Height | Letter Spacing | Usage | |------|--------|------|--------|-------------|----------------|-------| | Display | Nike Futura ND, Helvetica Now Text Medium, Helvetica, Arial, sans-serif | 4.75rem (960–1919px) / 2.5rem (320–959px) / 6rem (1920px+) | 400 | 0.9 | normal | Hero headlines, campaign statements | | Heading | Helvetica Now Display Medium, Helvetica, Arial, sans-serif | 1.5rem (title3) / 1.25rem (title4) | 500 | 1.2 | normal | Section titles, product names | | Body | Helvetica Now Text, Helvetica, Arial, sans-serif | 1rem | 400 | 1.5 | normal | Paragraph text, descriptions | | Caption | Helvetica Now Text Medium, Helvetica, Arial, sans-serif | 0.75rem | 500 | 1.5 | normal | Labels, metadata, legal, footer links | | Mono | monospace, monospace | 1em | 400 | 1.75 | normal | Code, technical data |
Layout
| Token | Value | Context | |-------|-------|---------| | Spacing XS | 4px | Icon gaps, inline micro-spacing | | Spacing SM | 8px | Component internal padding | | Spacing MD | 12px | Component padding, card gutters | | Spacing LG | 24px | Section internal margins, mobile exterior gutters | | Spacing XL | 36px | Section top/bottom padding | | Spacing 2XL | 60px | Section separators, major vertical rhythm | | Spacing 3XL | 84px | Large section gaps | | Spacing 4XL | 120px | Hero-scale spacing | | Grid Gutter | 16px | Column gutters | | Grid Gutter L | 12px | Search results grid column gap | | Exterior Gutter S | 24px | Mobile page margins | | Exterior Gutter L | 48px | Desktop page margins | | Max Width | 1920px | Content container ceiling | | Nav Height Mobile | 60px | Primary nav bar | | Nav Height Desktop | calc(36px + 60px) | Top bar + primary nav |
Responsive strategy: Five breakpoints — 320px (xs), 600px (s/md), 960px (m/lg), 1440px (l/xl), 1920px (xl/xxl). Typography scales at 320–959px, 960–1919px, and 1920px+ with distinct font-size values. Navigation collapses top brand bar below 960px. Grid shifts from 12 columns to simplified spans on mobile.
Elevation & Depth
| Level | CSS Value | Usage |
|-------|-----------|-------|
| sm | 0px 4px 8px 0px rgba(17,17,17,0.06), 0px 0px 24px 4px rgba(17,17,17,0.03) | Cards, dropdown panels, tooltips |
| md | 0px 4px 8px 0px rgba(17,17,17,0.18), 0px 0px 24px 4px rgba(17,17,17,0.09) | Elevated popovers, active dropdowns |
| lg | 0 0 0 2px #1151FF | Focus rings on interactive elements |
Shapes
| Token | Value | Applied To | |-------|-------|-----------| | none | 0px | Square image containers, grid cells | | sm | 4px | Form inputs, small UI chips | | md | 8px | Dropdown menus, footer dropdowns, modal panels | | lg | 12px | Large cards, country selector links | | xl | 30px | Primary buttons, secondary buttons, all CTA pill shapes | | full | 9999px | Search bar input, profile avatar images (24px radius used), icon button hover circles |
Components
Buttons: Three tiers — primary dark (bg: #111111, color: #FFFFFF), primary light (bg: #FFFFFF, color: #111111), and secondary (transparent with 1.5px border, #CACACB). All share 30px border-radius, font: body1-strong, and a ripple animation (rgba(255,255,255,0.7) expanding circle on active). Small size: 6px top/bottom padding, 16px side padding, 34px min-height. Hover states darken primary to #707072 and thicken secondary border to #111111.
Navigation: Fixed top bar (36px) in secondary background (#F5F5F5) for brand/Converse/Jordan switcher. Primary nav bar (60px) with centered category links on desktop using body1-strong. Mobile collapses category links; exposes hamburger. Search expands from 180px to 60% of viewport with animated grid-column transition at 400ms expressive easing. Dropdown menus animate via max-height: 0 → 800px with 250ms transition.
Search: Pill-shaped input (border-radius: 24px), background: #F5F5F5, expands on focus with 400ms easing. Cancel button animates in with scaleup keyframe (scale 0.5 → 1.1 → 1). Results tray slides in from right with slide-search-results-tray keyframe.
Footer: Three-column desktop layout collapses to accordion (<details>/<summary>) on mobile with box-shadow dividers. Language/country selector uses upward-opening dropdown with 8px border-radius and 1px tertiary border. Footer links use body2-strong, secondary color.
Accordion: Animated open/close via CSS grid grid-template-rows: 0fr ↔ 1fr with opacity cross-fade. Chevron rotates 180deg on open. Summary uses title4 typography with 30px vertical padding.
Icon Buttons: 36px minimum width, transparent background, tertiary hover (#E5E5E5), 6px padding for icon-only variant.
AI Icon: Gradient button linear-gradient(180deg, #d5ff44 0%, #ffffff 50%, #d5ff44 100%) with 1.5px solid #bad168 border, 48px circle, scales 1.05 on hover.
Do's and Don'ts
| Do ✓ | Don't ✗ |
|------|---------|
| Use text-transform: uppercase for all display-level Nike Futura ND type | Use Nike Futura ND for body text or captions |
| Use 30px border-radius for all button and pill shapes | Mix border-radius values arbitrarily outside the defined scale |
| Apply font-weight: 500 (medium) with Helvetica Now Display Medium for titles | Use font-weight: 700 (bold) — the system uses 400 and 500 only |
| Use #111111 and #FFFFFF as the primary contrast pair | Introduce off-brand accent colors not present in the palette |
| Use 48px exterior gutters on desktop and 24px on mobile | Break the 12-column grid structure for layout composition |
| Apply 0 0 0 2px #1151FF focus ring on all interactive elements | Remove focus outlines for aesthetic reasons — accessibility is enforced |
Agent Prompt Guide
You are working within the Nike. Just Do It. Nike.com design system. Key constraints:
- —Colors: background #FFFFFF, surface #F5F5F5, text-primary #111111, text-secondary #707072, border #E5E5E5, accent #111111, focus-ring #1151FF
- —Typography: Nike Futura ND (uppercase, weight 400, line-height 0.9) for display headlines; Helvetica Now Display Medium (weight 500, line-height 1.2) for titles; Helvetica Now Text (weight 400, line-height 1.5) for body; Helvetica Now Text Medium (weight 500) for strong/caption
- —Spacing: use xs=4px, sm=8px, md=12px, lg=24px, xl=36px, 2xl=60px tokens only
- —Radius: xl=30px for all buttons and pills, md=8px for dropdowns/cards, sm=4px for inputs, full for search bars and avatars
- —Buttons: always pill-shaped (30px radius), primary uses #111111 background, secondary uses transparent + 1.5px #CACACB border
- —Grid: 12-column, 48px exterior gutters desktop / 24px mobile, max-width 1920px
- —Never introduce colors, fonts, font-weights, or spacing values outside this system
- —Breakpoints: 320px, 600px, 960px, 1440px, 1920px