00 — Signature Hero

Hero Stripe Band

The system's signature decorative moment — three diagonal red stripes layered across the very top of the hero band. Used once per page maximum.

Built for the
perfect tools

Raycast is a blazingly fast, totally extendable launcher. It lets you complete tasks, calculate, share common links, and much more.

01 — Color

Color Palette

Dark-only system with a 4-step surface ladder, single white CTA, hairline borders, and small saturated category accents reserved for extension illustrations.

Brand & Accent

White (primary)

#ffffff

Universal primary CTA pill — every primary action

White Pressed

#e8e8e8

Pressed-state for primary pill

On Primary

#000000

Pure black text on white CTA

Surface Ladder

Canvas

#07080a

Pure-near-black page background — dominant surface

Surface

#0d0d0d

Card and elevated panel — one notch lighter

Surface Elevated

#101111

Button-tertiary, text-input fill, store-search-bar

Surface Card

#121212

App-icon-tile background, keycap fill, row hover

Hairlines

Hairline

#242728

Universal 1px card border — every card edge

Hairline Soft

rgba(255,255,255,0.08)

Translucent over-image overlay border

Hairline Strong

rgba(255,255,255,0.16)

Stronger inline divider, install-button border

Text Tiers

Ink

#f4f4f6

Primary headlines — slightly off-white

Body

#cdcdcd

Default paragraph text and inline-link color

Mute

#9c9c9d

Metadata, footer link text, secondary captions

Ash

#6a6b6c

Disabled-state text, lowest-emphasis utility

Stone

#434345

Least-emphasis caption text

On Dark Mute

rgba(255,255,255,0.72)

Translucent secondary text on dark surfaces

Category Accents (extension illustrations only)

Accent Blue

#57c1ff

Info / informational badge

Accent Red

#ff6161

Destructive / Slack/Apple category accent

Accent Green

#59d499

Success / productivity category accent

Accent Yellow

#ffc533

Hacker News orange-yellow accent

Brand Gradient (Hero Stripe)

Hero Stripe

#ff5757 → #a1131a

Three diagonal stripes — once per page max

02 — Typography

Typography Scale

Inter with font-feature-settings: "calt", "kern", "liga", "ss03" enabled site-wide. The ss03 alternate "g" is the brand's signature typographic detail.

display-xlInter
64px / 600 / lh 1.1 / +ss02 +ss08
Built for the perfect tools
display-lgInter
56px / 500 / lh 1.17 / +0.2px
Section headline
heading-xlInter
24px / 500 / lh 1.6 / +0.2px
Sub-section heading
heading-lgInter
22px / 500 / lh 1.15
Mid-section feature heading
heading-mdInter
20px / 500 / lh 1.4 / +0.2px
Card group title
heading-smInter
18px / 500 / lh 1.4 / +0.2px
Small heading, extension card title
body-lgInter
18px / 400 / lh 1.6
Pricing tier description, hero subtitle
body-mdInter
16px / 400 / lh 1.6
Default body — paragraph text and inline content
body-strongInter
16px / 500 / lh 1.4 / +0.2px
Inline emphasis, primary nav link
body-smInter
14px / 400 / lh 1.6
Card description, secondary copy
body-sm-strongInter
14px / 500 / lh 1.6 / +0.2px
In-card label, table-header text
caption-mdInter
13px / 400 / lh 1.4 / +0.1px
Caption, metadata
caption-smInter
12px / 400 / lh 1.5 / +0.4px
Smallest utility text, badge label
link-mdInter
16px / 500 / lh 1.4 / +0.3px
Inline body anchor link
button-mdInter
14px / 500 / lh 1.6 / +0.2px
Standard button label

03 — Components

Button Variants

White primary, transparent secondary, surface-elevated tertiary, and the install-button outlined pill — all at 8px radius.

button-primary

bg primary (white) · text on-primary (black) · rounded 8px · 36px height

button-primary-pressed

bg primary-pressed · text on-primary

button-secondary

transparent · text on-dark · rounded 8px

button-tertiary

bg surface-elevated · text on-dark

button-disabled

bg surface-elevated · text ash

install-button

transparent · 1px hairline-strong · padding 6/14

pill-tab + pill-tab-active

default: transparent · active: surface-elevated lift

Pro Free New Beta

badge-pro + badge-info-soft

small chip variants · rounded 4px

⌘ K to open ⏎ Esc

keycap

linear-gradient bg · 1px hairline · physical-key feel

04 — Signature

Command Palette Card

The system's load-bearing visual element — a full-fidelity command palette UI mockup with macOS traffic-light dots, a search input, command rows, and keycap shortcut hints.

Search for apps and commands…
Y
Hacker News — Read latest stories Extension
S
Slack — Search messages Extension
L
Linear — Create new issue Extension
F
Figma — Open recent file Extension
⌘
Calculator — 1024 × 768 Built-in
↑↓ Navigate Open⏎ Actions⌘K

05 — Cards

Card Examples

Feature cards (default + elevated), store extension cards with horizontal app-icon layout, and pricing tier cards (default + featured-elevated variant).

Feature Cards

⚡

Lightning fast

Find and run commands instantly with keyboard-first navigation.

🔌

Extendable

Build your own extensions or install from the community store.

🤖

AI-powered

Generate, summarize, and answer with built-in AI commands.

Store Extension Cards

Y
Hacker News by Thomas Read the latest stories from Hacker News
S
Slack by Raycast Search messages, send DMs, and more
L
Linear by Linear Create issues, track work, manage projects
F
Figma by Raycast Open files, browse projects, search

Pricing Tier Cards

Free

$0

Get started with core features.

  • All core features
  • Community extensions
  • Local AI commands
Featured

Pro

$8/mo

For individuals who want it all.

  • Everything in Free
  • Cloud sync across devices
  • Pro-only extensions
  • Priority support

Pro + Advanced AI

$16/mo

All Pro features plus advanced AI.

  • Everything in Pro
  • GPT-4 / Claude / Gemini access
  • Custom AI commands
  • Image generation

06 — Forms

Form Elements

Surface-elevated text inputs at 36px height with a 1px hairline border. Focus brightens to hairline-strong — no colored ring.

surface-elevated bg · 1px hairline · rounded 8px · 36px
1px hairline-strong border · subtle brightening
Search the store… surface-elevated bg · 1px hairline · 44px height
min-height 96px · resize vertical
button-primary · always full-width

07 — Layout

Spacing Scale

8px base. Section rhythm sits at 96px between major content blocks across every page.

xxs · 2
xs · 4
sm · 8
md · 12
lg · 16
xl · 24
xxl · 32
section · 96

08 — Shapes

Border Radius Scale

Tight 4–16px range. The system never goes flat on cards and never above 16px except for fully-rounded pills.

none · 0

Hero band, primary nav, footer

xs · 4

Keycap glyphs, badge-pro chips

sm · 6

Command-palette row, inline buttons

md · 8

Buttons, text inputs, app-icon tiles

lg · 10

Feature cards, pricing tier cards

xl · 16

Hero command-palette mockup container

full · 9999

Pill-tab chips, avatar circles

09 — Depth

Elevation & Depth

No drop shadows. Elevation is built entirely from the surface-color ladder — each notch lighter on the dark scale reads as one step closer to the viewer.

Canvas
#07080a · base layer
Surface
#0d0d0d · cards
Surface Elevated
#101111 · button-tertiary
Surface Card
#121212 · keycap, app-icon-tile

10 — Responsive

Responsive Behavior

7 breakpoint zones. Hero command-palette mockup stacks vertical on tablet; pricing collapses 3 → 2+1 → 1 down the breakpoint stack.

NameWidthKey Changes
ultrawide1920px+Content max-width 1240px
desktop-large1440pxDefault — 3-up pricing, 2-up store extensions
desktop1280pxSame with narrower outer gutters
desktop-small1024pxPricing → 2+1; nav remains horizontal
tablet768pxPricing → 1-up; nav becomes hamburger; store cards 1-up
mobile480pxSingle-column; hero 64px → ~36px
mobile-narrow320pxSection padding tightens to 48px
320m-narrow
480mobile
768tablet
1024desktop-sm
1280desktop-lg

Touch Targets

Collapsing Strategy