Nike Design Tokens
Global sportswear and sneaker brand
Full-bleed product storytelling
Observed with Dembrandt. Semantic roles, gradients, and breakpoints come from live extractions where available; contrast is computed from the real palette. Try the CLI for the complete W3C token export.
Design tokens observed from publicly visible CSS. Dembrandt does not host, copy, or redistribute any brand assets.
Colors
#111111
#707072
#9e9ea0
#ffffff
primary#707072
secondary#f5f5f5
background#ffffff
text#111111
logo#111111
Typography
Nike Futura ND, Helvetica Now Text Medium, Helvetica
hero:96px / 500
body:19.2px / 400
button:24px / 500
weights:400, 500
leading:1, 1.1, 1.4, 1.6
tracking:-0.02em, 0, 0.04em
Shadows
sm
md
lg
Spacing
1px2px3px4px5px6px
Border Radius
2px
18px
30px
50%
Borders
1px solid #cacacb
1px solid #767676
Links · Inputs
Link text#111111 · no underline
Input value#f5f5f5 · r 24px
Gradients
linear-gradient(135deg, #111111 0%, #ffffff 100%)
linear-gradient(90deg, #111111, #707072, #9e9ea0)
radial-gradient(circle at 30% 20%, #111111 0%, #707072 70%)
Opacity
0
0.04
0.08
0.16
0.4
0.64
0.92
1
Breakpoints
320px640px768px960px1024px1920px
Motion
Duration120ms180ms280ms420ms
Easingcubic-bezier(0.4, 0, 0.2, 1)cubic-bezier(0.16, 1, 0.3, 1)linear
Contrast · WCAG 2.2
Aa
Button label
16.45:1
Aa
Body text
18.88:1
Button States
BootstrapDefault
#ffffffHover
#ffffffActive
#ffffffFocus
focusDisabled
disabledLoading
loadingradius: 30pxpadding: 12px 24px
output.json
{
"$schema": "https://design-tokens.org/schema.json",
"color": {
"palette-1": {
"$type": "color",
"$value": "#111111"
},
"palette-2": {
"$type": "color",
"$value": "#707072"
},
"palette-3": {
"$type": "color",
"$value": "#9e9ea0"
},
"palette-4": {
"$type": "color",
"$value": "#ffffff"
},
"primary": {
"$type": "color",
"$value": "#707072"
},
"secondary": {
"$type": "color",
"$value": "#f5f5f5"
},
"background": {
"$type": "color",
"$value": "#ffffff"
},
"text": {
"$type": "color",
"$value": "#111111"
},
"logo": {
"$type": "color",
"$value": "#111111"
},
"link": {
"$type": "color",
"$value": "#111111"
}
},
"border": {
"border-1": {
"$type": "border",
"$value": "1px solid #cacacb"
},
"border-2": {
"$type": "border",
"$value": "1px solid #767676"
}
},
"gradient": {
"gradient-1": {
"$type": "gradient",
"$value": "linear-gradient(135deg, #111111 0%, #ffffff 100%)"
},
"gradient-2": {
"$type": "gradient",
"$value": "linear-gradient(90deg, #111111, #707072, #9e9ea0)"
},
"gradient-3": {
"$type": "gradient",
"$value": "radial-gradient(circle at 30% 20%, #111111 0%, #707072 70%)"
}
},
"fontFamily": {
"base": {
"$type": "fontFamily",
"$value": "Nike Futura ND, Helvetica Now Text Medium, Helvetica"
}
},
"fontWeight": {
"weight-400": {
"$type": "fontWeight",
"$value": 400
},
"weight-500": {
"$type": "fontWeight",
"$value": 500
}
},
"dimension": {
"space-1": {
"$type": "dimension",
"$value": "1px"
},
"space-2": {
"$type": "dimension",
"$value": "2px"
},
"space-3": {
"$type": "dimension",
"$value": "3px"
},
"space-4": {
"$type": "dimension",
"$value": "4px"
},
"space-5": {
"$type": "dimension",
"$value": "5px"
},
"space-6": {
"$type": "dimension",
"$value": "6px"
},
"radius-1": {
"$type": "dimension",
"$value": "2px"
},
"radius-2": {
"$type": "dimension",
"$value": "18px"
},
"radius-3": {
"$type": "dimension",
"$value": "30px"
},
"radius-4": {
"$type": "dimension",
"$value": "50%"
}
},
"shadow": {
"shadow-1": {
"$type": "shadow",
"$value": "rgb(229, 229, 229) 0px -1px 0px 0px inset"
},
"shadow-2": {
"$type": "shadow",
"$value": "rgba(17, 17, 17, 0.08) 0px -2px 6px 0px"
},
"shadow-3": {
"$type": "shadow",
"$value": "rgba(17, 17, 17, 0.06) 0px 4px 8px 0px, rgba(17, 17, 17, 0.03) 0px 0px 24px 4px"
}
},
"opacity": {
"opacity-0": {
"$type": "number",
"$value": 0
},
"opacity-1": {
"$type": "number",
"$value": 0.04
},
"opacity-2": {
"$type": "number",
"$value": 0.08
},
"opacity-3": {
"$type": "number",
"$value": 0.16
},
"opacity-4": {
"$type": "number",
"$value": 0.4
},
"opacity-5": {
"$type": "number",
"$value": 0.64
},
"opacity-6": {
"$type": "number",
"$value": 0.92
},
"opacity-7": {
"$type": "number",
"$value": 1
}
},
"duration": {
"duration-1": {
"$type": "duration",
"$value": "120ms"
},
"duration-2": {
"$type": "duration",
"$value": "180ms"
},
"duration-3": {
"$type": "duration",
"$value": "280ms"
},
"duration-4": {
"$type": "duration",
"$value": "420ms"
}
},
"cubicBezier": {
"ease-1": {
"$type": "cubicBezier",
"$value": "cubic-bezier(0.4, 0, 0.2, 1)"
},
"ease-2": {
"$type": "cubicBezier",
"$value": "cubic-bezier(0.16, 1, 0.3, 1)"
},
"ease-3": {
"$type": "cubicBezier",
"$value": "linear"
}
},
"breakpoint": {
"bp-1": {
"$type": "dimension",
"$value": "320px"
},
"bp-2": {
"$type": "dimension",
"$value": "640px"
},
"bp-3": {
"$type": "dimension",
"$value": "768px"
},
"bp-4": {
"$type": "dimension",
"$value": "960px"
},
"bp-5": {
"$type": "dimension",
"$value": "1024px"
},
"bp-6": {
"$type": "dimension",
"$value": "1920px"
}
},
"contrast": {
"button-label": {
"ratio": 16.45,
"grade": "AAA"
},
"body-text": {
"ratio": 18.88,
"grade": "AAA"
}
}
}
// ...and moreOther token exports
--dtcgW3C token JSON, checked by the DTCG Validator
--design-mdDESIGN.md for agents and docs
--brand-guideBrand guide PDF
--wcagPalette-wide contrast report
All flags in the CLI quickstart. Same tokens in your editor via the MCP server.
$npx dembrandt nike.com