taste-skill / Compare styles / Raycast vs Cursor

Raycast vs Cursor: design style comparison

Raycast is Desktop-Class macOS Acrylic Glass & Crimson Spotlight; Cursor is Warm Archival Paper & Frontier AI Research Craft. Both were extracted with the same taste-skill pipeline, so every value below is directly comparable. 18 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)

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)

Key differences

Raycast is a dark design (canvas #07080A) while Cursor is light (canvas #F7F7F4).
Accent: #FF6363 (Raycast) vs #26251E (Cursor).
Headings: Inter vs CursorGothic.
Display type: Raycast H1 is 64px / 1.1 (w600); Cursor H1 is 36px / -0.02em (w400) — Raycast sets 28px larger headlines.
Primary button radius: 10px vs 9999px; height 32px vs 27px.
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; 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.
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.4, 0, 0.2, 1).

Token table

Token	Raycast	Cursor
Canvas	`#07080A`	`#F7F7F4`
Surface	`#141517`	`#F2F1ED`
Text	`#FFFFFF`	`#26251E`
Muted text	`#9CA3AF`	`rgba(38, 36, 29, 0.55)`
Accent	`#FF6363`	`#26251E`
Border	`rgba(255, 255, 255, 0.08)`	`rgba(39, 39, 29, 0.1)`
Heading font	`Inter`	`CursorGothic`
Body font	`Inter`	`CursorGothic / EB Garamond`
Mono font	`JetBrains Mono`	`berkeleyMono`
H1	`64px / 1.1 (w600)`	`36px / -0.02em (w400)`
Button radius	`10px`	`9999px`
Button height	`32px`	`27px`
Most-used radius	`8px`	`4px`
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.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`
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.4, 0, 0.2, 1)`
Duration	`0.4s, 0.2s, 0.2s, 0.2s, 0.4s, 0.4s`	`0.15s`
Container max-width	`1204px`	`1300px`
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
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`

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, productivity, raycast, crimson, keyboard, command-palette, acrylic.

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: light, warm, paper, editorial, ai, coding-agent, cursor, serif, berkeley-mono, minimalist, research, ide.

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)).

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)).

Go deeper

Raycast style guide Cursor style guide Raycast token spec Cursor token spec Linear vs Raycast Raycast vs Notion Cursor vs Anthropic Cursor vs Notion

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