Nike Design Tokens

Name: Dembrandt
Author: Dembrandt

Global sportswear and sneaker brand

Full-bleed product storytelling

Stripe Linear Notion OpenAI Tesla Airbnb Figma Slack Uber Apple Raycast Krea AI Family Oura Nike Duolingo Arc Perplexity AI Anthropic Vercel Cursor

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

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.04

0.08

0.16

0.4

0.64

0.92

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

Button label

16.45:1

AAA

Body text

18.88:1

AAA

Button States

Bootstrap

Default

#ffffff

Hover

#ffffff

Active

#ffffff

Focus

focus

Disabled

disabled

radius: 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 more

Other 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