Notion
The AI workspace that works for you — warm minimalism where content always takes center stage.
Colors
Surfaces
bg-primary
#FFFFFF
Page canvas
bg-sidebar
#F7F6F3
Warm off-white sidebar
bg-callout
#F1F1EF
Callouts, code, hover
border
#E9E9E7
Dividers, hairlines
Text
text-primary
#37352F
Body — warm near-black
text-secondary
#787774
Secondary text
text-tertiary
#9B9A97
Metadata, placeholders
cta / link
#097FE8
Primary button, links
Content tags
green
#448361
Done · bg #EDF3EC
red
#C4554D
Blocked · bg #FAECEC
yellow
#CB912F
In progress · bg #FBF3DB
blue
#487CA5
Info · bg #E9F3F7
purple
#8A67AB
Draft · bg #F6F3F8
Typography
Page Title
Heading 1
Heading 2
Default body text. Content is the canvas — no decoration.
UI label, button, property name
Timestamps, helper text, metadata
inline code
Components
Sidebar pages
Q4 Planning
Roadmap12
Meeting notes
Design system4
Engineering
Block types
Project overview
Background
•Core principle one for this project
•Another key consideration to track
💡This is a callout block for important context.
const notion = new Client({ auth: token })
Everything important starts as a note.
Database properties
Status
In progress
Due date
Jun 28, 2025
Assignee
Ana Torres
Priority
Medium
Relation
Roadmap 2025
Buttons & controls
Done
In progress
Blocked
Draft
Database — table view
Signature — Workspace & inline database
A page is a canvas of blocks; a database is the same data seen many ways. Switch the Tasks database between Table and Board — one source of truth, two views.
AAcme HQ▾
🔍 Search
🚀Product Roadmap
📋Q4 Planning12
📝Meeting notes
🗂Design system4
⚙️Engineering
+ New page
Acme HQ/🚀 Product Roadmap
🚀
Product Roadmap
Everything the team is shipping this quarter, in one place.
💡Group by Status to run standup from the board — drag a card to move a task along.
▦ Tasks
☰ Table
▦ Board
+ New
Spacing
4pxspace-1
8pxspace-2
12pxspace-3
16pxspace-4
24pxspace-6
32pxspace-8
48pxspace-12
Guardrails
DO
Use #37352F for body text — never pure black
Use warm off-white #F7F6F3 for sidebar surfaces
Keep shadows barely visible — subtler than you think
Let whitespace carry the hierarchy, not color
Use color only for content-type tags and CTA
DON'T
Don't use pure #000000 black anywhere in the UI
Don't use heavy shadows or prominent borders
Don't use color as pure decoration
Don't go above font-weight 700
Don't center-align body or long-form text