Notion

Notion

All-in-one workspace

An all-in-one notes, docs, and project workspace known for warm, editorial minimalism and serif headings.

notion.so

Color palette

Accent

Primary#5645d4

Primary brand color — key actions and emphasis.

Primary Pressed#4534b3

Pressed or hover state of its base color.

Primary Deep#3a2a99

Accent color used within the product's own UI.

Brand Navy#0a1530

Accent color used within the product's own UI.

Brand Navy Deep#070f24

Accent color used within the product's own UI.

Brand Navy Mid#1a2a52

Accent color used within the product's own UI.

Brand Orange#dd5b00

Accent color used within the product's own UI.

Brand Orange Deep#793400

Accent color used within the product's own UI.

Brand Purple#7b3ff2

Accent color used within the product's own UI.

Brand Purple 300#d6b6f6

Accent color used within the product's own UI.

Brand Purple 800#391c57

Accent color used within the product's own UI.

Brand Teal#2a9d99

Accent color used within the product's own UI.

Brand Green#1aae39

Accent color used within the product's own UI.

Brand Yellow#f5d75e

Accent color used within the product's own UI.

Brand Brown#523410

Accent color used within the product's own UI.

Card Tint Peach#ffe8d4

Card and panel surfaces.

Card Tint Rose#fde0ec

Card and panel surfaces.

Card Tint Mint#d9f3e1

Card and panel surfaces.

Card Tint Lavender#e6e0f5

Card and panel surfaces.

Card Tint Sky#dcecfa

Card and panel surfaces.

Card Tint Yellow#fef7d6

Card and panel surfaces.

Card Tint Yellow Bold#f9e79f

Card and panel surfaces.

Card Tint Cream#f8f5e8

Card and panel surfaces.

Charcoal#37352f

Accent color used within the product's own UI.

Slate#5d5b54

Accent color used within the product's own UI.

Steel#787671

Accent color used within the product's own UI.

Stone#a4a097

Accent color used within the product's own UI.

Semantic

Semantic Success#1aae39

Success state.

Semantic Warning#dd5b00

Warning state.

Semantic Error#e03131

Error and destructive state.

Neutral

On Primary#ffffff

Text and icon color on a solid primary fill.

Link Blue#0075de

Primary text color.

Link Blue Pressed#005bab

Pressed or hover state of its base color.

Brand Pink#ff64c8

Primary text color.

Brand Pink Deep#a02e6d

Primary text color.

Card Tint Gray#f0eeec

Card and panel surfaces.

Canvas#ffffff

Page background.

Surface#f6f5f4

Card and panel surfaces.

Surface Soft#fafaf9

Card and panel surfaces.

Hairline#e5e3df

Borders and dividers.

Hairline Soft#ede9e4

Borders and dividers.

Hairline Strong#c8c4be

Borders and dividers.

Ink Deep#000000

Primary text color.

Ink#1a1a1a

Primary text color.

Muted#bbb8b1

Secondary or muted text.

On Dark#ffffff

Text and icon color on a solid primary fill.

On Dark Muted#a4a097

Text and icon color on a solid primary fill.

Type scale

Hero Display
80px · 600 · 1.05
Display Lg
56px · 600 · 1.1
Heading 1
48px · 600 · 1.15
Heading 2
36px · 600 · 1.2
Heading 3
28px · 600 · 1.25
Heading 4
22px · 600 · 1.3
Heading 5
18px · 600 · 1.4
Subtitle
18px · 400 · 1.5
Body Md
16px · 400 · 1.55
Body Md Medium
16px · 500 · 1.55
Body Sm
14px · 400 · 1.5
Body Sm Medium
14px · 500 · 1.5
Button Md
14px · 500 · 1.3
Caption
13px · 400 · 1.4
Caption Bold
13px · 600 · 1.4
Micro
12px · 500 · 1.4
Micro Uppercase
11px · 600 · 1.4

Fonts

PrimaryNotion SansWeights 400, 500, 600

Spacing & shape

Xxs
4px
Xs
8px
Sm
12px
Md
16px
Lg
20px
Xl
24px
Xxl
32px
Xxxl
40px
Section Sm
48px
Section
64px
Section Lg
96px
Hero
120px
Xs
4px
Sm
6px
Md
8px
Lg
12px
Xl
16px
Xxl
20px
Xxxl
24px
Full
9999px

Guidelines

  • Reserve Primary for primary actions and emphasis — it is the system's one accent color.
  • Keep type on the documented family set (Notion Sans).
  • Use one of the documented corner radii (4px, 6px, 8px, 12px, 16px, 20px, 24px, 9999px) rather than a one-off value.
  • Build spacing from the documented scale (4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 96px, 120px) instead of arbitrary padding.
  • Don't apply Primary as a full-page background or a large fill.
  • Don't introduce a second accent color alongside Primary.
  • Don't mix in an additional typeface beyond the ones documented here.