Raycast

Raycast sets oversized Inter headlines in a heavy weight on a dark void canvas. Signal Red (#ff6363) is reserved for actions, on buttons with 8px corners, while the rest of the page stays with bone white text and neutral surfaces. The most common corner radius is 11px, with 8px and 6px on smaller elements.

raycast.com ↗

Colors

Signal Red

#ff6363

Primary actions and links

Cobalt

#8cd6ff

Secondary accent and highlights

Void

#07080a

Page canvas

Bone White

#ffffff

Headlines and body copy

Silver Mist

#9c9c9d

Supporting colour

Ash

#434345

Supporting colour

Soft Ash

#6a6b6c

Supporting colour

Deep Void

#000000

Surface or divider

Soft Void

#111214

Surface or divider

Type scale

DisplayYour shortcut to everything.Inter · 64px · 600

HeadingTake shortcuts, not detours.Inter · 20px · 500

SubheadingPlus thousands more...Inter · 24px · 500

BodyA collection of powerful productivity tools all within an extendable launcher. Fast, ergonInter · 18px · 400

Buttons

DownloadDownload for WindowsThe Raycast KeyboardDownload

Style reference measured from the public page at raycast.com on 2026-10-12 for design education. Raycast and its logos are trademarks of their owners; AnimatedWebs is not affiliated with or endorsed by them. Owners can ask us to update or remove this page via our copyright page.

Connect to your AI ↗

# Raycast — Style Reference
> Raycast sets oversized Inter headlines in a heavy weight on a dark void canvas. Signal Red (#ff6363) is reserved for actions, on buttons with 8px corners, while the rest of the page stays with bone white text and neutral surfaces. The most common corner radius is 11px, with 8px and 6px on smaller elements.

**Theme:** dark · **Source:** https://www.raycast.com (captured 2026-10-12). Measurements come from the rendered page; roles are interpreted.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Signal Red | `#ff6363` | `--color-accent` | Primary actions and links |
| Cobalt | `#8cd6ff` | `--color-secondary` | Secondary accent and highlights |
| Void | `#07080a` | `--color-canvas` | Page canvas |
| Bone White | `#ffffff` | `--color-ink` | Headlines and body copy |
| Silver Mist | `#9c9c9d` | `--color-surface-1` | Supporting colour |
| Ash | `#434345` | `--color-surface-2` | Supporting colour |
| Soft Ash | `#6a6b6c` | `--color-surface-3` | Supporting colour |
| Deep Void | `#000000` | `--color-surface-4` | Surface or divider |
| Soft Void | `#111214` | `--color-surface-5` | Surface or divider |

## Typography

| Role | Family | Size | Weight | Line height | Tracking |
|------|--------|------|--------|-------------|----------|
| Display | Inter | 64px | 600 | 1.10 | 0 |
| Heading | Inter | 20px | 500 | normal | 0.010em |
| Subheading | Inter | 24px | 500 | normal | 0.008em |
| Body | Inter | 18px | 400 | normal | 0.011em |

Font families on the page: Inter, GeistMono, SF Pro, SF Pro Text, jetBrainsMono, Segoe UI Variable. Brand fonts are licensed by their owners; use a close open alternative (Inter, Geist, Manrope) if you don't hold a licence.

## Shape

- Corner radius, most to least used: 11px, 8px, 6px, 12px, 20px
- Primary button: background `#e6e6e6`, text `#2f3031`, radius 8px, padding 8px 12px, 14px / 500

More styles from the web

Apple iPhone

Stripe

Linear

Apple

Vercel

Notion

Figma

Framer