---
version: alpha
name: nike.com
description: "Light product system built on #ffffff with #111111 as the primary CTA accent. Type anchored in Nike Futura ND at 76px / weight 500. Extracted automatically from https://nike.com/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
nike.com is built on a pure-white canvas (rgb(255, 255, 255)).
The system uses rgb(17, 17, 17) as the singular interactive color.
Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Nike Futura ND as the primary typeface.
Nike Futura ND is paired with Helvetica Now Text Medium for secondary roles.
A restrained elevation system (2 distinct shadows) — shadows reserved for the few elements that must lift off the page.
Motion is a first-class concern — 41 keyframe animations plus transition-driven interactions.
colors:
background: "#ffffff"
surface-1: "rgba(255, 255, 255, 0.7)"
surface-2: "#f5f5f5"
ink: "#111111"
ink-muted: "rgba(17, 17, 17, 0.65)"
ink-subtle: "#9e9ea0"
primary: "#111111"
on-primary: "#ffffff"
primary-hover: "#e5e5e5"
hairline: "rgba(17, 17, 17, 0.36)"
semantic-success: "#007d48"
semantic-warning: "#feea55"
semantic-info: "#1151ff"
typography:
display-xl:
fontFamily: "Nike Futura ND, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
fontSize: 76px
fontWeight: 500
lineHeight: 1.25
letterSpacing: 0
display-md:
fontFamily: "Helvetica Now Text Medium, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
fontSize: 16px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0
headline:
fontFamily: "Helvetica Now Text, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
fontSize: 16px
fontWeight: 500
lineHeight: 1.75
letterSpacing: 0
body:
fontFamily: "Helvetica Now Text, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
fontSize: 14px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0
body-sm:
fontFamily: "Helvetica Now Text, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
fontSize: 14px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0
caption:
fontFamily: "Helvetica Neue, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
fontSize: 16px
fontWeight: 400
lineHeight: 1
letterSpacing: 0
rounded:
none: 0px
xs: 4.2px
sm: 8px
md: 24px
lg: 30px
xl: 32px
pill: 9999px
spacing:
xxs: 2px
xs: 4px
sm: 7px
md: 12px
lg: 20px
xl: 28px
xxl: 60px
components:
button-pill:
backgroundColor: "transparent"
textColor: "{colors.hairline}"
typography: "{typography.display-md}"
rounded: "{rounded.lg}"
padding: 12px 24px
button-pill-2:
backgroundColor: "#707072"
textColor: "{colors.on-primary}"
typography: "{typography.display-md}"
rounded: "{rounded.lg}"
padding: 12px 24px
button-icon-button:
backgroundColor: "{colors.surface-2}"
textColor: "{colors.hairline}"
typography: "{typography.display-md}"
rounded: "{rounded.lg}"
padding: 6px
input-text-input:
backgroundColor: "{colors.surface-2}"
textColor: "{colors.hairline}"
typography: "{typography.display-md}"
rounded: "{rounded.md}"
padding: 7px 0px 9px 2px
extracted_at: "2026-06-11T05:01:48.791Z"
completeness: 67
scoreVersion: "v2"
---
# Design System — nike.com
> Extracted automatically by Prism from https://nike.com
> Date: 2026-06-11
> Viewport: Desktop 1440x900 + Mobile 390x844
> Values are extracted, not hand-written: rendered styles via getComputedStyle() + colors declared in CSS custom properties (token-only values are marked `(token)` and may not be painted).
## 0. Design DNA
**Density**: moderate | **Motion**: expressive | **Weight**: medium | **Aesthetic**: soft-rounded
| Dimension | Value | Signal |
|---|---|---|
| Canvas | neutral | `#ffffff` |
| Type posture | sans-led (Helvetica Now Text) | "CHOISIS TA TEAM" |
| Color assertion | dual-accent | #111111 |
| Whitespace | moderate | section rhythm 48px |
| Interaction | expressive | 41 keyframes, 8 transitions |
| Radius language | soft-pill | from token scale |
**Prism fingerprint**: `neutral-canvas · sans-display · dual-accent · soft-pill · expressive-motion`
> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `rgb(255, 255, 255)` is the page background. Every component composits against this.
> - **Accent**: `rgb(17, 17, 17)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 48px between major bands. Card padding: 20px.
> - **Default radius**: 8px on buttons/inputs. Pills (`9999px`) only for icon-buttons or status chips.
>
> **Before generating UI**: import this DESIGN.md, scan §2 (Color Palette) + §4 (Components) + §10 (Agent Guide). Skip §11–12 unless extending.
## 1. Visual Theme & Atmosphere
**Signature:** a multi-stop brand gradient (a hero mesh/ribbon — usually an SVG or image, not a CSS background) — colours: #FF0015, #fe5000, #FF6A00. This is the brand's most recognizable visual — reproduce it, don't replace it with a generic card or flat panel.
nike.com uses a pure-white canvas (`#ffffff`), letting typography, color and imagery carry the visual weight.
Headlines are set in **Nike Futura ND**, a sans-serif display face (the dominant type signature, e.g. "CHOISIS TA TEAM" at 76px). A second display voice — **Helvetica Now Display Medium** (sans) — appears in lower bands (e.g. "Nos modèles iconiques"), used for editorial accent. Body text is set in **Helvetica Now Text**.
Body text reads in Near-Black (`#111111`) — softened from pure black, a small but deliberate detail that lowers reading friction. **Near-Black** (`#111111`) provides interactive distinction without visual aggression. Elevation comes from a small, deliberate set of shadows (2 distinct), each a multi-layer stack — several blurred layers at varying offsets — used sparingly rather than across the whole UI.
Motion design uses smooth easing curves for polished state transitions.
**Key Characteristics:**
- Background: Pure White (`#ffffff`)
- Primary typeface: Nike TG
- Primary text: Near-Black (`#111111`)
- Accent: Near-Black (`#111111`)
- Display: 24px weight 500
- Shadow system: 2 distinct elevation levels
- Custom fonts loaded: Nike TG, Nike Futura ND, Nike Futura, Helvetica Now Text, Helvetica Now Text Medium, Helvetica Now Display Medium, Palatino LT Pro Light, VideoJS, Helvetica Now Display Bold, Helvetica Now Display XBold
## 2. Color Palette & Roles
### Background & Surface
- **Pure White** (`#ffffff`): Page background (primary)
- **Whitesmoke** (`#e5e5e5`): Surface / elevated background
- **Off-White** (`#f5f5f5`): Surface / elevated background
- **Off-White** (`#efefef`): Surface / elevated background
### Text & Content
- **Near-Black** (`#111111`): Primary body text
- **Pure Black** (`#000000`): Secondary text
- **Translucent Charcoal (70%)** (`rgba(43, 51, 63, 0.7)`): Secondary text
### Border & Divider
- **Light Grey** (`#cacacb`): Borders / dividers
### Full Extracted Palette
**14 colors rendered on the page** + **89** more declared in design tokens (CSS custom properties — not necessarily painted). (8 categorized above + 95 additional below.)
Rendered values are read via `getComputedStyle()`; token values come from CSS variable declarations. Third-party logo colors are filtered out.
- `#707072` — Slate Grey
- `#757575` — Slate Grey
- `#9e9ea0` — Grey
- `#888888` — Slate Grey
- `#b2b2b2` — Grey
- `#767676` — Slate Grey
- `#39393b` — Charcoal *(token)*
- `#1151ff` — #1151ff *(token)*
- `#ed1aa0` — #ed1aa0 *(token)*
- `#007d48` — #007d48 *(token)*
- `#1eaa52` — Success Green *(token)*
- `#beaffd` — Lavender *(token)*
- `#0034e3` — #0034e3 *(token)*
- `#1f1f21` — Near-Black *(token)*
- `#d6d1ff` — #d6d1ff *(token)*
- `#d30005` — #d30005 *(token)*
- `#0a7281` — #0a7281 *(token)*
- `#ffb0dd` — Pink *(token)*
- `#780700` — #780700 *(token)*
- `#4c012d` — #4c012d *(token)*
- `#4b4b4d` — Charcoal *(token)*
- `#87ceff` — Baby Blue *(token)*
- `#fdc400` — Amber *(token)*
- `#d6eeff` — Light Gray *(token)*
- `#770349` — #770349 *(token)*
- `#ffe5e5` — Soft Pink *(token)*
- `#1190ff` — Sky Bright *(token)*
- `#ffc5ad` — Pink *(token)*
- `#00643e` — #00643e *(token)*
- `#ffd11b` — Gold *(token)*
- `#061dbb` — #061dbb *(token)*
- `#99470a` — Chocolate *(token)*
- *…+63 more in `raw-css.json` (`desktop.allColors`).*
### Gradients & Decorative Fills
- `linear-gradient(113.7deg, #FF0015 3.64%, #fe5000 50.92%, #FF6A00 97.26%)` — (--podium-cds-color-gradient-brand-orange)
### CSS Custom Properties (Design Tokens)
**Spacing Token**
- `--podium-cds-size-spacing-xxl`: `60px`
- `--pds-space-20`: `20px`
- `--pds-space-60`: `60px`
- `--podium-cds-size-spacing-l`: `24px`
**Background**
- `--podium-cds-button-color-bg-primary-on-dark`: `#FFFFFF`
- `--podium-cds-icon-button-color-bg-primary`: `#111111`
- `--podium-cds-color-bg-disabled`: `#E5E5E5`
- `--pds-color-background-overlay`: `#FFFFFF`
**Text Color**
- `--podium-cds-color-text-success`: `#007D48`
- `--pds-color-text-secondary-inverse`: `#9E9EA0`
- `--pds-color-text-accent`: `#111111`
- `--podium-cds-color-text-hover-on-dark`: `#E5E5E5`
**Success**
- `--podium-cds-color-success-inverse`: `#1EAA52`
- `--podium-cds-color-green-700`: `#00643E`
- `--podium-cds-color-green-600`: `#007D48`
- `--pds-color-green-800`: `#005034`
**Border**
- `--pds-color-border-tertiary`: `#E5E5E5`
- `--podium-cds-button-color-border-secondary-disabled-on-dark`: `#4B4B4D`
- `--pds-color-border-disabled`: `#CACACB`
- `--pds-color-border-primary-always-dark`: `#707072`
**Border Radius Token**
- `--pds-radius-12`: `12px`
- `--podium-cds-button-border-radius`: `30px`
- `--pds-radius-0`: `0px`
- `--podium-cds-size-border-radius-m`: `8px`
**Error / Destructive**
- `--podium-cds-color-red-600`: `#D30005`
- `--podium-cds-color-red-800`: `#780700`
- `--pds-color-red-50`: `#FFE5E5`
- `--pds-color-red-900`: `#530300`
**Shadow Token**
- `--podium-cds-button-box-shadow-width`: `0`
- `--podium-cds-color-focus-shadow`: `rgba(17, 17, 17, 0.12)`
- `--pds-shadow-primary`: `0px 0px 24px 4px rgba(17, 17, 17, 0.03), 0px 4px 8px 0px rgba(17, 17, 17, 0.06)`
- `--podium-cds-shadow-100-inverse`: `0px 4px 8px 0px rgba(17, 17, 17, 0.18),0px 0px 24px 4px rgba(17, 17, 17, 0.09)`
**Warning**
- `--pds-color-yellow-400`: `#FDC400`
- `--podium-cds-color-yellow-300`: `#FFD11B`
- `--pds-color-yellow-900`: `#99470A`
- `--podium-cds-color-yellow-400`: `#FDC400`
**Motion Token**
- `--podium-cds-motion-duration-400`: `400ms`
- `--pds-motion-delay-100`: `100ms`
- `--podium-cds-motion-duration-300`: `300ms`
**Primary Brand Color**
- `--podium-cds-color-brand-nike-orange`: `#FF5000`
- `--podium-cds-color-brand-snkrs-red`: `#EE0005`
**Font Weight Token**
- `--podium-cds-font-weight-bold`: `700`
- `--podium-cds-font-weight-medium`: `500`
- `--podium-cds-font-weight-regular`: `400`
**Font Size Token**
- `--podium-cds-font-size-xxs`: `12px`
- `--podium-cds-font-size-xxxl`: `40px`
- `--podium-cds-font-size-xs`: `14px`
- `--podium-cds-font-size-m`: `20px`
**Other tokens**
- `--pds-color-gray-700`: `#39393B`
- `--podium-cds-color-blue-500`: `#1151FF`
- `--podium-cds-color-pink-500`: `#ED1AA0`
- `--pds-color-purple-200`: `#BEAFFD`
- `--podium-cds-color-blue-600`: `#0034E3`
- `--podium-cds-color-grey-900`: `#1F1F21`
- `--podium-cds-color-scrim-primary-inverse`: `rgba(17,17,17,0.80)`
- `--podium-cds-color-scrim-100`: `rgba(17,17,17,0.36)`
## 3. Typography Rules
### Font Families
- **Primary**: `Helvetica Now Text`
- **Secondary**: `Helvetica Now Display Medium`
- **Font 3**: `nike-glyphs`
- **Font 4**: `Nike TG`
- **Font 5**: `Nike Futura ND`
### Custom Fonts Loaded
- **nike-glyphs** weight normal (normal)
- **Nike TG** weight 400 (normal)
- **Nike Futura ND** weight 400 (normal)
- **Nike Futura** weight 400 (normal)
- **Helvetica Now Text** weight 400 (normal)
- **Helvetica Now Text Medium** weight 400 (normal)
- **Helvetica Now Display Medium** weight 400 (normal)
- **Palatino LT Pro Light** weight 400 (normal)
- **VideoJS** weight normal (normal)
- **Helvetica Now Text** weight normal (normal)
- **Helvetica Now Text Medium** weight normal (normal)
- **Helvetica Now Display Bold** weight normal (normal)
- **Helvetica Now Display XBold** weight normal (normal)
- **Nike Futura ND** weight normal (normal)
- **Palatino LT Pro Light** weight normal (normal)
### Typography Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Nike Futura ND | 76px | 500 | 1.25 | normal | Main headline (h2) |
| Sub-heading | Helvetica Now Text Medium | 16px | 500 | 1.5 | normal | Third-level heading (h3) |
| Label Heading | Helvetica Now Text | 16px | 500 | 1.75 | normal | Small heading (H4) |
| Card Title | Helvetica Now Text | 16px | 400 | 1.75 | normal | Card headings |
| Caption / Badge | Helvetica Neue | 16px | 400 | 1 | normal | small text (16px) |
| Link | Helvetica Now Text | 14px | 400 | 1.5 | normal | Link (14px) — Decoration: underline |
| Link | Helvetica Now Text Medium | 14px | 500 | 1.86 | normal | Link (14px) — Decoration: none |
### Font Weight Scale
CSS custom properties define 3 explicit weight steps:
- `--podium-cds-font-weight-regular`: `400` — Regular
- `--podium-cds-font-weight-medium`: `500` — Medium
- `--podium-cds-font-weight-bold`: `700` — Bold
### Full Font Size Scale
Sizes detected in the design (descending): `76px`, `24px`, `20px`, `19.20px`, `16px`, `14px`, `13.33px`, `12px`, `9px`
> 6 size(s) detected outside the sampled hierarchy (24px, 20px, 19.2px, 13.3333px, 12px, 9px). These appear on elements not in the sampled set — likely additional display sizes, marketing-section overrides, or third-party-widget styles.
## 4. Component Stylings
### Buttons
**Pill**
- Background: `transparent`
- Text: `#111111` `{colors.hairline}`
- Padding: 12px 24px
- Radius: 30px
- Font: 16px weight 500
- Use: Status pills, tags, chips
- Hover: color: `#707072`, border: `0px none rgb(112, 112, 114)`, borderColor: `#707072`
**Pill**
- Background: `#707072`
- Text: `#ffffff` `{colors.on-primary}`
- Padding: 12px 24px
- Radius: 30px
- Shadow: `rgb(17, 81, 255) 0px 0px 0px 2px`
- Font: 16px weight 500
- Use: Status pills, tags, chips
- Hover: color: `#707072`, border: `0px none rgb(112, 112, 114)`, borderColor: `#707072`
**Icon Button**
- Background: `#f5f5f5` `{colors.surface-2}`
- Text: `#111111` `{colors.hairline}`
- Padding: 6px
- Radius: 30px
- Font: 16px weight 500
- Use: Toolbar/UI icons
- Hover: color: `#707072`, border: `0px none rgb(112, 112, 114)`, borderColor: `#707072`
**Icon Button**
- Background: `#f5f5f5` `{colors.surface-2}`
- Text: `#111111` `{colors.hairline}`
- Padding: 6px
- Radius: 30px
- Font: 16px weight 500
- Use: Toolbar/UI icons
- Hover: color: `#707072`, border: `0px none rgb(112, 112, 114)`, borderColor: `#707072`
**Light / Invert**
- Background: `#ffffff` `{colors.on-primary}`
- Text: `#111111` `{colors.hairline}`
- Padding: 0px 10px
- Radius: 0px
- Font: 14px weight 500
- Use: Bright CTA on dark sections
- Hover: color: `#707072`, border: `0px none rgb(112, 112, 114)`, borderColor: `#707072`
### Inputs & Forms
**Text Input**
- Background: `#f5f5f5` `{colors.surface-2}`
- Text: `#111111` `{colors.hairline}`
- Padding: 7px 0px 9px 2px
- Radius: 24px
- Border: 0px none rgb(17, 17, 17)
- Font: 16px weight 500
- Use: Text fields, search inputs
## 4b. Component Behaviors (State Matrix)
### Interaction State Narrative
- **Button**:
- **hover:** text #111111 → #707072, border changes
*State transitions extracted via Playwright simulation — exact values in the YAML matrix below.*
```yaml
component-behaviors:
button:
default:
bg: "rgba(0, 0, 0, 0)"
fg: "rgb(17, 17, 17)"
hover:
bg: "transparent"
fg: "rgb(112, 112, 114)"
input:
default:
bg: "rgb(245, 245, 245)"
fg: "rgb(17, 17, 17)"
link:
default:
bg: "rgba(0, 0, 0, 0)"
fg: "rgb(17, 17, 17)"
card:
default:
bg: "rgba(0, 0, 0, 0)"
fg: "rgb(17, 17, 17)"
navLink:
default:
bg: "rgb(255, 255, 255)"
fg: "rgb(17, 17, 17)"
badge:
default:
bg: "rgba(0, 0, 0, 0)"
fg: "rgb(255, 255, 255)"
footerLink:
default:
bg: "rgba(0, 0, 0, 0)"
fg: "rgb(17, 17, 17)"
```
**Agent usage**: Validate generated components against this matrix. If your output's `:hover` state changes properties not listed here, you are off-brand.
## 4c. Component Vocabulary (Closed System)
*This brand uses ONLY the following component vocabulary. Introducing new variants without justification breaks the system's tonal coherence.*
### Buttons
- **3 shape(s)** in this system: `Pill`, `Icon Button`, `Light / Invert`
- **DO NOT introduce new buttons variants** without justification
### Inputs & Forms
- **1 shape(s)** in this system: `Text Input`
- **DO NOT introduce new inputs & forms variants** without justification
## 5. Layout Principles
### Layout Type
**top-nav + content**
### Grid
Single column, centered content
### Max Width
1920px
### Spacing System
Compact spacing — information density prioritized
| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 4px |
| sm | 7px |
| md | 12px |
| base | 16px |
| lg | 20px |
| xl | 28px |
| 2xl | 48px |
| 3xl | 60px |
### Border Radius Scale
| Name | Value | Use |
|------|-------|-----|
| None | 0px | No rounding |
| Xs | 4.2px | Tiny corners (badges, micro elements) |
| Sm | 8px | Buttons, inputs, small elements |
| Md | 24px | Cards, containers |
| Lg | 30px | Large rounded elements, pill segments |
| Xl | 32px | Category strips, featured containers |
| Full | 9999px | Pills, avatars, circular elements |
### Shape Language
| Component | Border Radius |
|-----------|---------------|
| Buttons | `30px` |
| Inputs & Forms | `24px` |
| Page Body | `0px` |
| Navigation | `0px` |
| Primary Input | `24px` |
**Shape Personality**: Generously Rounded — Soft, friendly corners (8px+). Approachable, consumer-facing feel.
**Full Radius Spectrum**: 0px, 2px, 4.2px, 4.8px, 8px, 24px, 30px (from `allBorderRadii` scan)
## 5b. Spacing Rhythm Names
**Measured section padding**: bands use ~48px internal vertical padding (up to 48px) — **standard**. (Distinct from the gap *between* sections above.) Reproduce this generous vertical breathing room; cramped spacing is the #1 tell of a cheap clone.
*Named spacing tokens with explicit use cases. Use these names in YOUR code instead of raw pixels for consistency.*
| Name | Value | Use case |
|------|-------|----------|
| **hero** | `60px` | Top/bottom of full-bleed hero sections |
| **section** | `28px` | Between major bands (color change, content shift) |
| **subsection** | `20px` | Within a section, between content groups |
| **card** | `12px` | Card padding, list-item spacing |
| **compact** | `7px` | Form fields, tight clusters, badge padding |
| **micro** | `4px` | Icon-text gap, tag inner padding |
**Agent rule**: NEVER hardcode raw pixel values for spacing in generated UI. Always reference these named tokens (`spacing-rhythm.section`, etc.).
## 5c. Widget & Structure Library
Structural patterns extracted from the page DOM — these are the **blueprints** an agent should follow to reproduce the page architecture (not just CSS values).
**4/8 structural patterns detected.**
### Hero Pattern
- **Composition:** left-aligned —
- **Viewport coverage:** 64px tall (not full-viewport)
- **Heading:** "Erreur" — 24px left-aligned
- **CTAs:** none detected in hero (unusual — agent should verify)
- **Clone instruction:** Reproduce the **left-aligned** layout. Use the heading font-size token at the documented size. Pair the centered text with the hero’s decorative visual (gradient / SVG / hero image — see §9b), not bare text.
### Navigation Pattern
- **Position:** fixed (stays visible during scroll)
- **Layout:** unknown — Layout not classified
- **Height:** 96px
- **Logo:** ✓ present
- **Nav links:** 214 primary items
- **CTAs in nav:** 1
- **Search:** ✓ search input visible in nav
- **Clone instruction:** Build a fixed unknown navigation. Reserve 1 slot for primary CTA.
### Card Grid Pattern
- **Card count:** 4 cards detected
- **Columns (desktop):** 1-up grid
- **Card dimensions:** 1440×700px (aspect 2.06:1)
- **Gap:** 0px between cards
- **Content:** ✓ image + CTA
- **Image position:** top
- **Clone instruction:** Build a 1-column grid (desktop) with cards at ~2.06:1 aspect ratio. Each card has an image at the top.
### Footer Pattern
- **Columns:** 1
- **Links:** 44 total
- **Height:** 677px
- **Includes:** ✗ no newsletter | ✗ no social | ✓ copyright
- **Clone instruction:** Build a 1-column footer with ~44 links per column, and a copyright line.
## 6. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |
| Layered (Level 1) |
`rgba(17, 17, 17, 0.08) 0px -2px 6px 0px` | Cards, elevated surfaces |
| Layered (Level 2) |
`rgb(17, 81, 255) 0px 0px 0px 2px` | Cards, elevated surfaces |
**Shadow Philosophy**: Multi-layered shadow system creating natural, atmospheric depth. Each shadow level combines multiple layers for realistic elevation.
## 7. Motion & Interaction
### Easing System
| CSS Variable | Curve | Semantic Name |
|--------------|-------|---------------|
| `--podium-cds-motion-easing-expressive` | `cubic-bezier(0.6, 0, 0.1, 1)` | Ease Out — Decelerating |
| `--pds-motion-easing-expressive` | `cubic-bezier(0.6, 0, 0.1, 1)` | Ease Out — Decelerating |
| `--pds-motion-easing-functional` | `cubic-bezier(0.4, 0, 0.2, 1)` | Material Standard — Balanced |
| `--podium-cds-motion-easing-functional` | `cubic-bezier(0.4, 0, 0.2, 1)` | Material Standard — Balanced |
| `--podium-cds-transition-timing-function-ease` | `cubic-bezier(.25, .1, .25, 1)` | Ease Out — Decelerating |
### Duration Scale
| CSS Variable | Value | Tier |
|--------------|-------|------|
| `--podium-cds-motion-duration-400` | `400ms` | Slow |
| `--podium-cds-motion-duration-300` | `300ms` | Normal |
| `--podium-cds-motion-duration-250` | `250ms` | Normal |
| `--podium-cds-motion-duration-350` | `350ms` | Slow |
| `--pds-motion-duration-250` | `250ms` | Normal |
| `--pds-motion-duration-400` | `400ms` | Slow |
| `--podium-cds-motion-duration-150` | `150ms` | Fast |
| `--pds-motion-duration-150` | `150ms` | Fast |
| `--pds-motion-duration-350` | `350ms` | Slow |
| `--podium-cds-transition-duration-normal` | `250ms` | Normal |
### Copy-Paste Transition Snippets
**Shadow**
```css
transition: box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
```
**Transform**
```css
transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
```
**Transform**
```css
transition: transform 0.8s, opacity 1s;
```
**Transform**
```css
transition: transform 0.15s;
```
### Keyframe Animation Catalog
| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `Qrke3I-M` | Rotate / Spin | transform | UI transition |
| `PDTHp9yE` | Custom | text-overflow, overflow-x, overflow-y, white-space-collapse, text-wrap-mode | UI transition |
| `_3FGhfyw3` | Custom | text-overflow, white-space-collapse, text-wrap-mode, overflow-x, overflow-y | UI transition |
| `_3N1WTAJ-` | Custom | max-width | UI transition |
| `c5JhUTb3` | Custom | max-width | UI transition |
| `_2M8riywt` | Slide | transform | UI transition |
| `_22kD7MgC` | Slide | transform | UI transition |
| `_1Io7Ckl7` | Slide | transform | UI transition |
| `animation-npr22l` | Fade + Move | opacity, transform | UI transition |
| `slide-search-results-tray` | Custom | right | UI transition |
| `scaleup` | Scale | transform | Focus / emphasis |
| `open` | Fade | grid-template-rows, opacity, padding-bottom | UI transition |
| `close` | Fade | grid-template-rows, opacity, padding-bottom | UI transition |
| `glitch-1` | Custom | clip-path | UI transition |
| `pds-fade-in` | Fade | opacity | Element entrance |
| `pds-fade-out` | Fade | opacity | Element exit |
| `pds-slide-in-from-top` | Slide | transform | Panel / drawer enter |
| `pds-slide-in-from-bottom` | Slide | transform | Panel / drawer enter |
| `pds-slide-in-from-left` | Slide | transform | Panel / drawer enter |
| `pds-slide-in-from-right` | Slide | transform | Panel / drawer enter |
> *20 additional animations omitted (repetitive variants). See raw keyframes in `raw-css.json`.*
### Motion Fingerprint
- **Speed Character**: Deliberate & Calm (median duration: `350ms`)
- **Dominant Easing**: custom cubic-bezier curves
- **Animation Library**: 40 unique animations (41 total including variants)
> This design moves with deliberate & calm timing using custom cubic-bezier curves, creating a UI that feels calm and controlled.
## 8. Do's and Don'ts
### Do
- Use Near-Black (`#111111`) for text — not pure black, it's warmer and more readable
- Use Helvetica Now Text as the primary typeface — it defines the brand personality
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use Near-Black (`#111111`) as the primary accent — it's the brand's signature interactive color
- Use 30px border-radius on primary buttons — the brand uses generously-rounded CTAs
- Keep navigation fixed to the top — the design uses a persistent navigation pattern
- Maintain nav height at 96px — consistent vertical space for the navigation bar
- Make the navigation fixed — it stays visible during scroll, signaling content depth
- Include a search input directly in the nav — discoverability is a primary UX value here
- Each card includes a top image — imagery is part of the card identity, not optional
### Don't
- Don't use pure black (`#000000`) for text — the near-black adds warmth
- Don't substitute with generic sans-serif or serif — the custom font carries the brand
- Don't invent new shadow values — use only the extracted shadow levels
- Don't introduce additional saturated accent colors — the palette is intentionally controlled
- Don't use sharp-cornered or pill buttons — 30px is the CTA border-radius standard
- Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence
## 7b. Enforceable Brand Rules
*Structured Do/Don't with reasoning and validation tests. Agents can programmatically verify generated UI.*
```yaml
rules:
- id: brand-canvas-001
type: do
rule: "Always use the page background `rgb(255, 255, 255)` as the base canvas"
why: "Every component is designed to composit against this exact tone"
test: "document.body.style.backgroundColor === 'rgb(255, 255, 255)'"
- id: brand-accent-001
type: do
rule: "Reserve `rgb(17, 17, 17)` for primary CTAs and brand-mark signals only"
why: "Single chromatic assertion device — overuse dilutes meaning"
test: "querySelectorAll('[style*=\"rgb(17, 17, 17)\"]').length <= 3 per fold"
```
## 9. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 320px | Single column, compact spacing |
| Mobile | 375px | Single column, compact spacing |
| Mobile Large | 639px | Expanded mobile layout |
| Tablet | 768px | Multi-column grids begin |
| Tablet | 1023px | Multi-column grids begin |
| Large Desktop | 1440px | Maximum content width |
### Token Diff — Desktop vs Mobile
| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| nav | height | `96px` | `60px` |
| button | width | `308px` | `36px` |
| card | width | `auto` | `390px` |
### Collapsing Strategy
- Navigation: horizontal links → hamburger menu on mobile
- Cards: multi-column → stacked vertical on mobile
- Footer: multi-column → stacked single column on mobile
### Touch Targets
- Buttons: 0px padding
- Navigation: adequate spacing between items
- Interactive elements: minimum 44px touch target recommended
### Collapsing Narrative
How the structural patterns adapt from desktop to mobile (extracted from both viewport extractions):
- **Navigation collapses to hamburger** — 214 links visible on desktop, 0 on mobile (the rest hide behind a menu toggle).
## 7c. Visual Effects & Dynamic Behavior
*The live/dynamic layer beyond static CSS — reproduce these, not flat substitutes. This is often what separates a faithful clone from a wireframe.*
- **Glassmorphism** — 5 frosted/blur layer(s) (e.g. `blur(4px)`).
- **CSS-variable animations** (3) — animated custom properties.
> **Motion fingerprint**: glassmorphism (10 layers)
## 9b. Visual Tone & Photography
**Tone:** Photography-driven
The site is dominated by photography (JPG/WebP). Photos carry the brand voice as much as the typography. Use authentic, brand-appropriate imagery — generic stock will degrade quality.
**Canonical Brand Image (OG):**
- https://c.static-nike.com/a/images/w_1920,c_limit/mdbgldn6yg1gg88jomci/image.jpg
*This is the image shown when the site is shared on social media — represents the brand visual essence.*
**Hero Image (above-fold dominant visual):**
- Aspect: 2.06:1 (landscape (16:9-ish))
- Rendered size: 1440×700px
- Alt text: "LE MATCH CONTINUE, Look de foot : France"
- *Use this aspect ratio + composition for your clone's hero — mimicking the proportion preserves the visual hierarchy.*
**Aspect Ratio Distribution:**
- Landscape (1.15–2.3): 2 (6%)
- Portrait (<0.87): 0 (0%)
- Square (0.87–1.15): 32 (94%)
**Media Format Mix:**
- JPG: 10 (typically photographic content)
- PNG: 24 (logos, transparent UI elements, mockups)
**Average rendered image size:** 302×259px
**Above-fold image count:** 3 / 34
**Decorative Patterns Detected:**
- 2 background patterns (non-photo url() backgrounds) — textures/illustrations as backdrops
- **Glassmorphism** detected (`backdrop-filter: blur`) — layered transparent surfaces with blur, modern OS-like aesthetic
**Clone instruction for decorative work:** Glassmorphism is a brand signature — use `backdrop-filter: blur(20px)` on overlapping surfaces.
**Imagery Guidance for clones:**
- Source authentic photography (or licensed stock that matches the brand mood) — placeholders will visibly degrade the clone.
- Match the dominant aspect ratio (see above) so card grids and hero compositions hold.
## 10. Agent Prompt Guide
### Quick Reference
- Background: Pure White (`#ffffff`)
- Primary text: Near-Black (`#111111`)
- Accent: Near-Black (`#111111`)
- Border: Translucent Jet Black (36%) (`rgba(17, 17, 17, 0.36)`)
- Font: Helvetica Now Text
- Body: 16px weight 400
### Example Component Prompts
- "Create a hero section on Pure White background (#ffffff). Headline at 24px Helvetica Now Text weight 500, line-height 1.35, color #111111."
- "Create the primary CTA button: `#111111` background, `#111111` text, 9999px border-radius, 12px 24px padding, 500 weight, Helvetica Now Text font."
- "Design a card on `transparent` background. Border: none. Radius: 0px. Shadow: none. Padding: 0px."
- "Build navigation: fixed on `#ffffff`. Helvetica Now Text 16px weight 400 for links."
### Iteration Guide
1. **Canvas**: Set the light canvas to Pure White (`#ffffff`) — every component is composited against this exact base.
2. **Typography**: All type in Helvetica Now Text, weight range 400–700. Never exceed 700 — heavier weights break the brand's tonal restraint.
3. **Accent**: Near-Black (`#111111`) is the sole interactive color. On hover → Bright Orange (`#ff5000`). Use CSS transitions, not opacity/brightness filters.
4. **Motion**: All transitions use `cubic-bezier(0.25,0.1,0.25,1)`. Timing: 150ms for micro-interactions, 300ms for layout changes. Never use linear for UI transitions — preserve the brand's easing personality.
5. **Shape**: CTAs at `0px`, cards at `0px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
6. **Spacing**: Use the `--ca-space-*` token scale (4px–28px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
7. **Tokens**: Import from §11 CSS Export (`--ca-*` vars). Never hardcode hex values — always reference a token so theming remains consistent.
## 11. CSS Design Tokens Raw Export
*Copy-paste ready `:root {}` block — all values extracted directly from the live site.*
```css
/* Colors */
:root {
--ca-on-primary: #ffffff;
--ca-surface-2: #f5f5f5;
--ca-hairline: #111111;
--ca-ink-subtle: #9e9ea0;
--ca-primary-hover: #e5e5e5;
--ca-semantic-success: #007d48;
--ca-semantic-warning: #feea55;
--ca-semantic-info: #1151ff;
}
/* Typography */
:root {
--ca-font-primary: "Nike Futura ND", system-ui, sans-serif;
--ca-text-display: 76px;
--ca-text-body: 14px;
--ca-text-small: 14px;
--ca-text-caption: 16px;
}
/* Spacing & Radius */
:root {
--ca-space-xxs: 2px;
--ca-space-xs: 4px;
--ca-space-sm: 7px;
--ca-space-md: 12px;
--ca-space-base: 16px;
--ca-space-lg: 20px;
--ca-space-xl: 28px;
--ca-space-2xl: 48px;
--ca-space-3xl: 60px;
--ca-radius-none: 0px;
--ca-radius-xs: 4.2px;
--ca-radius-sm: 8px;
--ca-radius-md: 24px;
--ca-radius-lg: 30px;
--ca-radius-xl: 32px;
--ca-radius-full: 9999px;
}
```
## 13. Page Structure Skeleton
*The actual layout the source site uses. Reproduce these sections in order to match the site structure.*
```yaml
page-skeleton:
- section: navigation
tag: section
height: 257px
width: full-bleed
layout: grid: 10-col gap=normal
children: 1
vertical-padding: ~48px
padding: "36px 0px 60px"
- section: unknown
tag: div
classes: ["search-results-link-container"]
height: 161px
width: 864px
layout: grid: 1-col gap=normal 12px
children: 1
- section: logo-strip
tag: div
height: 96px
width: full-bleed
layout: block
children: 3
- section: header
tag: nav
classes: ["pre-l-header-container"]
height: 96px
width: full-bleed
layout: block
children: 4
bg: "rgb(255, 255, 255)"
- section: content-section
tag: section
classes: ["modal-backdrop-container", "e1k4uanx0"]
height: 780px
width: 536px
layout: flex-column justify=normal
children: 2
vertical-padding: ~48px
- section: hero
tag: div
height: 4341px
width: full-bleed
layout: block
children: 1
- section: feature-section
tag: div
height: 4285px
width: full-bleed
layout: block
children: 18
- section: content-section
tag: div
classes: ["WetubkUi", "media-container", "video-container", "o9oV_gDe"]
height: 700px
width: full-bleed
layout: block
children: 1
bg: "rgb(245, 245, 245)"
- section: unknown
tag: div
classes: ["WetubkUi", "media-container"]
height: 700px
width: full-bleed
layout: block
children: 1
- section: content-section
tag: div
classes: ["WetubkUi", "media-container", "video-container", "o9oV_gDe"]
height: 700px
width: full-bleed
layout: block
children: 1
bg: "rgb(245, 245, 245)"
- section: unknown
tag: div
classes: ["WetubkUi", "media-container"]
height: 700px
width: full-bleed
layout: block
children: 1
- section: feature-section
tag: section
classes: ["e1k4uanx0"]
height: 336px
width: 536px
layout: flex-column justify=normal
children: 1
vertical-padding: ~48px
padding: "48px"
- section: feature-section
tag: div
classes: ["grid", "Z25uR9U5", "fixed-fluid", "ncss-container"]
height: 666px
width: 1344px
layout: block
children: 1
- section: content-section
tag: div
classes: ["WetubkUi", "media-container", "video-container", "o9oV_gDe"]
height: 666px
width: 666px
layout: block
children: 1
bg: "rgb(245, 245, 245)"
- section: unknown
tag: div
classes: ["WetubkUi", "media-container"]
height: 666px
width: 666px
layout: block
children: 1
- section: unknown
tag: div
classes: ["grid", "Z25uR9U5", "fixed-fluid", "ncss-container"]
height: 127px
width: 1344px
layout: block
children: 1
- section: unknown
tag: div
classes: ["grid", "Z25uR9U5", "fixed-fluid", "I6h42sZM"]
height: 416px
width: 1344px
layout: block
children: 1
- section: feature-section
tag: div
classes: ["grid", "Z25uR9U5", "fixed-fluid", "ncss-container"]
height: 666px
width: 1344px
layout: block
children: 1
- section: unknown
tag: div
classes: ["WetubkUi", "media-container"]
height: 666px
width: 666px
layout: block
children: 1
- section: unknown
tag: div
classes: ["WetubkUi", "media-container"]
height: 666px
width: 666px
layout: block
children: 1
- section: content-section
tag: div
classes: ["grid", "Z25uR9U5", "fluid", "ncss-container"]
height: 500px
width: full-bleed
layout: block
children: 1
- section: content-section
tag: div
classes: ["WetubkUi", "media-container", "video-container", "o9oV_gDe"]
height: 500px
width: full-bleed
layout: block
children: 1
bg: "rgb(245, 245, 245)"
- section: feature-section
tag: div
classes: ["grid", "Z25uR9U5", "fixed-fluid", "ncss-container"]
height: 193px
width: 1344px
layout: block
children: 1
- section: navigation
tag: section
classes: ["card", "grid-aligned", "grid-aligned-3", "e1qnw47h0"]
height: 532px
width: full-bleed
layout: block
children: 2
- section: feature-section
tag: div
classes: ["grid", "Z25uR9U5", "fluid", "ncss-container"]
height: 532px
width: full-bleed
layout: block
children: 1
```
**Agent rule**: rebuild sections in this order (sorted by vertical position). Match the layout primitive (grid N-col / flex direction / block).
## 14. Copy Library (Real Content from Source)
*Actual text content extracted from the live page. Use these strings verbatim when reproducing the site — they carry the brand voice.*
```yaml
copy:
section-headings:
- "CHOISIS TA TEAM"
- "Nos modèles iconiques"
- "Promotions liées à la communauté"
sub-headings:
- "Strictement nécessaires (toujours activés)"
- "DÉCHIRE LE SCRIPT"
- "Pour les enfants qui bougent"
- "Sprints foudroyants ou changements de direction rapides ?"
ctas:
- "En savoir plus sur les publicités personnalisées"
- "Confirmer"
- "Tout accepter"
- "Tout refuser"
- "Afficher le panier"
navigation:
- "Aide"
- "Nouveau"
- "Homme"
- "Femme"
- "Enfant"
- "Passer au contenu principal"
- "Trouver un magasin"
- "Statut de la commande"
- "Expédition et livraison"
- "Retours"
footer-links:
- "Ressources"
- "Cartes cadeaux"
```
**Agent rule**: reuse these exact strings when generating UI. Do NOT translate or rephrase — brand voice is preserved through the original wording.
## 15. Asset Inventory (Image Roles & Ratios)
*Image inventory classified by role and aspect ratio. When reproducing the site, allocate this number of assets per role.*
```yaml
assets:
hero:
count: 2
avg-ratio: 2.06
common-aspect: "~16:9 landscape"
sample-alts:
- "LE MATCH CONTINUE, Look de foot : France"
- "LE MATCH CONTINUE, Look de foot : France"
product:
count: 3
avg-ratio: 1.00
common-aspect: "~1:1 square"
sample-alts:
- "Sprints foudroyants ou changements de direction rapides ?, M"
- "Occupe le devant de la scène avec la P-6000, Nike Style By"
- "En mode hybride, Nike Training"
thumbnail:
count: 20
avg-ratio: 1.00
common-aspect: "~1:1 square"
```
**Agent rule**: when generating placeholder images, match these counts and aspect ratios. Use neutral placeholder backgrounds for `product` (e.g. `#f5f5f5`), full-color photography hints for `hero` and `editorial`.
## 16. Component HTML Templates
*Suggested HTML markup for reproducing the key components — based on what was detected in the source DOM.*
### Button (primary action)
```html
```
_Source pattern detected: padding `0px` · radius `0px` · weight `500`_
### Generic Card
```html
```
_Source pattern detected: padding `0px` · radius `0px` · shadow `none`_
**Agent rule**: use these markup skeletons as the structural baseline. Apply tokens from §2-3 for visual styling.
## 17. Content Architecture & Resources (Links by Purpose)
*The page's links classified by purpose — the information architecture to reproduce. Categories, featured images, devices and projects are extracted from the rendered DOM, not guessed.*
**By purpose:** **nav** 47 · **auth** 1 · **docs** 5 · **project** 5 · **other** 2
**Primary actions (conversion path):**
- Account access — "S'identifier" (login/signup) → `https://www.nike.com/fr/register`
**Signals:** 8/60 links carry a featured image · device mockups detected: phone ×5 · dominant link roles: navigation (47), inline-link (7), content-card (6).
---
## Extraction Completeness: 67/100 (C)
| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 11 | 25 | 8 named colors |
| Typography | 18 | 20 | 7 roles defined |
| Components | 8 | 20 | 2 specs extracted |
| Motion & Interaction | 15 | 15 | Keyframes, easing vars |
| CSS Custom Properties | 10 | 10 | 608 vars |
| Responsive Breakpoints | 5 | 5 | 6 breakpoints |
| Variable Fonts | 0 | 5 | None detected |
## 12. Known Gaps & Confidence
Explicit list of what this extraction could NOT capture. Agents should not invent values for these — either skip the feature or use the documented baseline + heuristic fallback.
*Auto-detected extraction limitations — understand before building:*
- **Licensed web fonts (nike-glyphs, Nike TG, Nike Futura ND)** — detected but not downloaded. Substitute with your licensed copy or a close fallback (see Typography section for metrics).
- **Sparse component extraction** — fewer than 5 component types detected. Highly dynamic sections (modals, datepickers, carousels) require interaction to render and are not captured in a static pass.
*✅ No critical extraction gaps detected — high-confidence reproduction expected.*
### Per-section confidence
| Section | Confidence | Reason |
|---------|------------|--------|
| §1 Visual Theme | High | Body bg extracted via getComputedStyle() |
| §2 Colors | High | 608 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | High | 7 typography roles inferred |
| §4 Components | Low | 2 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 16 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 6 breakpoints detected |
| §9b Photography | High | 34 images, hero present |
## 11.1 CSS Implementation Guide (CSS Interception Engine v2.15+)
*Ready-to-use CSS from Prism's CSS Interception Engine — intercepted directly from the site's CSS files (bypasses CORS). Copy-paste into your `