OpenAI Design Tokens

Name: Dembrandt
Author: Dembrandt

AI research and deployment company

Minimalist animations

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

#000000

#202123

#6e6e80

#f1f1f1

#f7f7f8

#ffffff

primary#000000

secondary#ffffff

background#ffffff

text#000000

logo#000000

Typography

OpenAI Sans, -apple-system, sans-serif

hero:48px / 500

body:18px / 400

button:16px / 500

weights:400, 500

leading:1, 1.1, 1.4, 1.6

tracking:-0.02em, 0, 0.04em

Shadows

Spacing

4px8px16px24px32px48px

Border Radius

6px

12px

40px

Borders

1px solid rgba(0, 0, 0, 0.12)

Links

Link text#000000 · no underline

Gradients

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

linear-gradient(90deg, #000000, #202123, #6e6e80)

radial-gradient(circle at 30% 20%, #000000 0%, #202123 70%)

Opacity

0.04

0.08

0.16

0.4

0.64

0.92

Breakpoints

640px768px1024px1280px1536px

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

21.00:1

AAA

Body text

21.00:1

AAA

Button States

React + Next.js

Default

#000000

Hover

#202123

Active

#000000

Focus

focus

Disabled

disabled

radius: 40pxpadding: 10px 20px

output.json

{
  "$schema": "https://design-tokens.org/schema.json",
  "color": {
    "palette-1": {
      "$type": "color",
      "$value": "#000000"
    },
    "palette-2": {
      "$type": "color",
      "$value": "#202123"
    },
    "palette-3": {
      "$type": "color",
      "$value": "#6e6e80"
    },
    "palette-4": {
      "$type": "color",
      "$value": "#f1f1f1"
    },
    "palette-5": {
      "$type": "color",
      "$value": "#f7f7f8"
    },
    "palette-6": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "primary": {
      "$type": "color",
      "$value": "#000000"
    },
    "secondary": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "background": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "text": {
      "$type": "color",
      "$value": "#000000"
    },
    "logo": {
      "$type": "color",
      "$value": "#000000"
    },
    "link": {
      "$type": "color",
      "$value": "#000000"
    }
  },
  "border": {
    "border-1": {
      "$type": "border",
      "$value": "1px solid rgba(0, 0, 0, 0.12)"
    }
  },
  "gradient": {
    "gradient-1": {
      "$type": "gradient",
      "$value": "linear-gradient(135deg, #000000 0%, #ffffff 100%)"
    },
    "gradient-2": {
      "$type": "gradient",
      "$value": "linear-gradient(90deg, #000000, #202123, #6e6e80)"
    },
    "gradient-3": {
      "$type": "gradient",
      "$value": "radial-gradient(circle at 30% 20%, #000000 0%, #202123 70%)"
    }
  },
  "fontFamily": {
    "base": {
      "$type": "fontFamily",
      "$value": "OpenAI Sans, -apple-system, sans-serif"
    }
  },
  "fontWeight": {
    "weight-400": {
      "$type": "fontWeight",
      "$value": 400
    },
    "weight-500": {
      "$type": "fontWeight",
      "$value": 500
    }
  },
  "dimension": {
    "space-1": {
      "$type": "dimension",
      "$value": "4px"
    },
    "space-2": {
      "$type": "dimension",
      "$value": "8px"
    },
    "space-3": {
      "$type": "dimension",
      "$value": "16px"
    },
    "space-4": {
      "$type": "dimension",
      "$value": "24px"
    },
    "space-5": {
      "$type": "dimension",
      "$value": "32px"
    },
    "space-6": {
      "$type": "dimension",
      "$value": "48px"
    },
    "radius-1": {
      "$type": "dimension",
      "$value": "6px"
    },
    "radius-2": {
      "$type": "dimension",
      "$value": "12px"
    },
    "radius-3": {
      "$type": "dimension",
      "$value": "40px"
    }
  },
  "shadow": {
    "shadow-1": {
      "$type": "shadow",
      "$value": "0 2px 4px rgba(0,0,0,0.06)"
    },
    "shadow-2": {
      "$type": "shadow",
      "$value": "0 8px 16px rgba(0,0,0,0.1)"
    },
    "shadow-3": {
      "$type": "shadow",
      "$value": "0 24px 48px rgba(0,0,0,0.15)"
    }
  },
  "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": "640px"
    },
    "bp-2": {
      "$type": "dimension",
      "$value": "768px"
    },
    "bp-3": {
      "$type": "dimension",
      "$value": "1024px"
    },
    "bp-4": {
      "$type": "dimension",
      "$value": "1280px"
    },
    "bp-5": {
      "$type": "dimension",
      "$value": "1536px"
    }
  },
  "contrast": {
    "button-label": {
      "ratio": 21,
      "grade": "AAA"
    },
    "body-text": {
      "ratio": 21,
      "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 openai.com