Raycast

Raycast

Extensible macOS launcher

A macOS command launcher and productivity hub, styled as a sleek dark command palette with vibrant gradient accents.

raycast.com

Color palette

Accent

Primary#ffffff

Primary brand color — key actions and emphasis.

Primary Pressed#e8e8e8

Pressed or hover state of its base color.

Charcoal#d3d3d4

Accent color used within the product's own UI.

Mute#9c9c9d

Accent color used within the product's own UI.

Ash#6a6b6c

Accent color used within the product's own UI.

Stone#434345

Accent color used within the product's own UI.

Button Fg#18191a

Accent color used within the product's own UI.

Accent Blue#57c1ff

Accent color used within the product's own UI.

Accent Red#ff6161

Accent color used within the product's own UI.

Accent Green#59d499

Accent color used within the product's own UI.

Accent Yellow#ffc533

Accent color used within the product's own UI.

Hero Stripe Start#ff5757

Accent color used within the product's own UI.

Hero Stripe End#a1131a

Accent color used within the product's own UI.

Key Bg Start#121212

Accent color used within the product's own UI.

Key Bg End#0d0d0d

Accent color used within the product's own UI.

Neutral

On Primary#000000

Text and icon color on a solid primary fill.

Ink#f4f4f6

Primary text color.

Body#cdcdcd

Secondary or muted text.

On Dark#ffffff

Text and icon color on a solid primary fill.

Canvas#07080a

Page background.

Surface#0d0d0d

Card and panel surfaces.

Surface Elevated#101111

Card and panel surfaces.

Surface Card#121212

Card and panel surfaces.

Hairline#242728

Borders and dividers.

Type scale

Display Xl
64px · 600 · 1.1
Display Lg
56px · 500 · 1.17
Heading Xl
24px · 500 · 1.6
Heading Lg
22px · 500 · 1.15
Heading Md
20px · 500 · 1.4
Heading Sm
18px · 500 · 1.4
Body Lg
18px · 400 · 1.6
Body Md
16px · 400 · 1.6
Body Strong
16px · 500 · 1.4
Link Md
16px · 500 · 1.4
Body Sm
14px · 400 · 1.6
Body Sm Strong
14px · 500 · 1.6
Button Md
14px · 500 · 1.6
Caption Md
13px · 400 · 1.4
Caption Sm
12px · 400 · 1.5

Fonts

PrimaryInterWeights 400, 500, 600

Spacing & shape

Xxs
2px
Xs
4px
Sm
8px
Md
12px
Lg
16px
Xl
24px
Xxl
32px
Section
96px
None
0px
Xs
4px
Sm
6px
Md
8px
Lg
10px
Xl
16px
Full
9999px

Guidelines

  • Reserve Primary for primary actions and emphasis — it is the system's one accent color.
  • Keep type on the documented family set (Inter).
  • Use one of the documented corner radii (0px, 4px, 6px, 8px, 10px, 16px, 9999px) rather than a one-off value.
  • Build spacing from the documented scale (2px, 4px, 8px, 12px, 16px, 24px, 32px, 96px) instead of arbitrary padding.
  • Don't apply Primary as a full-page background or a large fill.
  • Don't introduce a second accent color alongside Primary.
  • Don't mix in an additional typeface beyond the ones documented here.