Raycast Design System Preview

01 / Colors

Dark metal, red signal, quiet chrome.

primary#ff6363

Action, links, code chips, danger.

accent#56c2ff

Informational links and new states.

canvas#07080a

Primary page foundation.

surface#111214

Card gradient high stop.

surfaceAlt#0c0d0f

Card gradient low stop.

ink#ffffff

Headings and selected rows.

body#9c9c9d

Secondary text and nav links.

muted#6a6b6c

Disabled and supporting metadata.

success#59d499

Flash success messages.

warning#ff9217

Beta and warm status labels.

danger-surface#2c1617

Native destructive surface.

focus glowblue/red/purple

Rare submit focus aura.

02 / Typography

Compact Inter UI with a cinematic serif headline.

Command center

display — 168px / 400 / 1.00 / -2px / Instrument Serif

Fast by default

hero — 86px / 400 / 1.00 / -2px / Instrument Serif

AI that works with your OS

headline-lg — 48px / 600 / 1.06 / 0.02em / Inter

Build the perfect tools.

title-lg — 32px / 600 / 1.50 / 0em / Inter

Your automation assistant

title-md — 24px / 500 / 1.25 / 0.2px / Inter

Explore AI Commands

title-sm — 20px / 500 / 1.40 / 0.2px / Inter

Raycast lives a single hotkey away, ready to appear above your other apps.

body — 16px / 400 / 1.60 / 0.2px / Inter

Search Chats...

label — 14px / 500 / 1.60 / 0.2px / Inter

npm install @raycast/api

code — 12px / 400 / 1.50 / 0em / JetBrains Mono

03 / Buttons

Inset native controls, not red-filled SaaS pills.

button-primary

button-primary-active

button-dark

button-danger

button-ghost

button-icon

command-action

04 / Cards & Surfaces

Glossy dark panels with restrained depth.

Card Dark

Diagonal dark gradient, translucent border, and a thin inset top highlight.

Explore feature →

CTA Card

Compact promo block with a clipped graphic area and muted supporting copy.

Danger Surface

Destructive flows keep the red inside a brown-black native panel.

Review action →

Focused Form

A rare conic glow appears around newsletter or submit focus moments.

Pricing Card

More padding, tighter rows, and comparison density for plan selection.

Select plan →

Extension Tile

Icon-led tile, 12px radius, and metadata anchored to the lower edge.

Install →

05 / Brand-Specific Product Patterns

Command palettes, app icons, AI chat, hotkeys.

Quick Search⌘K

Search Extensions...

G

Google Search

Search straight from Raycast

↵

C

Clipboard History

Core feature

⌘⇧V

F

File Search

Find anything fast

⌘F

AI ChatRay-1

Please give me an overview of my day.

Calendar: 2 events today. Linear: 3 issues in progress. Your next focus block starts at 14:00.

AI

Submit Actions

Filter Issues · Get Calendar Events

⌘K

Extension StoreThousands more

N

T

G

O

C

S

AI

⌘

F

W

E

+

J

Z

R

M

P

⌥

HotkeysWindow Management

++

Pricing ComparisonPro

Raycast AIUnlimited

Cloud SyncIncluded

Clipboard HistoryUnlimited

Advanced AI+ $8

Command DetailActions

W

Left Half

Move focused window to left half

⌃←

W

Right Half

Move focused window to right half

⌃→

W

Maximize

Fill current display

⌃M

06 / Forms

Transparent inputs inside dark floating surfaces.

Default input Focus input Select Error input Textarea

Choices Enable Cloud Sync Use local model

07 / Spacing

Four-pixel half steps, eight-pixel rhythm.

xs 4px

sm 8px

md 16px

lg 24px

xl 32px

section 96px

08 / Radius

Small, native, utility-minded rounding.

6pxRows, keycaps

8pxButtons, inputs

12pxCards

16pxGlass nav

20pxLarge panels

9999pxBadges only

09 / Elevation

Depth from inset light and product-window glow.

Inset Surface

inset 0 1px 0 rgba(255,255,255,.10)

Focus Ring

2px translucent white outline

Floating Modal

Dark shadow plus inset white edge

Window Glow

Soft white aura for app peeks

10 / Extracted Component Tokens

CSS custom properties from the system.

:root {
  --brand-primary: #ff6363;
  --brand-accent: #56c2ff;
  --brand-ink: #ffffff;
  --brand-body: #9c9c9d;
  --brand-muted: #6a6b6c;
  --brand-canvas: #07080a;
  --brand-surface: #111214;
  --brand-surface-alt: #0c0d0f;
  --brand-border: rgba(255,255,255,.06);
  --brand-card-highlight: rgba(255,255,255,.10);
  --brand-danger-surface: #2c1617;
  --brand-danger-border: #833637;
  --font-display: "Instrument Serif", Georgia, serif;
  --font-ui: "Inter", sans-serif;
  --font-code: "JetBrains Mono", Menlo, monospace;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.10);
}