Skip to content
Library

Nike.com. White walls, product as art, chrome dissolved into the background.

  • Commerce
  • Mixed theme
  • 6 colors
  • 6 typefaces

Nike.com operates as a product-first monochrome gallery: the UI stays nearly invisible so product photography can carry every screen. The entire interface is built from black, white, and three tints of gray — no accent color, no decorative gradient, no warm brand chrome. The Nike identity lives in the swoosh and the photography, never in the UI itself. Typography is compact and utilitarian, leaning on a custom Helvetica Now family at 12-20px with one oversized Nike Futura ND moment at 76px for hero headlines. Components are minimal: pill-shaped buttons at 30px radius, flat product cards, hairline borders, and almost zero elevation. The page alternates between pure white product surfaces and dramatic full-bleed dark editorial hero sections, creating rhythm through contrast rather than ornament.

Screenshot of Nike.com
Captured from nike.com on October 11, 2026

Nike.com design system

Nike.com

Neutrals6

  • Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color

  • Secondary text, muted helper copy, icon outlines at smaller sizes, breadcrumb labels, footer link separators

  • Disabled icon strokes, tertiary UI affordances, lowest-emphasis borders

  • Borders, dividers, hairline separators between grid sections, subtle input outlines

  • Subtle background tint for secondary surfaces, nav search field fill, tag backgrounds

  • Page background, card surface, button text on dark fills, icon strokes — the default canvas for product grids and category sections

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Paper White on Obsidian

18.88 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.