# 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.

Full Name
Email (Focus State)
API Key (Error State) Invalid API key format
Description

## 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.