Design System
Inspired by Raycast

A visual catalog of design tokens, components, and patterns extracted from Raycast's marketing site and documented in DESIGN.md.

Explore Tokens View Components

Color Palette

Near-black blue-tinted backgrounds, precision grays, and bold semantic accents.

Primary

Near-Black Blue
#07080a
Page background
Near White
#f9f9f9
Primary text
Raycast Red
#ff6363
Brand accent, hero stripes

Secondary & Semantic

Raycast Blue
#55b3ff
Links, interactive accent
Raycast Green
#5fc992
Success states
Raycast Yellow
#ffbc33
Warning, highlights

Surface & Background

Surface 100
#101111
Card backgrounds
Card Surface
#1b1c1e
Badge fills, elevated containers
Button White
hsla(0,0%,100%,0.815)
Primary CTA background

Neutrals & Text

Light Gray
#cecece
Secondary text
Medium Gray
#9c9c9d
Links, nav, descriptions
Dim Gray
#6a6b6c
Disabled, low-emphasis
Dark Gray
#434345
Muted borders, inactive
Border
#252829
Card borders, dividers

Typography Scale

Inter with positive letter-spacing for airy dark-mode readability. GeistMono for code.

Display Hero — 64px / 600 / 1.10 / 0px
Your shortcut to everything
Inter — OpenType: liga 0, ss02, ss08
Section Display — 56px / 400 / 1.17 / +0.2px
Supercharged productivity
Inter — OpenType: calt, kern, liga, ss03
Section Heading — 24px / 500 / normal / +0.2px
Built for speed, designed for flow
Inter — OpenType: calt, kern, liga, ss03
Card Heading — 22px / 400 / 1.15
Extensions that transform your workflow
Inter — OpenType: calt, kern, liga, ss03
Body — 16px / 500 / 1.60 / +0.2px
Raycast lets you control your tools with a few keystrokes. It's designed to keep you in the flow state — search, navigate, and execute without touching the mouse.
Inter — weight 500 baseline for dark-mode legibility
Button — 16px / 600 / 1.15 / +0.3px
Download for Free
Inter — semibold with wider tracking for CTAs
Caption — 14px / 500 / 1.14 / +0.2px
Available on macOS 12.0 and later
Inter — small labels, metadata
Small — 12px / 600 / 1.33
NEW EXTENSION
Inter — badges, micro-labels
Code — 14px / 500 / 1.60 / +0.3px
brew install --cask raycast
GeistMono — code blocks, terminal output

Button Variants

Pill CTAs with translucent white, ghost variants with macOS-native inset shadows, rectangular for secondary.

Download Raycast Primary / White Pill
Learn More Secondary / Outline Pill
Ghost / Inset Shadow
Rectangular / 6px
Sign Up Small / Nav CTA

Card Examples

Dark surface cards with double-ring shadows and subtle white border containment.

Extensions

Store Ecosystem

Browse thousands of extensions built by the community. Install with one click and customize to fit your workflow.

AI

Raycast AI

Chat with AI, generate text, translate, summarize — all from your command bar without switching context.

Productivity

Clipboard History

Never lose copied text again. Search your entire clipboard history and paste anything from the past.

Form Elements

Dark inputs with blue focus rings and red error glows — matching the semantic accent system.

Invalid API key format

Spacing Scale

8px base unit with precise sub-values for fine-tuned layout control.

2px
4px
8px
12px
16px
20px
24px
32px
40px

Border Radius Scale

From micro 2px spans to full 86px+ pill buttons — radius signals interaction importance.

2px
Micro
4px
Keys
6px
Buttons/Tags
8px
Inputs
12px
Cards
16px
Large cards
20px
Hero cards
86px
Pill CTA

Elevation & Depth

macOS-native shadow system — multi-layer inset highlights simulating physical glass and metal depth.

Level 0 — Void
No shadow, flat on the dark canvas. The baseline everything rises from.
Level 1 — Subtle
Minimal lift. Fine drop shadow for inline elements.
Level 2 — Ring
Double-ring containment — outer + inset. The standard card treatment.
Level 3 — Button
macOS-native press — white top highlight, dark bottom inset, outer ring.
Level 4 — Floating
Command palette depth — heavy ring + white glow + double inset. Maximum presence.