lightcleanfriendlycontent-focused
Notion Colors & Fonts
What colors and fonts does Notion use? All-in-one workspace. Clean, friendly, content-focused design.
Notion Color Palette
Primary: #000000
Primary
#000000Brand, text
Background
#FFFFFFMain background
Surface
#F7F6F3Hover states, sidebars
Border
#E9E9E7Dividers
Text Primary
#37352FHeadings, body
Text Secondary
#787774Captions, hints
Accent Red
#E03E3EHighlights
Accent Blue
#2F80EDLinks
What Font Does Notion Use?
Notion uses Inter and Inter
Headings
Inter
600google
Body Text
Inter
400google
Code
SFMono-Regular
400system
Spacing & Radius
Spacing Scale
Base: 4px
2481216243248
Border Radius
Small
3pxMedium
6pxLarge
8pxNotion Tailwind Config
Copy this config to your project
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'primary': '#000000',
'background': '#FFFFFF',
'surface': '#F7F6F3',
'border': '#E9E9E7',
'text-primary': '#37352F',
'text-secondary': '#787774',
'accent-red': '#E03E3E',
'accent-blue': '#2F80ED',
},
fontFamily: {
'heading': ['Inter', 'sans-serif'],
'body': ['Inter', 'sans-serif'],
'mono': ['SFMono-Regular', 'sans-serif'],
},
},
},
}Extract Notion's Full Design
Get pixel-perfect colors, fonts, and spacing extracted directly from the live site. Ready for Tailwind and Cursor AI.
Get PromptUI — $19One-time payment · 20 extractions · No subscription
Similar Design Systems
Explore more design systems
Updated: 2025-01-15