Design System Inspired by Nike

A complete design token catalog extracted from Nike.com — Podium CDS typography, color palette, and component patterns.

Color Palette

Nike's monochromatic foundation — the UI disappears into black, white, and grey so product photography provides all color.

Primary

Nike Black
#111111
Primary text, buttons, nav
Nike White
#FFFFFF
Page canvas, button text

Surface & Background

Snow
#FAFAFA
Grey-50, lightest surface
Light Gray
#F5F5F5
Grey-100, input bg, placeholders
Hover Gray
#E5E5E5
Grey-200, hover states
Dark Surface
#28282A
Grey-800, dark sections
Deep Charcoal
#1F1F21
Grey-900, inverse primary bg

Neutrals & Text

Primary Text
#111111
Headings, body, nav
Secondary Text
#707072
Descriptions, metadata
Disabled Text
#9E9EA0
Inactive elements
Border Secondary
#CACACB
Input borders, dividers

Semantic & Accent

Nike Red
#D30005
Critical, errors, sale
Orange Flash
#FF5000
Promotional accent
Success Inverse
#1EAA52
Success on dark
Info Inverse
#1190FF
Links on dark
Warning Yellow
#FEDF35
Warning banners

Extended Spectrum (50 → 900)

Red Ramp
#FFE5E5 → #530300
Orange Ramp
#FFE2D6 → #3E1009
Yellow Ramp
#FEF087 → #99470A
Green Ramp
#DFFFB9 → #003C2A
Teal Ramp
#D4FFFB → #043441
Blue Ramp
#D6EEFF → #020664
Purple Ramp
#E4E1FC → #1C0060
Pink Ramp
#FFE1F3 → #4C012D

Typography Scale

Nike Futura ND for display impact, Helvetica Now for precision body text. Oswald and Inter serve as web substitutes.

Display — 96px / 500 / 0.90 / Uppercase
JUST DO IT
Heading 1 — 32px / 600 / 1.20
Section Title Heading
Heading 2 — 24px / 600 / 1.20
Subsection Heading
Heading 3 — 16px / 500 / 1.50
Card Title
Body — 16px / 400 / 1.75
The quick brown fox jumps over the lazy dog. Nike's body text uses Helvetica Now Text at weight 400 with generous 1.75 line-height for comfortable product browsing.
Link — 16px / 500 / 1.75
Shop All Running Shoes
Button — 16px / 500 / 1.50
Add to Cart
Caption — 14px / 500 / 1.50
$129.99 — Available in 8 colors
Small — 12px / 500 / 1.50
Free shipping on orders over $50

Button Variants

Pill-shaped (30px radius) buttons with aggressive simplicity — only primary, secondary, and disabled states.

On Dark Background
On Light Background

Cards & Containers

Shadow-free, border-minimal cards — product images fill edge-to-edge with no radius. UI containers use 20px radius.

Product Cards (no radius, no shadow)
Product Image
Nike Air Max 90
Men's Shoes
$130
Product Image
Nike Dunk Low Retro
Men's Shoes
$115
Product Image
Nike Pegasus 41
Women's Road Running
$140
Category Cards (full-bleed, text overlay)
Running
Basketball
Training
UI Containers (20px radius, subtle border)

Shipping Info

Free standard shipping on orders $50+. Members get free shipping on all orders.

Size Guide

Not sure of your size? Use our fit guide to find the perfect match.

Returns

Free returns within 60 days of purchase. Nike Members get extended returns.

Form Elements

Inputs use dark surface fill with subtle borders. 8px radius for forms, 24px for search.

Please enter a valid email address

Spacing Scale

4px base unit, scaling through 8px multiples for athletic grid precision.

4
8
12
16
20
24
32
48
64
80

Border Radius Scale

From sharp-edge photography to fully rounded pill buttons — radius communicates element type.

0px
Images
8px
Inputs
18px
Small elements
20px
Containers
24px
Search, pills
30px
Buttons
50%
Circles

Depth & Elevation

Radically flat — no card shadows, no hover lifts. Depth through color shifts only.

Flat
No shadow — default for everything
Divider
1px inset line between sections
Focus
2px keyboard focus ring
Overlay
Dark scrim over photography