Skip to main content

Nike Design Tokens

Global sportswear and sneaker brand

Full-bleed product storytelling

StripeLinearNotionOpenAITeslaAirbnbFigmaSlackUberAppleRaycastKrea AIFamilyOuraNikeDuolingoArcPerplexity AIAnthropicVercelCursor

Observed with Dembrandt. Contrast and gradients are 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

#ffffff
#9e9ea0
#757575
#707072

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%

Gradients

linear-gradient(135deg, #ffffff 0%, #707072 100%)

linear-gradient(90deg, #ffffff, #9e9ea0, #757575)

radial-gradient(circle at 30% 20%, #ffffff 0%, #9e9ea0 70%)

Opacity

0
0.04
0.08
0.16
0.4
0.64
0.92
1

Breakpoints

480px640px768px1024px1280px1536px

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

AAA
Aa

Body text

4.94:1

AA

Button States

Bootstrap
Default
#ffffff
Hover
#ffffff
Active
#ffffff
Focus
focus
Disabled
disabled
Loading
loading
radius: 30pxpadding: 12px 24px
output.json
{
  "$schema": "https://design-tokens.org/schema.json",
  "color": {
    "palette-1": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "palette-2": {
      "$type": "color",
      "$value": "#9e9ea0"
    },
    "palette-3": {
      "$type": "color",
      "$value": "#757575"
    },
    "palette-4": {
      "$type": "color",
      "$value": "#707072"
    }
  },
  "gradient": {
    "gradient-1": {
      "$type": "gradient",
      "$value": "linear-gradient(135deg, #ffffff 0%, #707072 100%)"
    },
    "gradient-2": {
      "$type": "gradient",
      "$value": "linear-gradient(90deg, #ffffff, #9e9ea0, #757575)"
    },
    "gradient-3": {
      "$type": "gradient",
      "$value": "radial-gradient(circle at 30% 20%, #ffffff 0%, #9e9ea0 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": "480px"
    },
    "bp-2": {
      "$type": "dimension",
      "$value": "640px"
    },
    "bp-3": {
      "$type": "dimension",
      "$value": "768px"
    },
    "bp-4": {
      "$type": "dimension",
      "$value": "1024px"
    },
    "bp-5": {
      "$type": "dimension",
      "$value": "1280px"
    },
    "bp-6": {
      "$type": "dimension",
      "$value": "1536px"
    }
  },
  "contrast": {
    "button-label": {
      "ratio": 16.45,
      "grade": "AAA"
    },
    "body-text": {
      "ratio": 4.94,
      "grade": "AA"
    }
  }
}
// ...and more

Other token exports

The JSON above is one of several output formats. The same extraction can produce:

  • --dtcgW3C Design Tokens format. Validate any DTCG file with the DTCG Validator.
  • --design-mdA readable DESIGN.md summary for agents and docs. More on its limits in DESIGN.md is a good idea with a low ceiling.
  • --brand-guideA brand guide PDF generated from the live URL.
  • --wcagA full WCAG contrast report across the palette, the same grades shown above. Why it matters in catching token drift.

See every flag in the CLI quickstart, or pull tokens straight into your editor with the Dembrandt MCP server.

$npx dembrandt nike.com