What is Nike's primary brand color?

Nike's only chrome color is ink `#111111` — a true near-black used for primary CTAs, swatch dots, active filter chips, headlines, and body text. Pure white `#ffffff` is its equal partner for canvas, on-image CTAs, and inverse text. The system has no secondary brand color. Every other chromatic moment is either a product photograph or a semantic signal (sale `#d30005`, success `#007d48`), and the six category accents like `#ed1aa0` or `#0a7281` are reserved for swatch dots and editorial tiles, never primary chrome.

What typography does Nike use, and what should I substitute?

Nike runs a proprietary Nike Futura ND for the 96px uppercase campaign headlines burned into hero photography, with Helvetica Now Display Medium covering 16–32px section titles, Helvetica Now Text Medium handling 12–16px UI and buttons, and Helvetica Now Text carrying body and links. The closest open-source path is Bebas Neue or Anton at 96px / 0.9 / uppercase for the campaign tier, paired with Inter at weights 400 and 500 for everything else. Tighten letter-spacing roughly -0.5% on the substitute to approximate Futura ND's optical weight.

Does Nike have a dark mode in this DESIGN.md?

No — the spec captures Nike's public commerce surfaces (`/men`, PLPs, PDP, `/membership`, Jordan Golf), and those run on canvas `#ffffff` with ink `#111111`. The campaign tile component does use `#111111` as a full-bleed background with inverse white type, but that is an editorial moment inside a light-canvas page, not a system-wide dark theme. The token `accent-pink-deep` `#4c012d` is also a deep editorial overlay, not a dark surface.

Why is everything pill-shaped except the product cards?

Nike has exactly two button shapes — the 30px pill (`{rounded.lg}`) for every CTA, filter chip, and badge, and the full circle (`{rounded.full}`) for swatch dots and icon buttons. Product cards, campaign tiles, and the footer carry `{rounded.none}` 0px because Nike wants the photograph to be the card. Soft corners would compete with the product silhouette; pills carry every interactive surface, sharp edges carry every container. There is no third button shape anywhere in the system.

Can I use this DESIGN.md to build my own React commerce surface?

Yes — the file is structured to feed Claude, Cursor, or any AI tool that reads design tokens. The agent will reproduce Nike's restraint (one accent, pill CTAs, square cards on `#f5f5f5`, sale red `#d30005` only on prices) rather than a generic e-commerce theme. Every color, type style, radius, and spacing value is a quoted token you can paste directly into Tailwind config, CSS variables, or your own component library. Reference `{component.button-primary}`, `{component.product-card}`, and `{component.campaign-tile}` in your prompts and the output stays disciplined.

What's missing from this DESIGN.md spec?

Five things, documented in the Known Gaps section: mobile screenshots were not captured (responsive behavior is synthesized from desktop evidence and breakpoint tokens), hover states are not documented by global policy, modal and dialog styling beyond the geo-selector is not present, full form field styling for checkout and sign-up is not captured (only the search pill is), and bag plus wishlist filled-count badges are not visible in the captured pages. The spec covers roughly the commerce surface front-of-funnel — listing, detail, and membership.

Nike Design System

Nike's design system as a DESIGN.md file.

About Nike DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source nike.com

E-commerce & Retail

Nike's commerce system reads like a printed athletic catalog rendered for the browser. The chrome is almost violently restrained — pure ink `#111111`, pure canvas `#ffffff`, and a single soft cloud gray `#f5f5f5` carry roughly 95% of the surface area across `/men`, the PLP listings, the PDP, and `/membership`. Every chromatic moment in the page is reserved for the product photograph or a pricing signal. There is no decorative gradient, no soft shadow, no accent color used for tone. The brand's voice is loud, kinetic, and absolute, and the system earns that loudness by withholding color everywhere except where it has to scream.

This page packages Nike's commerce surface into a single DESIGN.md file built on the Google Labs spec. Inside: 22 color tokens (one ink, one canvas, one soft cloud, five text grays, four semantic, six category accents), 13 type styles topped by a 96px Nike Futura ND campaign tier at line-height 0.9, 5 corner radii, 8 spacing values from 2px to 48px, and 24 components — pill CTAs, search pills, filter chips, swatch dots, badge promos, the campaign tile, the PDP disclosure row, the four-column footer. Every value is quoted and machine-readable.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent will produce React components that look like Nike: pill-shaped `#111111` buttons, square product cards on `#f5f5f5` swatches, sale prices in `#d30005`, an 8px grid that locks PLP and PDP to the same vertical rhythm. Or read it as a discipline study — the system's strength is that almost every component reuses the same pill plus flat card plus photography-on-cloud vocabulary, which is why Nike never has to introduce a new token to ship a new page.

What makes it distinct

Photography-first chrome95% of the surface is `#111111`, `#ffffff`, and `#f5f5f5`; color lives only in the imagery
Single typographic mountain96px uppercase Futura ND at line-height 0.9, then a hard cliff to 16px Helvetica Now
Pill geometry everywhereevery CTA, chip, and badge uses `{rounded.lg}` 30px or `{rounded.full}`; sharp corners are reserved for cards
Sale is the only color in chrome`#d30005` price text with strike-through original, no badge background, never elsewhere
Zero drop shadowsdepth comes from photography and a single 1px inset hairline on sticky bars

Live at nike.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

nike.com

Explore Nike

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Nike design system FAQ

Common questions about Nike's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Airbnb design system

Another photography-led consumer system — compare Airbnb's soft Rausch coral against Nike's pure-black discipline.

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives.

Use Nike in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→