Design System
Analysis of Raycast

A near-black, keyboard-first system — a grey-900 canvas under crisp white Inter, hairline-thin separators, soft inner-lit surfaces, and a single coral-red spark for brand.

01 — Foundations

Colour Palette

02 — Foundations

Typography

One family — Inter — carries everything, with hierarchy built from size and weight more than colour. A constant +0.2px tracking and a narrow 400–600 weight band keep it calm and engineered.

03 — Components

Button Variants

button-primary
The real Raycast CTA: a near-white solid (grey-50 #e6e6e6) with dark text and a glossy, inset-lit shadow.
button-dark
Elevated grey-600 surface (#1b1c1e), white text — the quieter secondary action.
button-secondary
A hairline outline on bare canvas — tertiary, low-emphasis.
button-pill
Translucent white fill, fully rounded — tags, toggles and segmented controls.
link · inline
ManualChangelog
Inline links stay white and underlined; colour is reserved for brand, not navigation.
04 — Components

Cards & Surfaces

Extension cards: a faint #101111 surface, a 1px hairline, 12px corners and a soft lift on hover — depth from rings and inner light, not heavy shadow.

05 — Components

Form Elements

text-input
textarea
06 — Foundations

Spacing Scale

An 8px base unit (--spacing-1) scaling 4 · 8 · 12 · 16 · 24 · 32 · 48 and up; the marketing grid gap is 32px.

07 — Foundations

Border Radius

An explicit --rounding scale. 8px is the workhorse for buttons and inputs; 12–16px for panels; full pills for tags. (The hero's keycaps use a one-off 11px.)

08 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. Most cards sit flat on a single ring.
Level 1 — a 1px ring plus a tight 2.4px dark shadow and an inset top highlight: the "pressable control" look.
Level 2 — the command bar & popovers: a wide 40px black bloom with a hairline edge for true float.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxSingle column; feature grids and the extension gallery collapse to 1-up; hero keyboard scales down; nav condenses to the 64px bar.
Tablet768–1023pxTwo-column grids; container around 746–1064px.
Laptop1024–1279pxThree- and four-column galleries; container 1204px.
Desktop≥ 1280pxMax container 1280px; content stays centered, side margins grow.

Widths are fixed token steps (xs 746 · sm 1064 · default 1204 · lg 1280px), so the layout jumps between sizes rather than scaling fluidly.

Pricing Tiers

Raycast doesn't price on its homepage; these representative tiers demonstrate the card pattern — dark panels, a brand-red "most popular" marker, and quiet dark CTAs.

Free
$0/month
The core launcher, extensions and clipboard history.
  • Core launcher & window management
  • Clipboard history (3 months)
  • Unlimited extensions
  • Snippets & quicklinks
Pro● Most popular
$8/month
AI everywhere, unlimited clipboard, custom themes and cloud sync.
  • Everything in Free
  • Raycast AI (frontier models)
  • Unlimited clipboard history
  • Custom themes
  • Cloud sync
Team
$15/month
Shared commands, snippets and quicklinks for the whole team.
  • Everything in Pro
  • Shared snippets & quicklinks
  • Team commands store
  • SAML SSO
  • Priority support

Data Table

A dense list view — the surface Raycast lives in. Monospace IDs, quiet status pills and hairline row separators.

IDCommandExtensionStatusWhen
8F2ASearch IssuesLinearLive2m ago
7C19Translate SelectionGoogle TranslateLive14m ago
5B40Play / PauseSpotifyIdle1h ago
3D77Compress ImagesTinyPNGLive3h ago
1A05Create PageNotionIdleYesterday
1–5 of 412
‹123›

Auth Forms

Sign-in stays on-brand: translucent inputs on the black canvas, a solid near-white submit and an SSO fallback.

Sign in

Welcome back

OR
Create account

Create your account

OR