taste-skill / Compare styles / Cursor vs Notion

Cursor vs Notion: design style comparison

Cursor is Warm Archival Paper & Frontier AI Research Craft; Notion is Warm Workspace Canvas & Monumental NotionInter Display. Both were extracted with the same taste-skill pipeline, so every value below is directly comparable. 17 of 18 tracked tokens differ.

Side-by-side preview

Cursor style · light

Ship the product, not the pixels.

Preview text rendered with the extracted Cursor canvas, text, muted and accent tokens.

Contact sales Request a demo →

Card on extracted card recipe

Accent link: #26251E · border rgba(39, 39, 29, 0.1)

Notion style · light

Ship the product, not the pixels.

Preview text rendered with the extracted Notion canvas, text, muted and accent tokens.

Get Notion free Get Notion free

Card on extracted card recipe

Accent link: #0075DE · border rgba(0, 0, 0, 0.1)

Key differences

Both are light-mode designs, but the canvases differ: #F7F7F4 vs #FFFFFF.
Accent: #26251E (Cursor) vs #0075DE (Notion).
Headings: CursorGothic vs NotionInter.
Display type: Cursor H1 is 36px / -0.02em (w400); Notion H1 is 96px / -0.048em (w600) — Notion sets 60px larger headlines.
Primary button radius: 9999px vs 8px; height 27px vs 36px.
Depth: Cursor uses rgba(0, 0, 0, 0.14) 0px 28px 70px 0px, rgba(0, 0, 0, 0.1) 0px 14px 32px 0px, oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0px 0px 0px 1px most; Notion uses rgba(0, 0, 0, 0.01) 0px 0.175px 1.041px 0px, rgba(0, 0, 0, 0.02) 0px 0.8px 2.925px 0px, rgba(0, 0, 0, 0.027) 0px 2.025px 7.847px 0px, rgba(0, 0, 0, 0.04) 0px 4px 18px 0px most.
Motion: cubic-bezier(0.4, 0, 0.2, 1) vs cubic-bezier(0.42, 0, 1, 1).

Token table

Token	Cursor	Notion
Canvas	`#F7F7F4`	`#FFFFFF`
Surface	`#F2F1ED`	`#F6F5F4`
Text	`#26251E`	`#000000`
Muted text	`rgba(38, 36, 29, 0.55)`	`#615D59`
Accent	`#26251E`	`#0075DE`
Border	`rgba(39, 39, 29, 0.1)`	`rgba(0, 0, 0, 0.1)`
Heading font	`CursorGothic`	`NotionInter`
Body font	`CursorGothic / EB Garamond`	`NotionInter`
Mono font	`berkeleyMono`	`SFMono-Regular`
H1	`36px / -0.02em (w400)`	`96px / -0.048em (w600)`
Button radius	`9999px`	`8px`
Button height	`27px`	`36px`
Most-used radius	`4px`	`8px`
Most-used shadow	`rgba(0, 0, 0, 0.14) 0px 28px 70px 0px, rgba(0, 0, 0, 0.1) 0px 14px 32px 0px, oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0px 0px 0px 1px`	`rgba(0, 0, 0, 0.01) 0px 0.175px 1.041px 0px, rgba(0, 0, 0, 0.02) 0px 0.8px 2.925px 0px, rgba(0, 0, 0, 0.027) 0px 2.025px 7.847px 0px, rgba(0, 0, 0, 0.04) 0px 4px 18px 0px`
Easing	`cubic-bezier(0.4, 0, 0.2, 1)`	`cubic-bezier(0.42, 0, 1, 1)`
Duration	`0.15s`	`0.2s`
Container max-width	`1300px`	`1184px`
Mode same	`light`	`light`

Primary buttons

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Contact sales	27px	`5.6px 10.5px`	`9999px`	`transparent` `#26251E`	`1px solid rgba(40, 35, 30, 0.2)`	`14px / 400`
Request a demo →	43px	`12.48px 21.6px`	`9999px`	`#E6E5E0` `#26251E`	`1px solid rgba(42, 42, 42, 0.02)`	`16px / 400`
Button	51px	`10px 12px`	`0px`	`#EBEAE5` `#26251E`	`none`	`12px / 400`

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Get Notion free	36px	`4px 14px`	`8px`	`#0075DE` `#FFFFFF`	`none`	`16px / 500`
Get Notion free	38px	`6px 15px`	`8px`	`#0075DE` `#FFFFFF`	`none`	`16px / 500`
Request a demo	38px	`6px 15px`	`8px`	`#E6F3FE` `#005BAB`	`none`	`16px / 500`

Which style should you pick?

Pick Cursor if you want Warm archival paper canvas (#F7F7F4 / #F2F1ED) with deep charcoal-olive ink (#26251E), bespoke CursorGothic + EB Garamond editorial quotes + BerkeleyMono diff blocks and timeline tokens — signals: warm, paper, editorial, coding-agent, cursor, serif, berkeley-mono, research, ide.

Pick Notion if you want Crisp #FFFFFF & warm stone #F6F5F4 workspace surfaces with rgba(0,0,0,0.1) hairlines, monumental 96px NotionInter headlines (-0.048em tracking), and #0075DE cobalt + #FFB110 amber accents — signals: workspace, productivity, docs, wiki, notion, warm-gray.

Shared traits: light, ai, minimalist.

Rules that differ

Cursor never:

NEVER substitute generic uncalibrated gray backgrounds for Cursor’s exact #F7F7F4 canvas and #F2F1ED surface pairing.
NEVER replace CursorGothic display typography or ignore its signature scale (36px / -0.02em (w400)).
NEVER use thick opaque borders that clash with rgba(39, 39, 29, 0.1) (1px rgba(39,39,29,0.1)).

Notion never:

NEVER substitute generic uncalibrated gray backgrounds for Notion’s exact #FFFFFF canvas and #F6F5F4 surface pairing.
NEVER replace NotionInter display typography or ignore its signature scale (96px / -0.048em (w600)).
NEVER use thick opaque borders that clash with rgba(0, 0, 0, 0.1) (1px rgba(0,0,0,0.1)).

Go deeper

Cursor style guide Notion style guide Cursor token spec Notion token spec Raycast vs Cursor Cursor vs Anthropic Attio vs Notion Cal.com vs Notion Raycast vs Notion

Values extracted from https://www.cursor.com and https://www.notion.so. Not affiliated with either company.

Get all 30 full SKILL.md specs (Cursor / Claude Code / Codex ready) plus the Pro growth skills.

See taste-skill Pro →