taste-skill / Compare styles / Linear vs Raycast

Linear vs Raycast: design style comparison

Linear is Dark Precision SaaS & Industrial Craftsmanship; Raycast is Desktop-Class macOS Acrylic Glass & Crimson Spotlight. Both were extracted with the same taste-skill pipeline, so every value below is directly comparable. 14 of 18 tracked tokens differ.

Side-by-side preview

Linear style · dark

Ship the product, not the pixels.

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

Card on extracted card recipe

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

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)

Key differences

Both are dark-mode designs, but the canvases differ: #08090A vs #07080A.
Accent: #5E6AD2 (Linear) vs #FF6363 (Raycast).
Headings: Inter Variable vs Inter.
Display type: Linear H1 is 64px / -0.022em (w510); Raycast H1 is 64px / 1.1 (w600).
Primary button radius: 9999px vs 10px; height 32px vs 32px.
Depth: Linear uses rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset most; 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.
Motion: cubic-bezier(0.25, 0.46, 0.45, 0.94) vs 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).

Token table

Token	Linear	Raycast
Canvas	`#08090A`	`#07080A`
Surface	`#0F1011`	`#141517`
Text	`#F7F8F8`	`#FFFFFF`
Muted text	`#8A8F98`	`#9CA3AF`
Accent	`#5E6AD2`	`#FF6363`
Border same	`rgba(255, 255, 255, 0.08)`	`rgba(255, 255, 255, 0.08)`
Heading font	`Inter Variable`	`Inter`
Body font	`Inter Variable`	`Inter`
Mono font	`Berkeley Mono`	`JetBrains Mono`
H1	`64px / -0.022em (w510)`	`64px / 1.1 (w600)`
Button radius	`9999px`	`10px`
Button height same	`32px`	`32px`
Most-used radius same	`8px`	`8px`
Most-used shadow	`rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset`	`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`
Easing	`cubic-bezier(0.25, 0.46, 0.45, 0.94)`	`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)`
Duration	`0.7s`	`0.4s, 0.2s, 0.2s, 0.2s, 0.4s, 0.4s`
Container max-width	`1436px`	`1204px`
Mode same	`dark`	`dark`

Primary buttons

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Sign up	32px	`0px 12px`	`9999px`	`#E5E5E6` `#08090A`	`1px solid #E5E5E6`	`13px / 510`
Get started	44px	`0px 20px`	`9999px`	`#E5E5E6` `#08090A`	`1px solid #E5E5E6`	`16px / 510`
Contact sales	44px	`0px 20px`	`9999px`	`rgba(255, 255, 255, 0.05)` `#F7F8F8`	`none`	`16px / 510`

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`

Which style should you pick?

Pick Linear if you want Ultra-dark #08090A carbon canvas + 1px rgba(255,255,255,0.08) translucent hairlines + Inter Variable 510 weight (-0.022em) + Berkeley Mono telemetry — signals: precision, saas, linear, hairline-borders, bento-grid, issue-tracker, minimalist, micro-shadows, indigo, carbon-black, dashboard, ai-agents.

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: glassmorphism, macos, desktop, launcher, productivity, raycast, crimson, keyboard, command-palette, acrylic.

Shared traits: dark.

Rules that differ

Linear never:

NEVER use pure #000000 for large card surfaces or pure #FFFFFF for body text—always use #08090A canvas, #0F1011/#141516 cards, and #F7F8F8 primary text.
NEVER use thick opaque gray borders (border-gray-700, border-zinc-600)—always use 1px translucent white hairlines (border-white/[0.08] or border-white/[0.05]).
NEVER use standard font-bold (700 or 800) on large headlines—Linear uses custom variable medium weight (font-[510]) with tight negative tracking (tracking-[-0.022em]) and leading-none (1.0).

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

Go deeper

Linear style guide Raycast style guide Linear token spec Raycast token spec Linear vs Vercel Linear vs Stripe Linear vs Dub Linear vs Loops Raycast vs Cursor Raycast vs Notion

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