Nike Brand Design System Deep Dive

1. Brand Overview

Nike’s design language is a masterclass in confidence and restraint. The official site for the Singapore market (nike.com/sg) is stripped down to the essentials—black, white, and a handful of purposeful accents—paired with typography that shouts when it needs to and disappears when it doesn’t. The vibe is bold but not loud. It’s about performance, clarity, and keeping the focus on product storytelling.

What’s immediately clear: Nike doesn’t waste pixels. Every element has a job. There’s no ornamental fluff, no gratuitous gradients (except in brand orange), no random shapes. The color palette is lean but rich when you dig into the design tokens—tons of blues, greens, and teals exist for utility states, but only a few make it to the surface in day-to-day UI. The primary black (#111111) and crisp white (#ffffff) dominate, with grey tiers for structure and subtle emphasis.

Typography is unapologetic. Massive headings in Nike Futura ND at 96px, ultra-tight line height (0.90), fully uppercase. This is the “Just Do It” energy translated into type: no softness, no compromise. Below that, Helvetica Now variants and Neue Frutiger Arabic cover the range from headings to captions, always precise, always balanced.

The site’s interaction design is in the “functional minimalism” camp. Buttons are pill-shaped (30px radius), often monochrome with subtle hover/focus states. Links are either underlined or bare, depending on context. Forms are clean—search inputs with 24px radius, no borders until focus.

Nike’s audience here is broad—athletes, sneaker enthusiasts, casual shoppers—but the design system doesn’t dilute itself to please everyone. It’s confident enough to keep the brand voice intact across devices. The breakpoints show a careful scale-up from mobile to large desktop, with key steps at 600px, 960px, 1024px, and 1440px.

In short: Nike’s design system is about control. Control over color, over type hierarchy, over space. It’s designed for speed—both in how users navigate and in how the brand can adapt the system to new campaigns without breaking the core visual language. I love this discipline. It’s the kind of minimalism that’s earned, not faked.

2. Color System

2.1 Primary Colors

Primary is rgb(17, 17, 17) / #111111. Nearly black, but not pure—this softens the contrast slightly, making it easier on the eyes while maintaining Nike’s power aesthetic. This is the color of their wordmark, primary text, and key UI elements.

Secondary, interestingly, is transparent (rgba(0, 0, 0, 0)), used for button backgrounds and link states where visuals rely purely on text.

Competitor comparison: Adidas leans into pure black and white with blue accents; Nike’s near-black feels warmer, less stark. It’s more wearable, less techy.

2.2 Complete Palette

Nike’s design tokens reveal a massive functional palette—most of which you’ll never see unless you’re deep in their UI states.

…and dozens more in the token list, mostly functional.

2.3 Color Relationships

Primary black on white hits AAA contrast for WCAG. White on black also passes easily. Grey tones are used carefully—#cacacb for borders is low contrast, intentionally so, to avoid drawing attention.

Dark mode is essentially “invert background to black, text to white.” Since the palette already leans black/white, adaptation is straightforward.

2.4 Usage Guide

Works well:

• Black (#111111) + White (#ffffff) for core UI.
• Brand orange for short bursts in hero sections.
• Grey tiers for structure—don’t mix too many.

Avoid:

• Mixing more than one bright accent per screen. Pink + orange? Too loud.
• Using low-contrast grey for text—stick to high contrast for legibility.

3. Typography

3.1 Font Families

• Nike Futura ND — Custom, uppercase headlines.
• Helvetica Now Display Medium — Secondary headings.
• Helvetica Now Text / Medium — Body, buttons, links.
• Neue Frutiger Arabic — Arabic language support.
• Helvetica Neue — Legacy captions.
• Arial — Fallback for system environments.

Sources: No Google Fonts, no Adobe Fonts—custom and system stacks only.

3.2 Type Scale

…and so on, down to 9px captions.

3.3 Hierarchy

Nike’s hierarchy is aggressive: giant uppercase headlines, then a sharp drop to 32px or 24px, then into functional 16px/14px body sizes. Tight line heights keep blocks compact—this works for product grids where space is premium. Readability is fine because contrast is high and fonts are clean.

4. Spacing & Layout

4.1 Spacing Scale

Scale type: 8px grid.

Values:

Frequent small increments (6px, 8px, 12px) for micro-layouts. Larger jumps (36px, 84px) for macro spacing.

4.2 Layout

Breakpoints:
0px, 320px, 599px, 600px, 639px, 640px, 959px, 960px, 961px, 1023px, 1024px, 1200px, 1440px, 1920px.

Responsive approach:
Mobile-first, scaling up at ~600px and ~960px for tablet and small desktop layouts. Large desktops at 1440px+ get expanded grids.

5. Visual Elements

Border Radius

Pill buttons (30px) dominate CTAs. Inputs use 24px—slightly less rounded.

Shadows

Few shadows. Mostly flat design.
One inset: rgb(229, 229, 229) 0px -1px 0px inset.
One subtle drop: rgba(17, 17, 17, 0.06) 0px 4px 8px.

Borders

Thin 1px borders (#cacacb) for links and elements. Rare, low-contrast.

6. Components

6.1 Buttons

Icon-only Search Button

Default:

• bg: #f5f5f5
• color: #111111
• padding: 6px
• radius: 30px
  Hover:
• color: var(--podium-cds-color-text-hover)
• bg: var(--podium-cds-color-grey-500)
  Focus:
• box-shadow: 0 0 0 2px var(--podium-cds-color-box-focus-ring)

Inline Flex Button (White)

Default:

• bg: #ffffff
• color: #111111
• padding: 6px 16px
• radius: 30px
  Hover:
• color: var(--podium-cds-color-text-secondary)
• bg: var(--podium-cds-color-grey-300)

Inline Flex Button (Black)

Same as above but bg: #111111, text: #ffffff.

6.2 Links

Two variants:
Black text, underline on default; white text, no underline. Hover changes color.

6.3 Forms

Search input:

• bg: #f5f5f5
• radius: 24px
• padding: 7px 0px 9px 2px
  Focus: bg: var(--podium-cds-color-bg-hover)

7. Design Tokens

:root {
  /* Colors */
  --color-primary-black: #111111;
  --color-secondary-transparent: transparent;
  --color-grey-900: #1F1F21;
  --color-grey-400: #9E9EA0;
  --color-grey-cacacb: #cacacb;
  --color-white: #ffffff;
  --color-blue-500: #1151FF;
  --color-blue-600: #0034E3;
  --color-brand-orange: #FF5000;
  --color-gradient-brand-orange: linear-gradient(113.7deg, #FF0015 3.64%, #fe5000 50.92%, #FF6A00 97.26%);
  /* Typography */
  --font-nike-futura-nd: "Nike Futura ND", "Helvetica Now Text Medium", Helvetica, Arial;
  --font-helvetica-now-display: "Helvetica Now Display Medium", Helvetica, Arial;
  --font-helvetica-now-text: "Helvetica Now Text", Helvetica, Arial;
  --font-neue-frutiger-arabic: "Neue Frutiger Arabic";
  --font-arial: Arial;
  /* Spacing */
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-30: 30px;
  --spacing-36: 36px;
  --spacing-84: 84px;
  /* Radius */
  --radius-0: 0px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-18: 18px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-30: 30px;
  --radius-full: 50%;
  /* Shadows */
  --shadow-inset-grey: rgb(229, 229, 229) 0px -1px 0px inset;
}

8. AI Coding Assistant Prompt

# Nike Design System Specification

You are a Nike design expert. Build UIs matching their visual language exactly.

## Brand Context
Nike values bold minimalism, precision spacing, and confident typography. The system is built on a near-black primary, pill-shaped buttons, and headline-first hierarchy.

## Color Palette
- Primary Black: #111111 — Brand text, primary buttons
- Secondary Transparent: transparent — Backgrounds without fill
- Grey 900: #1F1F21 — Text, dark surfaces
- Grey CACACB: #cacacb — Borders, secondary UI
- White: #ffffff — Background, text on dark
- Brand Orange: #FF5000 — Campaign highlights
- Gradient Brand Orange: linear-gradient(...) — Hero banners
- Blue 500: #1151FF — Links, focus outlines
- Blue 600: #0034E3 — Secondary CTAs
- Red 600: #D30005 — Error states
- Green 900: #003C2A — Success states
- Yellow 200: #FEDF35 — Warnings

## Typography
Fonts:
- Headings: "Nike Futura ND", Helvetica Now Text Medium, Helvetica, Arial
- Secondary: "Helvetica Now Display Medium", Helvetica, Arial
- Body: "Helvetica Now Text", Helvetica, Arial
- Arabic: "Neue Frutiger Arabic"

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 96px | 500 | 0.90 | Page titles |
| H2 | 32px | 500 | 1.20 | Section titles |
| Body | 16px | 400/500 | 1.50 | Paragraphs |
| Caption | 12px | 400/500 | 1.50 | Labels |

## Spacing & Grid
Base: 8px grid.  
Scale: 6px, 8px, 12px, 30px, 36px, 84px.  
Use 6–12px for tight UI padding, 30–36px for section gaps, 84px for hero spacing.

## Border Radius
- none: 0 — tables
- sm: 4px — small buttons
- md: 18px–24px — links, inputs
- lg: 30px — pill buttons
- full: 50% — avatars

## Shadows & Depth
Flat design. Rare inset shadows for separators.

## Components

### Primary Button
Default:
```css
background: #111111;
color: #ffffff;
padding: 6px 16px;
border-radius: 30px;
font-weight: 500;
font-size: 16px;
border: none;

Hover: background: var(--podium-cds-color-grey-300); color: var(--podium-cds-color-text-secondary)
Focus: outline: 2px solid var(--podium-cds-color-box-focus-ring)

Secondary Button

bg: #ffffff; color: #111111; same radius and padding.

Navigation Links

Black text with underline; hover changes color via var(--podium-cds-color-text-hover).

Input Fields

bg: #f5f5f5; radius: 24px; padding: 7px 0px 9px 2px; no border until focus.

Layout & Responsive Rules

Breakpoints: 600px, 960px, 1024px, 1440px. Mobile-first scaling.

Interaction Rules

• Transition: 150ms ease for hover/focus changes
• Focus indicators: 2px solid focus ring color
• Disabled: 50% opacity

DO List

• Use only palette colors
• Maintain 8px grid multiples
• Keep headings uppercase
• Use pill buttons for CTAs
• Use high contrast for text

DON'T List

• Don’t add drop shadows
• Don’t mix corner styles
• Don’t invent new accent colors
• Don’t reduce headline size below spec
• Don’t use low-contrast text for body

Code Examples

Primary Button:

.btn-primary {
  background: #111111;
  color: #ffffff;
  padding: 6px 16px;
  border-radius: 30px;
  font-weight: 500;
  font-size: 16px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: var(--podium-cds-color-grey-300); }
.btn-primary:focus { outline: 2px solid var(--podium-cds-color-box-focus-ring); }
.btn-primary:disabled { opacity: 0.5; }

Card:

.card {
  background: #ffffff;
  border-radius: 8px;
  padding: 36px;
  border: 1px solid #cacacb;
}

Input:

.input {
  background: #f5f5f5;
  border-radius: 24px;
  padding: 7px 0 9px 2px;
  border: none;
}
.input:focus {
  background: var(--podium-cds-color-bg-hover);
  outline: none;
}

---

## 9. Summary

**TL;DR** — Nike’s design system is bold minimalism: near-black, crisp white, pill buttons, uppercase headlines. It’s an 8px grid with disciplined color use and typography that commands space.

**Brand Keywords**:  
- bold-minimalist  
- grid-disciplined  
- headline-driven  
- athlete-focused  
- controlled-contrast