Dark Mode

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, 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
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
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
Caption — 14px / 500 / 1.14 / +0.2px
Available on macOS 12.0 and later
Inter — small labels, metadata
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.

Download Raycast Primary / White Pill
Learn More Secondary / Outline Pill
Ghost / Inset Shadow
Rectangular / 6px

Card Examples

Dark surface cards with double-ring shadows and subtle 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.

Invalid API key format

Spacing Scale

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

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

Border Radius Scale

From micro 2px spans to full 86px+ pill buttons.

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

Elevation & Depth

macOS-native shadow system with multi-layer inset highlights.

Level 0 — Void
No shadow. The baseline void.
Level 1 — Subtle
Minimal lift for inline elements.
Level 2 — Ring
Double-ring containment. Standard card.
Level 3 — Button
macOS press effect. White top, dark inset.
Level 4 — Floating
Command palette depth. Maximum presence.