awesome-design-md/design-md/nike/DESIGN.md

Design System Inspired by Nike

1. Visual Theme & Atmosphere

Nike.com is a kinetic retail cathedral — a site that channels the explosive energy of sport into a digital shopping experience. The design operates on a principle of radical simplicity: strip everything back to black, white, and grey so that athletic photography and product color can dominate without competition. The result feels less like a website and more like a sports editorial laid out with the precision of a luxury magazine. Every pixel of real estate is either selling product or driving toward product.

The "Podium CDS" (Nike's internal Core Design System) establishes an aggressively monochromatic foundation. The UI disappears into black (#111111) text and white surfaces, allowing hero photography — sweating athletes, mid-air shoes, stadium energy — to carry the emotional weight. When color does appear in the UI, it's almost exclusively functional: red for errors, blue for links, green for success. The product itself is the color story. This restraint creates a visual paradox: the most colorful pages on the internet feel the most minimal, because all vibrancy comes from merchandise rather than interface.

The typography system is the other half of Nike's visual identity. Massive uppercase headlines in Nike Futura ND — a custom condensed Futura variant with impossibly tight line-height (0.90) — punch through hero imagery like a typographic shockwave. Below the headlines, the workhorse Helvetica Now family handles everything from navigation to product descriptions with Swiss-precision clarity. This split between expressive display type and functional body type mirrors Nike's brand duality: inspiration meets execution.

Key Characteristics:

• Monochromatic UI (black/white/grey) that lets product photography be the only color source
• Massive uppercase display typography (96px, line-height 0.90) that punches through hero images
• Full-bleed photography with no border radius — imagery fills every available edge
• Pill-shaped buttons (30px radius) as the primary interactive element
• 8px spacing grid with athletic discipline — every measurement snaps to the system
• Category-driven shopping architecture with large navigational image cards
• Shadow-free, border-minimal elevation model — surface differentiation through grey shifts only

2. Color Palette & Roles

Primary

• Nike Black (#111111): The foundation — primary text, button backgrounds, nav text, hero overlays. Deliberately not pure black (#000000), creating a fractionally softer reading experience
• Nike White (#FFFFFF): Primary page canvas, button text on dark, card surfaces, nav bar background

Surface & Background

• Snow (#FAFAFA): Lightest surface, near-white subtle differentiation (--podium-cds-color-grey-50)
• Light Gray (#F5F5F5): Secondary background, search input fill, image placeholder, loading skeleton (--podium-cds-color-grey-100)
• Hover Gray (#E5E5E5): Hover state background, disabled button fill (--podium-cds-color-grey-200)
• Dark Surface (#28282A): Primary background on dark/inverted sections (--podium-cds-color-grey-800)
• Deep Charcoal (#1F1F21): Inverse primary background, darkest non-black surface (--podium-cds-color-grey-900)
• Dark Hover (#39393B): Hover state on dark backgrounds (--podium-cds-color-grey-700)

Neutrals & Text

• Primary Text (#111111): Main body text, headings, nav links (--podium-cds-color-text-primary)
• Secondary Text (#707072): Descriptive copy, metadata, timestamps, price labels (--podium-cds-color-text-secondary)
• Disabled Text (#9E9EA0): Inactive elements, unavailable options (--podium-cds-color-text-disabled)
• Disabled Inverse (#4B4B4D): Disabled text on dark backgrounds (--podium-cds-color-text-disabled-inverse)
• Border Primary (#707072): Standard border color, matching secondary text
• Border Secondary (#CACACB): Subtle borders, input borders, divider lines (--podium-cds-color-grey-300)
• Border Disabled (#CACACB): Inactive border state
• Border Active (#111111): Active/focused border, matching primary text

Semantic & Accent

• Nike Red (#D30005): Critical errors, sale badges, urgent notifications (--podium-cds-color-red-600)
• Bright Red (#EE0005): Red-500, slightly lighter red for emphasis
• Nike Orange Badge (#D33918): Badge text, promotional callouts (--podium-cds-color-text-badge)
• Orange Flash (#FF5000): Expressive orange accent (--podium-cds-color-orange-400)
• Success Green (#007D48): Confirmation, availability, positive states (--podium-cds-color-green-600)
• Success Inverse (#1EAA52): Success on dark backgrounds (--podium-cds-color-green-500)
• Link Blue (#1151FF): Text links, informational highlights (--podium-cds-color-blue-500)
• Info Inverse (#1190FF): Links on dark backgrounds (--podium-cds-color-blue-400)
• Warning Yellow (#FEDF35): Warning backgrounds, attention banners (--podium-cds-color-yellow-200)
• Focus Ring (rgba(39, 93, 197, 1)): Keyboard focus indicator ring

Extended Color Spectrum (Podium CDS)

Each color ramp runs 50–900 for expressive use in campaigns and product pages:

• Red: #FFE5E5 → #EE0005 → #530300
• Orange: #FFE2D6 → #FF5000 → #3E1009
• Yellow: #FEF087 → #FCA600 → #99470A
• Green: #DFFFB9 → #1EAA52 → #003C2A
• Teal: #D4FFFB → #008E98 → #043441
• Blue: #D6EEFF → #1151FF → #020664
• Purple: #E4E1FC → #6E0FF6 → #1C0060
• Pink: #FFE1F3 → #ED1AA0 → #4C012D

Gradient System

Nike avoids UI gradients. When gradients appear, they are photographic — applied to product hero backgrounds (e.g., a red shoe on a red-to-deeper-red gradient). The design system itself is flat-color only.

3. Typography Rules

Font Family

Display: Nike Futura ND (custom condensed Futura variant exclusive to Nike)

• Fallbacks: Helvetica Now Text Medium, Helvetica, Arial
• Used exclusively for large uppercase display headlines
• Characteristically tight line-height (0.90) and uppercase transform

Heading: Helvetica Now Display Medium

• Fallbacks: Helvetica, Arial
• Used for section headings and product titles at 24–32px

Body Medium: Helvetica Now Text Medium (weight 500)

• Fallbacks: Helvetica, Arial
• Used for links, buttons, captions, emphasized body text

Body: Helvetica Now Text (weight 400)

• Fallbacks: Helvetica, Arial
• Used for standard body copy, descriptions, metadata

Arabic: Neue Frutiger Arabic — locale-specific alternative

Hierarchy

Role	Size	Weight	Line Height	Letter Spacing	Notes
Display	96px	500	0.90	—	Nike Futura ND, uppercase, hero headlines
Heading 1	32px	500	1.20	—	Helvetica Now Display Medium, section titles
Heading 2	24px	500	1.20	—	Helvetica Now Display Medium, subsections
Heading 3	16px	500	1.50	—	Helvetica Now Text Medium, card titles
Body	16px	400	1.75	—	Helvetica Now Text, product descriptions
Body Medium	16px	500	1.75	—	Helvetica Now Text Medium, emphasized text
Link	16px	500	1.75	—	Helvetica Now Text Medium, navigation links
Link Small	14px	500	1.86	—	Helvetica Now Text Medium, footer/utility links
Button	16px	500	1.50	—	Helvetica Now Text Medium, CTA text
Button Small	14px	500	1.50	—	Helvetica Now Text Medium, secondary buttons
Caption	14px	500	1.50	—	Helvetica Now Text Medium, price labels
Small	12px	500	1.50	—	Helvetica Now Text Medium, timestamps
Tiny	12px	400	1.50	—	Helvetica Now Text, legal text

Principles

Nike's typography is a study in tension. The display layer — Nike Futura ND at 96px with a devastating 0.90 line-height — is engineered to feel like a stadium scoreboard: massive, condensed, uppercase, impossible to ignore. It transforms headlines into battle cries. Below the display layer, Helvetica Now provides a clinical counterpoint: Swiss-precision legibility with generous 1.75 line-height for comfortable product browsing. Weight 500 (Medium) dominates throughout the body text, giving Nike's prose a slight assertiveness without the heaviness of bold — every sentence reads like a confident recommendation, not a shout.

4. Component Stylings

Buttons

Primary

• Background: Nike Black (#111111)
• Text: White (#FFFFFF), 16px/500, Helvetica Now Text Medium
• Border: none
• Border radius: fully rounded pill (30px)
• Padding: ~12px 24px
• Hover: background shifts to Grey-500 (#707072), text hover color
• Active: scale(0) ripple effect with opacity 0.5
• Focus: 2px box-shadow ring in rgba(39, 93, 197, 1)
• Transition: background 200ms ease

Primary on Dark

• Background: White (#FFFFFF)
• Text: Black (#111111)
• Hover: background shifts to Grey-300 (#CACACB)

Secondary (Outlined)

• Background: transparent
• Text: Nike Black (#111111)
• Border: 1.5px solid #CACACB (grey-300)
• Border radius: 30px
• Hover: border darkens to #707072, background to grey-200

Disabled

• Background: Grey-200 (#E5E5E5)
• Text: Grey-400 (#9E9EA0)
• Cursor: not-allowed

Icon Button

• Background: Grey-100 (#F5F5F5)
• Shape: 30px radius (or 50% for circular)
• Padding: 6px
• Hover: Grey-500 background

Cards & Containers

• Background: White (#FFFFFF) — no visible card boundary in most cases
• Border radius: 0px for product image cards (edge-to-edge imagery), 20px for interactive containers
• Shadow: none — Nike uses no card shadows whatsoever
• Hover: no lift effect on product cards; underline on text links within cards
• Product cards: image on top (no radius), text metadata below with 12px gap
• Category cards: full-bleed photography with text overlay on dark gradient
• Transition: opacity 200ms ease for image swap on hover

Inputs & Forms

• Background: Grey-100 (#F5F5F5)
• Border: 1px solid #CACACB when visible, or borderless on search
• Border radius: 24px (search inputs), 8px (form inputs)
• Font: Helvetica Now Text, 16px
• Focus: border shifts to #111111 (border-active), 2px focus ring in rgba(39, 93, 197, 1)
• Error: border #D30005 (critical)
• Placeholder: Grey-500 (#707072)
• Transition: border-color 200ms ease

Navigation

• Background: White (#FFFFFF), sticky
• Height: ~60px desktop
• Left: Nike Swoosh logo (24x24px SVG)
• Center: Category links (New & Featured, Men, Women, Kids, Sale) in 16px/500 Helvetica Now Text Medium
• Right: Search (24px radius input), Favorites, Cart icons
• Hover: text color shifts to Grey-500 (#707072)
• Mobile: hamburger menu, full-screen overlay
• Top banner: promotional message bar with dark background (#111111) and white text

Image Treatment

• Hero images: full-bleed, no border radius, edge-to-edge
• Product grid: square (1:1) or 4:3 aspect ratio, no border radius
• Category cards: 16:9 or 4:3, full-bleed with text overlay
• Image placeholder: Grey-100 (#F5F5F5) solid background
• Lazy loading: native loading="lazy", skeleton uses #F5F5F5 bg
• Product hover: secondary image swap (front → side view)

Promotional Banners

• Full-width dark (#111111) background with white text
• Tight padding (8-12px vertical)
• Centered text, 12px/500 Helvetica Now Text Medium
• Used for shipping promotions, member benefits, sale announcements

5. Layout Principles

Spacing System

Base unit: 4px (primary grid is 8px multiples)

Token	Value	Use
space-1	4px	Tight icon gaps, inline spacing
space-2	8px	Base unit, button icon gaps
space-3	12px	Card internal padding, tight margins
space-4	16px	Standard padding, nav spacing
space-5	20px	Product card gaps
space-6	24px	Section internal padding, grid gaps
space-7	32px	Section breaks
space-8	48px	Major section padding
space-9	64px	Hero section padding
space-10	80px	Large section spacing

Grid & Container

• Max container width: 1920px
• Standard content width: ~1440px with horizontal padding
• Product grid: 3-column on desktop, 2-column on tablet, 1-column on mobile
• Category grid: 3-column with full-bleed images
• Grid gap: 4-12px between product cards (intentionally tight)
• Horizontal padding: 48px desktop, 24px tablet, 16px mobile

Whitespace Philosophy

Nike's whitespace strategy is deliberately aggressive — not in the luxurious, breathing way of a fashion brand, but in a compressed, high-density way that fills every pixel with either content or intentional absence. Product grids use minimal gaps (4-12px) to create a sense of abundance and choice. Section breaks are generous (48-80px) to separate shopping contexts. The overall effect is a store that feels packed with product while remaining navigable — like a well-organized athletic superstore.

Border Radius Scale

Value	Context
0px	Product images, hero photography (sharp edges)
8px	Form inputs (non-search)
18px	Small interactive elements
20px	Containers, cards with UI content
24px	Search inputs, medium pills
30px	Buttons, tags, filters (full pill)
50%	Circular icon buttons, avatar placeholders

6. Depth & Elevation

Level	Treatment	Use
Flat	No shadow, no border	Default state for everything
Divider	0px -1px 0px 0px #E5E5E5 inset	Subtle inset line between sections
Focus	0 0 0 2px rgba(39, 93, 197, 1)	Keyboard focus ring
Overlay	Dark scrim over photography	Text-on-image legibility

Nike's elevation philosophy is radically flat. There are no card shadows, no hover lifts, no floating elements. Depth is communicated exclusively through color — dark sections recede, light sections advance, grey shifts indicate state changes. This flatness reinforces the athletic, no-nonsense brand personality: no visual frills, just direct communication. The only "shadow" in the entire system is a 1px inset divider line and the accessibility-required focus ring.

Decorative Depth

• Hero photography overlays: Dark gradient scrims over full-bleed photography for text readability
• Product background gradients: Colored backgrounds behind hero product shots (e.g., red shoe on red gradient)
• Banner bars: Solid dark (#111111) promotional strips at page top

7. Do's and Don'ts

Do

• Use Nike Black (#111111) for all primary text — never pure #000000
• Keep buttons pill-shaped (30px radius) and limited to primary/secondary variants
• Use full-bleed, edge-to-edge photography for hero sections — no border radius on images
• Let product photography provide all color vibrancy; keep UI monochromatic
• Use uppercase Nike Futura ND ONLY for display headlines (96px+)
• Maintain tight product grid gaps (4-12px) for a dense, abundant feel
• Use Grey-100 (#F5F5F5) for all input and placeholder backgrounds
• Reserve color exclusively for semantic meaning (red=error, green=success, blue=link)
• Use weight 500 (Medium) for all interactive text elements

Don't

• Don't add shadows to cards — Nike's elevation model is entirely flat
• Don't use border radius on product imagery — only UI elements get rounded corners
• Don't introduce brand colors beyond the grey scale for UI elements
• Don't use Nike Futura ND below 24px — it's exclusively a display face
• Don't add hover lift effects — Nike cards don't animate on hover
• Don't use regular weight (400) for buttons or links — always use 500
• Don't place colored backgrounds behind UI elements — color is reserved for product contexts
• Don't use more than two levels of text hierarchy per card (title + body)
• Don't add decorative dividers — the 1px inset is the only divider pattern
• Don't soften the contrast — Nike's design deliberately pushes black-on-white to maximum

8. Responsive Behavior

Breakpoints

Name	Width	Key Changes
Mobile	<640px	Single column, hamburger nav, display text scales down, tight 16px padding
Small Tablet	640-768px	2-column product grid begins, nav still collapsed
Tablet	768-960px	2-column grids, category cards scale, horizontal padding 24px
Small Desktop	960-1024px	Nav expands to full horizontal, 3-column product grid
Desktop	1024-1440px	Full layout, expanded nav, 3-column grids, 48px padding
Large Desktop	>1440px	Max-width container centered, increased margins, hero images full-bleed

Touch Targets

• Minimum touch target: 44x44px (WCAG AAA)
• Mobile nav icons: 48x48px touch area
• Product cards: full surface is tappable
• Filter pills: minimum 36px height with 12px padding

Collapsing Strategy

• Navigation: Full category links → hamburger menu below 960px; search, favorites, cart icons remain visible
• Product grids: 3-col → 2-col at 960px → 1-col at 640px
• Hero sections: Display text scales from 96px → 64px → 48px; hero images remain full-bleed at all sizes
• Category cards: 3-col → 2-col → 1-col with maintained full-bleed imagery
• Section padding: 80px → 48px → 32px → 24px as viewport narrows
• Promotional banner: text wraps or truncates, maintains dark background

Image Behavior

• Responsive images via Nike CDN (c.static-nike.com) with width parameters
• Product images: srcset with multiple resolutions (w_320, w_640, w_960, w_1920)
• Hero images: full-bleed at all breakpoints, aspect ratio shifts (16:9 desktop → 4:3 mobile)
• Lazy loading: native loading="lazy", grey-100 placeholder during load
• Art direction: hero crops change between desktop and mobile compositions

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: Nike Black (#111111)
• Background: White (#FFFFFF)
• Secondary surface: Light Gray (#F5F5F5)
• Heading text: Nike Black (#111111)
• Body text / hover: Secondary Text (#707072)
• Border: Border Secondary (#CACACB)
• Error: Nike Red (#D30005)
• Link: Link Blue (#1151FF)

Example Component Prompts

• "Create a product hero section with full-bleed edge-to-edge photography, no border radius, a dark gradient overlay for text, and a massive uppercase 96px/500 headline in Nike Futura style with 0.90 line-height and a Nike Black (#111111) pill button (30px radius)"
• "Design a 3-column product card grid with square images (no border radius), 4px gap between cards, product name in 16px/500 Nike Black (#111111), price in 14px/500, and secondary text in Grey-500 (#707072)"
• "Build a sticky white navigation bar with a left-aligned logo, centered category links in 16px/500 (#111111) with hover color #707072, and right-aligned search (24px radius, #F5F5F5 background), favorites, and cart icons"
• "Create a promotional banner strip with #111111 background, white 12px/500 centered text, and 8px vertical padding — full width, no border radius"
• "Design a secondary outlined button with transparent background, 1.5px #CACACB border, 30px pill radius, 16px/500 #111111 text, hover border darkening to #707072"

Iteration Guide

When refining existing screens generated with this design system:

1. Focus on ONE component at a time
2. Reference specific color names and hex codes from this document
3. Remember: product photography is the color — UI stays monochromatic
4. Use the grey scale for state changes: #F5F5F5 → #E5E5E5 → #CACACB → #707072
5. If something feels too colorful in the UI, it probably is — Nike keeps UI greyscale
6. Display type (Nike Futura) should ALWAYS be uppercase and never below 24px
7. Body type (Helvetica Now) should almost always be weight 500 for interactive elements