packages/shared-skills/skills/frontend/references/design/nike.md
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:
#111111): The foundation — primary text, button backgrounds, nav text, hero overlays. Deliberately not pure black (#000000), creating a fractionally softer reading experience#FFFFFF): Primary page canvas, button text on dark, card surfaces, nav bar background#FAFAFA): Lightest surface, near-white subtle differentiation (--podium-cds-color-grey-50)#F5F5F5): Secondary background, search input fill, image placeholder, loading skeleton (--podium-cds-color-grey-100)#E5E5E5): Hover state background, disabled button fill (--podium-cds-color-grey-200)#28282A): Primary background on dark/inverted sections (--podium-cds-color-grey-800)#1F1F21): Inverse primary background, darkest non-black surface (--podium-cds-color-grey-900)#39393B): Hover state on dark backgrounds (--podium-cds-color-grey-700)#111111): Main body text, headings, nav links (--podium-cds-color-text-primary)#707072): Descriptive copy, metadata, timestamps, price labels (--podium-cds-color-text-secondary)#9E9EA0): Inactive elements, unavailable options (--podium-cds-color-text-disabled)#4B4B4D): Disabled text on dark backgrounds (--podium-cds-color-text-disabled-inverse)#707072): Standard border color, matching secondary text#CACACB): Subtle borders, input borders, divider lines (--podium-cds-color-grey-300)#CACACB): Inactive border state#111111): Active/focused border, matching primary text#D30005): Critical errors, sale badges, urgent notifications (--podium-cds-color-red-600)#EE0005): Red-500, slightly lighter red for emphasis#D33918): Badge text, promotional callouts (--podium-cds-color-text-badge)#FF5000): Expressive orange accent (--podium-cds-color-orange-400)#007D48): Confirmation, availability, positive states (--podium-cds-color-green-600)#1EAA52): Success on dark backgrounds (--podium-cds-color-green-500)#1151FF): Text links, informational highlights (--podium-cds-color-blue-500)#1190FF): Links on dark backgrounds (--podium-cds-color-blue-400)#FEDF35): Warning backgrounds, attention banners (--podium-cds-color-yellow-200)rgba(39, 93, 197, 1)): Keyboard focus indicator ringEach color ramp runs 50–900 for expressive use in campaigns and product pages:
#FFE5E5 → #EE0005 → #530300#FFE2D6 → #FF5000 → #3E1009#FEF087 → #FCA600 → #99470A#DFFFB9 → #1EAA52 → #003C2A#D4FFFB → #008E98 → #043441#D6EEFF → #1151FF → #020664#E4E1FC → #6E0FF6 → #1C0060#FFE1F3 → #ED1AA0 → #4C012DNike 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.
Display: Nike Futura ND (custom condensed Futura variant exclusive to Nike)
Heading: Helvetica Now Display Medium
Body Medium: Helvetica Now Text Medium (weight 500)
Body: Helvetica Now Text (weight 400)
Arabic: Neue Frutiger Arabic — locale-specific alternative
| 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 |
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.
Primary
#111111)#FFFFFF), 16px/500, Helvetica Now Text Medium#707072), text hover colorrgba(39, 93, 197, 1)Primary on Dark
#FFFFFF)#111111)#CACACB)Secondary (Outlined)
#111111)#CACACB (grey-300)#707072, background to grey-200Disabled
#E5E5E5)#9E9EA0)Icon Button
#F5F5F5)#FFFFFF) — no visible card boundary in most cases#F5F5F5)#CACACB when visible, or borderless on search#111111 (border-active), 2px focus ring in rgba(39, 93, 197, 1)#D30005 (critical)#707072)#FFFFFF), sticky#707072)#F5F5F5) solid background#111111) background with white textBase 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 |
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.
| 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 |
| 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.
| 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 |
c.static-nike.com) with width parameters#111111)#FFFFFF)#F5F5F5)#111111)#707072)#CACACB)#D30005)#1151FF)When refining existing screens generated with this design system: