Color Palette
Background Colors
Blue
rgba(115,133,159,.5) · ×3
Blue 3
rgba(115,133,159,.75) · ×1
No Brand Color Defined
Nike's system defines no dedicated brand accent color token. The palette is entirely achromatic — pure black (#111111 · ×976) and white (#FFFFFF · ×312) form the entire visual vocabulary. Hierarchy is expressed through weight, scale, and spacing alone.
Typography
--font-family-6 · Nike Futura ND
Nike Futura ND
Just Do It. Find Your Greatness. Move to Zero.
Regular · 400
Medium · 500
Semibold · 600
Bold · 700
--font-family-2 / --font-family-7 · Helvetica Now
Helvetica Now
Speed, performance, comfort. Engineered for athletes, made for everyone.
Helvetica Now Text
Helvetica Now Display
Arial
Inter
VideoJS
Just Do It.
Display · 72px · Bold · line-height: 64.8px · letter-spacing: −0.5px (only token)
Find Your Greatness
Heading 32px · Bold · line-height: 45.7143px
New Season. New Speed.
Heading 30px · Bold · line-height: 45px
Air Max · React Infinity · ZoomX
Heading 24px · Semibold · line-height: 30px
Discover the latest Nike footwear, apparel, and equipment. Free shipping and returns on every order.
Body 16px · Regular · line-height: 24px
₹8,995 · Available in 6 colors · Limited edition
Body 14px · Regular · line-height: 22.8571px
RUNNING · TRAINING · LIFESTYLE
Label · 10px · Bold · uppercase · letter-spacing: 0.5px
Letter Spacing — 1 token
Nike Platform
--letter-spacing-tight
−0.5px · the only tracking token in the system — applied universally to all headings and display copy. No positive tracking defined anywhere.
√
Single token. Universal application.
Used on Nike Futura ND + Helvetica Now Display
Spacing
Spacing Scale
19 steps — 1px → 84px
Borders
Border Widths — 4 tokens (including 0.5px sub-pixel and 6px accent)
--border-width-hairline
0.5px · ×1 — retina sub-pixel divider
--border-width-thin
1px · ×36 — cards, tables, form fields
--border-width-base
1.5px · ×4 — focus underlines, active states
--border-width-thick
6px · ×4 — accent bars, bold section dividers
Shadows / Elevation
◻
No shadow tokens defined
Nike's design token file returns an empty shadow: {} object. Nike.com uses no CSS custom property-based elevation. Depth is communicated entirely through achromatic contrast, border presence, and layered photography — zero drop shadows or blur anywhere in the system. This is one of only two systems in this series with no shadow tokens (alongside Mistral AI).
Z-Index
| Layer | Value | Usage |
|---|
| --z-1 · Base | 1 | Positioned inline elements, product card layers |
| --z-2 · Raised | 2 | Elevated inline surfaces, image overlays |
| --z-3 · Navigation | 10 | Sticky top navigation bar |
| --z-4 · Dropdown | 100 | Nav dropdown panels, search suggestions |
| --z-5 · Overlay | 999 | Full-page overlays, mobile menu, lightbox |
| --z-6 · Dialog | 1000 | Shopping cart drawer, cookie notices, toasts |
Breakpoints
📱
--breakpoint-xs
340px
Smallest supported device — minimum viewport
📱
--breakpoint-sm
768px
Tablet threshold — layout reflow
💻
--breakpoint-md
960px
Desktop start — full-width product grids enabled
🖥️
--breakpoint-lg
1300px
Wide desktop — editorial layout tier
🖥️
--breakpoint-xl
1600px
Max — large display, hero campaign layouts
Opacity
Opacity Tokens
1 token — 0.85 only
The rarest opacity vocabulary in this entire series — a single token at 85%. Used exclusively for the semi-transparent navigation overlay that appears when the mega-menu opens, darkening product imagery without fully obscuring the page. Everything else is fully opaque or fully transparent.
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
| Text Color | Background Color | Ratio | WCAG Rating |
|---|
| --color-mid-gray (#707072) | --color-dark-gray (#111111) | 3.82:1 | AA Large |
| --color-mid-gray (#707072) | --color-black (#000000) | 4.25:1 | AA Large |
| --color-mid-gray (#707072) | --color-white (#FFFFFF) | 4.94:1 | AA |
| --color-mid-gray (#707072) | --color-dark-blue (#2B333F) | 2.58:1 | Fail |
| --color-mid-gray (#707072) | --color-white-2 (#F5F5F5) | 4.53:1 | AA |
| --color-mid-gray-3 (#888888) | --color-dark-gray (#111111) | 5.33:1 | AA |
| --color-mid-gray-3 (#888888) | --color-black (#000000) | 5.92:1 | AA |
| --color-mid-gray-3 (#888888) | --color-white (#FFFFFF) | 3.54:1 | AA Large |
| --color-mid-gray-3 (#888888) | --color-dark-blue (#2B333F) | 3.59:1 | AA Large |
| --color-mid-gray-3 (#888888) | --color-white-2 (#F5F5F5) | 3.25:1 | AA Large |
CSS Variables Reference
Dark Gray (page · most used)--color-dark-gray#111111 · ×976
Black--color-black#000000 · ×578
White--color-white#FFFFFF · ×312
Dark Blue--color-dark-blue#2B333F · ×38
White 2 (card bg)--color-white-2#F5F5F5 · ×4
Blue (nav overlay 50%)--color-bluergba(115,133,159,.5) · ×3
Blue 3 (overlay 75%)--color-blue-3rgba(115,133,159,.75) · ×1
Mid Gray (body text)--color-mid-gray#707072 · ×236
Mid Gray 3--color-mid-gray-3#888888 · ×2
Mid Gray 2 (border)--color-mid-gray-2#767676 · ×9
Blue 2 (gradient)--color-blue-2#73859F · ×2
No shadow colors definedshadow: {}empty
No brand accent color—not defined
Times (base/fallback)--font-family-baseTimes
Helvetica Now Text--font-family-2UI font
Helvetica Now Text Medium--font-family-3Medium weight
Arial--font-family-4Fallback
VideoJS--font-family-5Media player
Nike Futura ND--font-family-6Display / hero
Helvetica Now Display--font-family-7Large headlines
Inter--font-family-8Fallback UI
Regular / Medium / Semibold / Boldweights400/500/600/700
10px → 72px (10 sizes)2xs → 5xl
Single letter-spacing token--letter-spacing-tight−0.5px
Instant (100ms) · ×18--duration-instant0.1s
Fast (200ms) · ×19 (most used)--duration-fast0.2s
Normal (300ms) · ×6--duration-normal0.3s
Slow (400ms) · ×1--duration-slow0.4s
Slower (500ms) · ×2--duration-slower0.5s
Full second (1s) · ×14 hero/video--duration-duration-61s
Linear · ×12 (dominant easing)--easing-linearlinear
Ease In-Out · ×1--easing-ease-in-outease-in-out
Nav overlay (only token)--opacity-850.85 · ×1
Base Layer--z-11
Raised--z-22
Navigation--z-310
Dropdown--z-4100
Overlay / Mobile Menu--z-5999
Cart / Dialog--z-61000
8px (×126 — most used)--space-58px
84px — max--space-12884px
sm (near-flat)--radius-sm2px
xl (CTA pill)--radius-xl24px
Hairline / Thin / Base / Thickborder widths0.5/1/1.5/6px
Design System Preview · Nike (Dark) · Generated 17/04/2026 · 11 color tokens · 8 font-family · 4 font-weight · 10 font-size · 11 line-height · 1 letter-spacing · 19 spacing · 6 radius · 4 border-width · 0 shadow · 6 duration · 2 easing · 6 z-index · 5 breakpoints · 1 opacity