A reverse-engineered look at Nike's storefront design language — near-black ink on pure white, fully-round pill CTAs, poster-scale uppercase headlines, and colour delegated entirely to product imagery.
Extracted from the live computed styles of nike.com/ph · Type shown in Inter as a substitute for the proprietary Helvetica Now Text.
A near-achromatic system: one ink, a four-step grey ramp, white surfaces, and no chromatic accent at all. Black is the brand colour.
Helvetica Now Text (proprietary), shown here in Inter — the nearest free Google substitute. Hierarchy is built from size and weight only; letter-spacing stays at normal across the whole scale.
Product tiles are flat and near-square: no rounding, no shadow. Whitespace and a 1px hairline do all the separating; a faint shadow appears only on hover.
A 4px base resolving to an 8px rhythm. Button padding sits at 6×16px; sections breathe on 48px and up.
Two shapes define Nike: the fully-round pill (≈30px) on every CTA and chip, and the hard-edged product tile (≤2px). The middle of the ramp is for inputs and containers.
| Name | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Two-up product grid kept (not single column); 22px gutters; hero type ~48px; hamburger nav. |
| Tablet | 768–1023px | Two-up grid; condensed top nav; hero headline scales down from 76px. |
| Laptop | 1024–1279px | Four-up product grid returns; full nav bar; 40px gutters. |
| Desktop | ≥ 1280px | Centred ~1200px content max-width; full-bleed hero imagery runs edge-to-edge above it. |
Nike keeps products paired even on the smallest screens to preserve browse density, and lets the poster-scale hero headline shrink while body sizes hold steady.
Nike's storefront has no pricing table; this demonstrates the plan pattern in-system, framed as Nike Membership.
No data grid exists on the marketing site; shown here as a plausible Nike order-history table.
| Order | Item | Size | Status | When |
|---|---|---|---|---|
| PH-48201 | Air Force 1 '07 | US 9 | Delivered | Jun 24 |
| PH-48199 | Pegasus 41 | US 10 | Delivered | Jun 21 |
| PH-48244 | Dunk Low | US 8 | In transit | Jun 26 |
| PH-48260 | Air Max 90 | US 9.5 | Processing | Jun 27 |
| PH-48118 | Tech Fleece Hoodie | M | Delivered | Jun 14 |
Nike's join / sign-in flow rendered in-system, using the pill button and rounded inputs.