Raycast
A dark, macOS-launcher-native marketing interface anchored on near-black canvas (#07080a) with a single off-white primary button and a signature red gradient hero. The system reads as precise developer-tool software — Inter throughout, heavily layered inset/outset box-shadows that mimic native macOS controls, soft-rounded cards (~20px), and a monochrome UI broken only by Raycast's red brand spectrum. Voltage comes from the red gradient artwork and from the meticulously shadowed control surfaces, not from accent color usage.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display
64px · 600 · 1.1
The quick brown fox jumps
title
24px · 500 · 1.6
The quick brown fox jumps
button
14px · 500 · 1.143
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 8px | |
| sm | 12px | |
| md | 14px | |
| lg | 16px | |
| xl | 24px | |
| xxl | 32px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| xxs | 2px | |
| xs | 4px | |
| sm | 6px | |
| md | 8px | |
| lg | 11px | |
| xl | 12px | |
| xxl | 16px | |
| xxxl | 20px |
FAQ
- What colors does Raycast use?
- Raycast's core palette includes #ffffff, #6a6b6c, #9c9c9d, #434345, #d9d9d9. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Raycast DESIGN.md.
- What font does Raycast use?
- Raycast's primary typeface is Inter. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the Raycast design system?
- A dark, macOS-launcher-native marketing interface anchored on near-black canvas (#07080a) with a single off-white primary button and a signature red gradient hero. The system reads as precise develop…