name: nike-design
version: alpha
description: >
  Nike's canvas is stark white with near-black ink (#111111) — a deliberately
  neutral, editorial ground that lets the product photography and the brand's
  bold type do all the shouting. The single brand voltage is black itself: pill
  buttons are solid black with white text. Type is a two-tier system — clean
  Helvetica Now for UI/body, and a heavy condensed display face (Nike Futura /
  Trade Gothic style) for big all-caps campaign headlines like "RIP THE SCRIPT".
  Shape language is fully pill (rounded buttons) on an otherwise rectilinear,
  full-bleed image grid. Signature moves: edge-to-edge campaign imagery, ALL-CAPS
  condensed headlines, and the Swoosh as the only mark.
colors:
  # Brand
  primary: '#111111'          # near-black — ink + primary pill buttons
  on-primary: '#ffffff'
  pure-black: '#000000'       # links / max-contrast
  # Surface
  surface: '#ffffff'          # page canvas
  surface-secondary: '#f5f5f5'# promo bars, cards, hover wells
  surface-tertiary: '#e5e5e5'
  # Text
  on-surface: '#111111'       # primary text
  on-surface-secondary: '#757575' # secondary/meta copy
  # Hairlines
  hairline: '#e5e5e5'
  # Accent (used sparingly, mostly in product/sale contexts)
  sale: '#fe0000'             # Nike red — sale/markdown pricing
  accent-volt: '#d8ff00'      # "Volt" — occasional energy accent
typography:
  display:                    # condensed campaign headline
    fontFamily: '"Nike Futura ND", "Trade Gothic", "Helvetica Now Display", Helvetica, Arial, sans-serif'
    fontSize: 40px
    fontWeight: 700
    lineHeight: 36px
    letterSpacing: -0.5px
    textTransform: uppercase
  headline-lg:
    fontFamily: '"Helvetica Now Display", "Helvetica Now Text", Helvetica, Arial, sans-serif'
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.0
  headline-md:
    fontFamily: '"Helvetica Now Display", Helvetica, Arial, sans-serif'
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.1
    textTransform: capitalize
  body-lg:
    fontFamily: '"Helvetica Now Text", Helvetica, Arial, sans-serif'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 22.86px
  body-md:
    fontFamily: '"Helvetica Now Text", Helvetica, Arial, sans-serif'
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: '"Helvetica Now Text", Helvetica, Arial, sans-serif'
    fontSize: 12px
    fontWeight: 600
    lineHeight: 16px
    letterSpacing: 0.6px
rounded:
  sm: 4px       # small inline chips/badges
  full: 9999px  # pill buttons (Shop / Watch)
spacing:        # base unit 8px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  2xl: 60px
components:
  button-primary:            # "Shop", "Watch"
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.body-lg}'
    fontWeight: 500
    rounded: '{rounded.full}'
    padding: '12px 24px'
  button-secondary:
    backgroundColor: 'transparent'
    textColor: '{colors.on-surface}'
    borderColor: '{colors.on-surface}'
    borderWidth: '1.5px'
    rounded: '{rounded.full}'
    padding: '12px 24px'
  promo-bar:
    backgroundColor: '{colors.surface-secondary}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
  card:                      # product / editorial tile
    backgroundColor: '{colors.surface}'
    rounded: '0px'
    textColor: '{colors.on-surface}'
motion:
  easing-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  duration-standard: 300ms
icons:
  style: solid
  sizes: { sm: 16px, md: 24px }
  color: '{colors.on-surface}'

Nike

nike-design · alpha

Overview

Nike.com is a white editorial canvas built to frame imagery. The ground is pure white, ink is near-black #111111, and there is almost no chrome — sections are full-bleed photography or video stacked with generous whitespace and short, punchy labels ("Featured", "Trending", "Shop By Sport"). The brand's energy comes from two places: type and contrast. UI text is clean Helvetica Now, but campaign headlines switch to a heavy condensed, all-caps display face (the Futura/Trade-Gothic-style "RIP THE SCRIPT") that reads loud and athletic. The only button style is the solid-black pill with white text — color is deployed almost exclusively through product photos, not UI. The Swoosh is the single brand mark, and the whole system feels like a magazine: bold cover type, big pictures, minimal furniture.

Colors

Brand — black is the brand. primary #111111 is both the ink and the fill of every primary pill button (on-primary #ffffff). Pure #000000 is reserved for maximal-contrast links.

Surface — canvas is white; surface-secondary #f5f5f5 backs the promo bar, hover wells, and occasional cards; surface-tertiary #e5e5e5 for deeper wells.

Text — on-surface #111111 primary; on-surface-secondary #757575 for meta and supporting copy.

Accent — color is intentionally rare in chrome. sale #fe0000 (Nike red) marks markdown pricing; accent-volt #d8ff00 ("Volt") shows up as an occasional energy pop. Neither is a general UI color — the real palette is whatever is in the photograph.

Typography

Two families. Helvetica Now Text (with Helvetica Now Display for larger sizes) handles all UI, nav, and body. Campaign headlines use Nike's condensed display face (Nike Futura ND / Trade Gothic family) — heavy weight, all-caps, slightly negative tracking. Closest open-source substitutes: Helvetica/Inter for the text face and a condensed grotesque like Anton or Archivo Narrow for the display face.

Token	Size	Weight	Line-height	Tracking	Usage
display	40px+	700	36px	−0.5px	ALL-CAPS campaign headline ("RIP THE SCRIPT")
headline-lg	32px	700	1.0	0	Page H1
headline-md	24px	500	1.1	0	Section titles (capitalized)
body-lg	16px	400	22.86px	0	Body / links
body-md	15px	400	1.5	0	Supporting copy
label	12px	600	16px	+0.6px	Eyebrows, small UI labels (slight positive tracking)

Layout

Base unit 8px; scale 4 / 8 / 16 / 24 / 48 / 60. The page is a vertical stack of full-bleed media blocks — a hero image/video with overlaid headline + pill buttons, then horizontally scrollable "Featured" / "Trending" / "Shop By Sport" carousels. Text overlays sit bottom-left over imagery. Whitespace between sections is large; the grid is rectilinear and image-led, with no visible card borders.

Elevation & Depth

Essentially flat. Nike avoids shadows and gradients in chrome — depth is the photography itself. Cards are borderless image tiles; the only "elevation" is the solid black pill sitting over an image.

Shapes

Two radii: fully pill (9999px) for buttons and square (0px) for image tiles and media. Small inline chips/badges may use 4px. The contrast of round buttons on hard-edged imagery is the signature shape rhythm.

Components

• button-primary — solid black pill, white text, ~12px/24px padding ("Shop", "Watch" — the latter with a small play glyph).
• button-secondary — transparent pill with a 1.5px black outline.
• promo-bar — top surface-secondary strip with centered offer text + underlined links.
• card — borderless full-image editorial/product tile with a label beneath.

Motion

Standard ~300ms ease for hovers and carousel scrolls. Personality is confident and restrained — images may have subtle zoom/parallax on hero video, but UI motion is minimal. No bouncy or decorative animation; the energy is in the content, not the chrome.

Iconography

Minimal, solid-style glyphs (cart, search, account, play) at 16/24px in on-surface. The Swoosh is the singular brand mark and the only "icon" that ever carries weight.

Do's and Don'ts

• Do keep the canvas white and let full-bleed imagery dominate.
• Do use solid-black pill buttons as the primary action style.
• Do set campaign headlines in a heavy condensed ALL-CAPS display face.
• Do use Helvetica Now for all UI and body.
• Don't introduce UI accent colors — color comes from product photography.
• Don't round image tiles; keep media rectangular against pill buttons.
• Don't add shadows or gradients to chrome — stay flat and editorial.

Known Gaps

• Nike serves the page client-side; :root exposed no custom properties, so values are from computed styles plus Nike's known brand palette. Display-face hexes (Volt, sale red) and the exact condensed family are approximate; "Helvetica Now" and "Nike Futura ND" are licensed — substitute as noted for codegen.