Home
DESIGN.md
Star on GitHub
Copied!
Raycast
A collection of powerful productivity tools all within an extendable launcher for macOS.
Colors
Brand / Canvas
brand
#FF6060
Primary CTA, logo mark
canvas
#0D0D0D
Page background
surface
#181818
Cards, panels
surface-elevated
#212121
Raised card surfaces
surface-card
#282828
Deepest surface layer
hairline
#393939
Dividers, card borders
Text
ink
#EDEDED
Headings, high contrast
body
#B3B3B3
Body copy
muted
#7A7A7A
Secondary labels
cta-bg
#FFFFFF
Primary download button
Semantic Accents
red
#FF6161
Error, destructive
orange
#FF8C00
Warning
yellow
#FFC533
Caution, Pro tier
green
#59D499
Success, online
blue
#57C1FF
Info, link tint
purple
#A484FE
Pro plan accent
Typography — Inter (marketing · ss03) · SF Pro (in-app)
display-xl
Your shortcut to everything.
64px
600
lh 1.0
display-lg
There's an extension for that.
56px
500
lh 1.1
display-md
Built for professionals like you.
40px
500
lh 1.15
heading
Quick Links & Snippets
24px
600
lh 1.3
body-lg
Launch apps, search files, and run scripts from anywhere on your Mac instantly.
18px
400
lh 1.6
body-md
Default body copy for marketing and app descriptions.
16px
400
lh 1.5
body-sm
Secondary descriptions, supporting content.
14px
400
lh 1.5
list-title
Open Raycast Settings
14px
400
SF Pro
list-subtitle
Preferences & settings
13px
400
SF Pro
section-hdr
RECENT COMMANDS
12px
500
ALL CAPS
label / btn
Download for Mac
14px
500
Components
Buttons
Download
Learn more
Settings
⚙️
🔍
⌘
Badges
Error
Success
Info
Warning
Pro
Premium
Search Input
No border, no bg — transparent field on dark glass
App Window
🚀
Open Raycast
Core
📂
Browse Files
⚡
Quick Links
🤖
AI Commands
Pro
Command Palette — Interactive
⌘ Space
Spacing — 4px base unit
Guardrails
Do
Use the surface ladder (bg → surface → elevated) instead of shadows for depth
Keep saturated accent colors on data/status — never on navigation chrome
Restrict gradients to window backgrounds only
Maintain 40px row heights for keyboard-navigable lists
Apply the selection color consistently to loader bar and selected-row highlight
Use inset box-shadow on floating containers instead of outlines
Don't
Don't add drop shadows to cards, panels, or popups — elevation is color, not shadow
Don't use the red/orange brand color on interactive button elements
Don't mix multiple accent hues on a single screen's chrome elements
Don't use font weights above 600 inside the app window
Don't add hover backgrounds to list items unless keyboard-focused or selected
Don't use gradient text on headings or body copy