taste-skill / Compare styles / Raycast vs Notion

Raycast vs Notion: design style comparison

Raycast is Desktop-Class macOS Acrylic Glass & Crimson Spotlight; 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

Raycast style · dark

Ship the product, not the pixels.

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

Sync linear tasks Send

Card on extracted card recipe

Accent link: #FF6363 · border rgba(255, 255, 255, 0.08)

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

Raycast is a dark design (canvas #07080A) while Notion is light (canvas #FFFFFF).
Accent: #FF6363 (Raycast) vs #0075DE (Notion).
Headings: Inter vs NotionInter.
Display type: Raycast H1 is 64px / 1.1 (w600); Notion H1 is 96px / -0.048em (w600) — Notion sets 32px larger headlines.
Primary button radius: 10px vs 8px; height 32px vs 36px.
Depth: Raycast uses rgba(0, 0, 0, 0.4) 0px 1.5px 0.5px 2.5px, rgb(0, 0, 0) 0px 0px 0.5px 1px, rgba(0, 0, 0, 0.25) 0px 2px 1px 1px inset, rgba(255, 255, 255, 0.2) 0px 1px 1px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 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.
Motion: cubic-bezier(0.23, 1, 0.32, 1), cubic-bezier(0.23, 1, 0.32, 1), cubic-bezier(0.23, 1, 0.32, 1), cubic-bezier(0.23, 1, 0.32, 1), cubic-bezier(0.23, 1, 0.32, 1), cubic-bezier(0.23, 1, 0.32, 1) vs cubic-bezier(0.42, 0, 1, 1).

Token table

Token	Raycast	Notion
Canvas	`#07080A`	`#FFFFFF`
Surface	`#141517`	`#F6F5F4`
Text	`#FFFFFF`	`#000000`
Muted text	`#9CA3AF`	`#615D59`
Accent	`#FF6363`	`#0075DE`
Border	`rgba(255, 255, 255, 0.08)`	`rgba(0, 0, 0, 0.1)`
Heading font	`Inter`	`NotionInter`
Body font	`Inter`	`NotionInter`
Mono font	`JetBrains Mono`	`SFMono-Regular`
H1	`64px / 1.1 (w600)`	`96px / -0.048em (w600)`
Button radius	`10px`	`8px`
Button height	`32px`	`36px`
Most-used radius same	`8px`	`8px`
Most-used shadow	`rgba(0, 0, 0, 0.4) 0px 1.5px 0.5px 2.5px, rgb(0, 0, 0) 0px 0px 0.5px 1px, rgba(0, 0, 0, 0.25) 0px 2px 1px 1px inset, rgba(255, 255, 255, 0.2) 0px 1px 1px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 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.23, 1, 0.32, 1), cubic-bezier(0.23, 1, 0.32, 1), cubic-bezier(0.23, 1, 0.32, 1), cubic-bezier(0.23, 1, 0.32, 1), cubic-bezier(0.23, 1, 0.32, 1), cubic-bezier(0.23, 1, 0.32, 1)`	`cubic-bezier(0.42, 0, 1, 1)`
Duration	`0.4s, 0.2s, 0.2s, 0.2s, 0.4s, 0.4s`	`0.2s`
Container max-width	`1204px`	`1184px`
Mode	`dark`	`light`

Primary buttons

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Sync linear tasks	32px	`8px 12px`	`10px`	`rgba(255, 255, 255, 0.1)` `#FFFFFF`	`none`	`13px / 400`
Send	36px	`2px 12px`	`4px`	`#E6E6E6` `#2F3031`	`none`	`14px / 500`
Download	36px	`8px 12px`	`8px`	`#E6E6E6` `#2F3031`	`none`	`14px / 500`

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 Raycast if you want Deep #07080A midnight canvas with rgba(255,255,255,0.02) translucent acrylic panels, 1px rgba(255,255,255,0.08) specular rims, keyboard shortcut kbd badges, and #FF6363 ruby glow — signals: dark, glassmorphism, macos, desktop, launcher, raycast, crimson, keyboard, command-palette, acrylic.

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: light, workspace, docs, wiki, ai, notion, warm-gray, minimalist.

Shared traits: productivity.

Rules that differ

Raycast never:

NEVER substitute generic uncalibrated gray backgrounds for Raycast’s exact #07080A canvas and #141517 surface pairing.
NEVER replace Inter display typography or ignore its signature scale (64px / 1.1 (w600)).
NEVER use thick opaque borders that clash with rgba(255, 255, 255, 0.08) (1px rgba(255,255,255,0.08)).

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

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

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