Notion Design Tokens
All-in-one workspace for notes and docs
Dynamic theming
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
sm
md
lg
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
0.04
0.08
0.16
0.4
0.64
0.92
1
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
Aa
Button label
4.57:1
Aa
Body text
21.00:1
Button States
ReactDefault
#0075deHover
#0068c6Active
#005cb0Focus
focusDisabled
disabledLoading
loadingradius: 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 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 notion.so