taste-skill / Compare styles / Cal.com vs Notion

Cal.com vs Notion: design style comparison

Cal.com is Neo-Brutalist Swiss Scheduling & Geometric Cal Sans; Notion is Warm Workspace Canvas & Monumental NotionInter Display. Both were extracted with the same taste-skill pipeline, so every value below is directly comparable. 16 of 18 tracked tokens differ.

Side-by-side preview

Cal.com style · light

Ship the product, not the pixels.

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

Get started

Card on extracted card recipe

Accent link: #242424 · border #E5E5E5

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: #F4F4F4 vs #FFFFFF.
Accent: #242424 (Cal.com) vs #0075DE (Notion).
Headings: Cal Sans vs NotionInter.
Display type: Cal.com H1 is 64px / 1.1 (w600); Notion H1 is 96px / -0.048em (w600) — Notion sets 32px larger headlines.
Primary button radius: 12px vs 8px; height 36px vs 36px.
Depth: Cal.com uses rgba(0, 0, 0, 0.16) 0px 1px 1.9px 0px inset 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.

Token table

Token	Cal.com	Notion
Canvas	`#F4F4F4`	`#FFFFFF`
Surface	`#FFFFFF`	`#F6F5F4`
Text	`#242424`	`#000000`
Muted text	`#898989`	`#615D59`
Accent	`#242424`	`#0075DE`
Border	`#E5E5E5`	`rgba(0, 0, 0, 0.1)`
Heading font	`Cal Sans`	`NotionInter`
Body font	`Inter`	`NotionInter`
Mono font	`Roboto Mono`	`SFMono-Regular`
H1	`64px / 1.1 (w600)`	`96px / -0.048em (w600)`
Button radius	`12px`	`8px`
Button height same	`36px`	`36px`
Most-used radius	`12px`	`8px`
Most-used shadow	`rgba(0, 0, 0, 0.16) 0px 1px 1.9px 0px inset`	`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.42, 0, 1, 1)`
Duration	`—`	`0.2s`
Container max-width	`1224px`	`1184px`
Mode same	`light`	`light`

Primary buttons

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Get started	36px	`8px 12px`	`12px`	`transparent` `#0000EE`	`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 Cal.com if you want Tactile #F4F4F4 industrial stone canvas with crisp #FFFFFF widget cards, bold 64px geometric Cal Sans display headings, high-contrast #242424 ink, and #AA61F1 violet scheduling accents — signals: scheduling, calendar, open-source, cal, calsans, geometric, bento, saas, stone.

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, ai, notion, warm-gray, minimalist.

Shared traits: light.

Rules that differ

Cal.com never:

NEVER substitute generic uncalibrated gray backgrounds for Cal.com’s exact #F4F4F4 canvas and #FFFFFF surface pairing.
NEVER replace Cal Sans display typography or ignore its signature scale (64px / 1.1 (w600)).
NEVER use thick opaque borders that clash with #E5E5E5 (1px solid #E5E5E5).

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

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

Values extracted from https://cal.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 →