DESIGN.md — Notion

Overview

Notion's design system balances warmth and function. A cream-tinted canvas with sharp black text creates a paper-like reading experience. Color is used sparingly and purposefully — primarily for interactive affordances and block types.

Colors

Primary Palette

Token	Hex	Usage
color-text	#000000	Primary text
color-bg	#FFFFFF	Page background
color-accent	#2EAADC	Links, selections
color-red	#EB5757	Highlights, tags
color-warm-gray	#F7F6F3	Sidebar, hover states

Neutral Palette

Token	Hex	Usage
color-gray-1	#F7F6F3	Sidebar background
color-gray-2	#EBECED	Hover states, dividers
color-gray-3	#9B9A97	Placeholder text
color-gray-4	#6B6B6B	Secondary text

Semantic Colors

Token	Hex	Usage
color-success	#2EAADC	Success states, checkmarks
color-error	#EB5757	Error states, delete actions
color-warning	#DFAB01	Warning callouts

Typography

Role	Family	Size	Weight	Line Height
Title	Inter	40px	700	1.2
Heading 1	Inter	30px	600	1.3
Heading 2	Inter	24px	600	1.3
Heading 3	Inter	18px	600	1.4
Body	Inter	16px	400	1.6
Caption	Inter	14px	400	1.5

Spacing

Token	Value	Usage
space-1	4px	Inline gaps
space-2	8px	Block gaps
space-4	16px	Card padding
space-6	24px	Block vertical margin
space-8	32px	Section spacing

Border Radius

Token	Value	Usage
radius-sm	3px	Tags, badges
radius-md	6px	Buttons, inputs
radius-lg	8px	Cards, modals

Elevation

Level	Value	Usage
shadow-sm	0 1px 2px rgba(0,0,0,0.06)	Inline elements
shadow-md	0 4px 12px rgba(0,0,0,0.08)	Dropdowns, popovers
shadow-lg	0 8px 24px rgba(0,0,0,0.12)	Modals, command menu

Components

Block

• Fundamental unit of content
• Types: text, heading, list, toggle, callout, code, image
• Hover shows drag handle + action menu

Sidebar

• Width 240px, #F7F6F3 background
• Tree structure with expand/collapse
• Quick search at top

Command Menu

• Triggered by / key
• Filterable list of block types
• Keyboard navigable

Do's and Don'ts

Do

• Use generous line height (1.6+) for body text
• Keep the palette minimal — let content shine
• Use subtle hover states with warm gray overlays

Don't

• Don't use heavy shadows — Notion is flat
• Don't use font sizes below 14px for body content
• Don't add borders where spacing alone creates separation