Notion Design Tokens

Name: Dembrandt
Author: Dembrandt

All-in-one workspace for notes and docs

Dynamic theming

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

#31302e

#097fe8

#f64932

#f7f6f3

#ffffff

primary#0075de

secondary#ffffff

background#ffffff

accent#f64932

logo#000000

Typography

NotionInter, Inter, sans-serif

hero:54px / 700

body:16px / 400

button:14px / 500

weights:400, 500, 700

leading:1, 1.1, 1.4, 1.6

tracking:-0.02em, 0, 0.04em

Shadows

Spacing

2px4px8px12px16px24px

Border Radius

4px

8px

12px

Borders

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

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

Links

Link textrgba(0, 0, 0, 0.95) · no underline

Gradients

linear-gradient(rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.55))

Opacity

0.04

0.08

0.16

0.4

0.64

0.92

Breakpoints

400px600px768px1120px1280px1440px

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

4.57:1

Body text

21.00:1

AAA

Button States

React

Default

#0075de

Hover

#0068c6

Active

#005cb0

Focus

focus

Disabled

disabled

radius: 8pxpadding: 6px 15px

output.json

{
  "$schema": "https://design-tokens.org/schema.json",
  "color": {
    "palette-1": {
      "$type": "color",
      "$value": "#000000"
    },
    "palette-2": {
      "$type": "color",
      "$value": "#31302e"
    },
    "palette-3": {
      "$type": "color",
      "$value": "#097fe8"
    },
    "palette-4": {
      "$type": "color",
      "$value": "#f64932"
    },
    "palette-5": {
      "$type": "color",
      "$value": "#f7f6f3"
    },
    "palette-6": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "primary": {
      "$type": "color",
      "$value": "#0075de"
    },
    "secondary": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "background": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "accent": {
      "$type": "color",
      "$value": "#f64932"
    },
    "logo": {
      "$type": "color",
      "$value": "#000000"
    },
    "link": {
      "$type": "color",
      "$value": "rgba(0, 0, 0, 0.95)"
    }
  },
  "border": {
    "border-1": {
      "$type": "border",
      "$value": "1px solid rgba(0, 0, 0, 0.1)"
    },
    "border-2": {
      "$type": "border",
      "$value": "1px solid rgba(0, 0, 0, 0.05)"
    }
  },
  "gradient": {
    "gradient-1": {
      "$type": "gradient",
      "$value": "linear-gradient(rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.55))"
    }
  },
  "fontFamily": {
    "base": {
      "$type": "fontFamily",
      "$value": "NotionInter, Inter, sans-serif"
    }
  },
  "fontWeight": {
    "weight-400": {
      "$type": "fontWeight",
      "$value": 400
    },
    "weight-500": {
      "$type": "fontWeight",
      "$value": 500
    },
    "weight-700": {
      "$type": "fontWeight",
      "$value": 700
    }
  },
  "dimension": {
    "space-1": {
      "$type": "dimension",
      "$value": "2px"
    },
    "space-2": {
      "$type": "dimension",
      "$value": "4px"
    },
    "space-3": {
      "$type": "dimension",
      "$value": "8px"
    },
    "space-4": {
      "$type": "dimension",
      "$value": "12px"
    },
    "space-5": {
      "$type": "dimension",
      "$value": "16px"
    },
    "space-6": {
      "$type": "dimension",
      "$value": "24px"
    },
    "radius-1": {
      "$type": "dimension",
      "$value": "4px"
    },
    "radius-2": {
      "$type": "dimension",
      "$value": "8px"
    },
    "radius-3": {
      "$type": "dimension",
      "$value": "12px"
    }
  },
  "shadow": {
    "shadow-1": {
      "$type": "shadow",
      "$value": "0 1px 0 rgba(55,53,47,0.09)"
    },
    "shadow-2": {
      "$type": "shadow",
      "$value": "0 4px 12px rgba(0,0,0,0.08)"
    },
    "shadow-3": {
      "$type": "shadow",
      "$value": "0 12px 32px rgba(0,0,0,0.12)"
    }
  },
  "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": "400px"
    },
    "bp-2": {
      "$type": "dimension",
      "$value": "600px"
    },
    "bp-3": {
      "$type": "dimension",
      "$value": "768px"
    },
    "bp-4": {
      "$type": "dimension",
      "$value": "1120px"
    },
    "bp-5": {
      "$type": "dimension",
      "$value": "1280px"
    },
    "bp-6": {
      "$type": "dimension",
      "$value": "1440px"
    }
  },
  "contrast": {
    "button-label": {
      "ratio": 4.57,
      "grade": "AA"
    },
    "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 notion.so