Raycast Design System
Light · Generated 17/04/2026 · 123 colors · 49 type tokens · 47 spacing steps · 17 motion tokens
v1.0.0
Color Palette
Background Colors
White
#FFFFFF
Black
#000000
Black 2
#07080A
Light Gray
#E6E6E6
Dark Gray 3
#434345
Dark Gray 4
#1B1C1E
Brand Red
#FF6363
Blue 3
#56C2FF
Text Colors
Mid Gray
#6A6B6C
Mid Gray 2
#9C9C9D
Dark Gray 5
#2F3031
Light Red
#FFCDCD
Light Blue 4
#8CD6FF
Border Colors
Mid Gray 3
rgba(142,140,144,.2)
Red 5
rgba(255,99,99,.25)
Fill & Gradient Colors
Dark Gray
#121212
Dark Gray 2
#0D0D0D
Light Gray 2
#D8D8D8
Dark Blue
#02193B
Blue
#143CA3
Blue 2
#63A1FF
Cyan
#59D499
Orange
#FFC531
Grey Scale (System)
grey-50
#E6E6E6
grey-100
#CDCECE
grey-200
#9C9C9D
grey-300
#6A6B6C
grey-400
#434345
grey-500
#2F3031
grey-600
#1B1C1E
grey-700
#111214
grey-800
#0C0D0F
grey-900
#07080A
Typography
Base Font · Inter / SF Pro Text
Inter
Your shortcut to everything. Launch apps, search files, run commands.
Light · 300 Regular · 400 Medium · 500 Semibold · 600 Bold · 700
Mono Font · GeistMono / JetBrains Mono
GeistMono
raycast://extensions/run --command "New Tab"
Regular · 400 Medium · 500
Your shortcut.
Display Hero · 64px · Bold · line-height: 70.4px · letter-spacing: −0.05px
Raycast Platform
Display · 56px · Semibold · line-height: 65.52px
Build your ideal workflow
Heading XL · 32px · Semibold · line-height: 38.4px
Extensions & Integrations
Heading Large · 24px · Medium · line-height: 32px
A blazing fast, totally extendable launcher. It lets you complete tasks, calculate, share common links and much more.
Body Large · 18px · Regular · line-height: 27.6px
Control your tools with a few keystrokes. Replace your dock, Spotlight, and several other tools.
Body Default · 16px · Regular · line-height: 22.4px
Last synced 2 minutes ago · 1,204 extensions available
Body Small · 14px · Regular · line-height: 19.2px
EXTENSIONS · COMMANDS · AI
Caption / Label · 12px · Medium · line-height: 16px · letter-spacing: 0.8px
Line Heights
Tight
10px
Snug
13px
Normal
13.8px
Relaxed
14.95px
Loose
16px
Spacious
18px
Open
24px
Display SM
32px
Display
36.8px
Display LG
38.4px
Hero
65.52px
Hero XL
70.4px
Letter Spacing
Raycast Pro
Tight · −0.05px
--letter-spacing-tight · hero headings, display text
Extensions
Normal · 0.1px
--letter-spacing-normal · body and UI text
COMMANDS
Widest · 0.8px
--letter-spacing-ls-7 · uppercase labels, captions
Spacing
Spacing Scale
47 tokens — 1px → 442.5px
1
2
3
4
6
8
10
12
13
17
19
20
24
25
29
32
34
40
48
50
56
64
72
80
85
96
102
120
128
137
148+
Borders
Border Radii
r-md
2px
r-2xl
4px
r-r7
6px
r-r8
8px
r-r10
11px
r-r11
12px
r-r12
16px
r-r13
20px
r-r21
99999px
Border Widths
--border-width-hairline
0.5px · ultra-fine dividers
--border-width-thin
1px · cards, inputs, standard borders
--border-width-base
2px · emphasis, focus rings, active states
--border-width-thick
4px · strong emphasis, selection indicators
Raycast uses 4 border widths, from a hairline 0.5px for subtle separation to thick 4px for strong visual anchors.
Shadow / Elevation
Shadow Tokens
6 tokens
shadow-sm
Heavy button shadow
Deep black outer + inset highlights — creates the signature Raycast 3D button effect
shadow-md
Border ring
Dark outer ring + inner ring — card and surface containment without bg color
shadow-lg
Warm ambient
rgba(215,201,175,.05) warm glow — subtle background warmth for hero sections
shadow-xl
Minimal drop
Soft rgba(0,0,0,.28) micro-drop — lightweight elevation for floating elements
shadow-5
Glass button
White inset + white ring + black underline — frosted glass button treatment
shadow-6
Glow ring
Black ring + white glow + inset polish — premium modal / spotlight effect
Z-Index
LayerValueUsage
--z-1-1Background decorations, canvas layers
--z-21Base content layer
--z-32Elevated cards, interactive surfaces
--z-43Popovers, dropdowns, tooltips
--z-5200Command window, modal overlays, top-level dialogs
Breakpoints
📱
--breakpoint-xs / sm
375–400px
Mobile / small phone threshold
💻
--breakpoint-bp-16
768px
Tablet / medium layout threshold
🖥️
--breakpoint-bp-29/30
1200px
Desktop / full container width
Full ladder: 375px (xs) · 400px (sm) · 408px (md) · 420px (lg) · 480px (xl) · 520px (2xl) · 530px (3xl) · 540px · 548px · 563px · 600px · 619px · 640px · 720px · 767px · 768px · 784px · 800px · 840px · 880px · 900px · 920px · 980px · 1000px · 1024px · 1050px · 1064px · 1080px · 1200px · 1204px
Opacity
Opacity Tokens
34 tokens — 0.1 → 0.9
--opacity-10
10%
--opacity-20
20%
--opacity-25
25%
--opacity-35
35%
--opacity-50
50%
--opacity-60
60%
--opacity-75
75%
--opacity-80
80%
--opacity-90
90%
+25 more
granular
steps
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
Text TokenBackground TokenRatioWCAG Rating
--color-mid-gray--color-white5.34:1AA
--color-mid-gray--color-black3.93:1AA Large
--color-mid-gray--color-black-23.75:1AA Large
--color-mid-gray--color-light-gray4.28:1AA Large
--color-mid-gray--color-dark-gray-31.85:1Fail
--color-mid-gray-2--color-white2.74:1Fail
--color-mid-gray-2--color-black7.66:1AAA
--color-mid-gray-2--color-black-27.3:1AAA
--color-mid-gray-2--color-light-gray2.2:1Fail
--color-mid-gray-2--color-dark-gray-33.6:1AA Large
--color-dark-gray-5--color-white13.22:1AAA
--color-dark-gray-5--color-light-gray10.6:1AAA
--color-light-red--color-black14.87:1AAA
--color-light-red--color-dark-gray-36.99:1AA
--color-light-blue-4--color-black13.18:1AAA
--color-light-blue-4--color-dark-gray-36.19:1AA
CSS Variables Reference
Background Colors 16 tokens
White--color-white#FFFFFF
Black--color-black#000000
Black 2--color-black-2#07080A
Black 3--color-black-3#08090C
Light Gray--color-light-gray#E6E6E6
Dark Gray 3--color-dark-gray-3#434345
Dark Gray 4--color-dark-gray-4#1B1C1E
Dark Gray 9--color-dark-gray-9#111214
Dark Gray 13--color-dark-gray-13#222222
Brand Red--color-red#FF6363
Dark Red--color-dark-red#452324
Blue 3--color-blue-3#56C2FF
Cyan--color-cyan#59D499
Orange--color-orange#FFC531
Dark Gray 19--color-dark-gray-19#130D0E
Light Blue--color-light-bluergba(158,190,215,.1)
Text & Border Colors 7 tokens
Mid Gray--color-mid-gray#6A6B6C
Mid Gray 2--color-mid-gray-2#9C9C9D
Dark Gray 5--color-dark-gray-5#2F3031
Light Red--color-light-red#FFCDCD
Light Blue 4--color-light-blue-4#8CD6FF
Mid Gray 3--color-mid-gray-3rgba(142,140,144,.2)
Red 5--color-red-5rgba(255,99,99,.25)
Typography 49 tokens
Base Font--font-family-baseInter
Mono Font--font-family-2GeistMono
SF Pro Text--font-family-3SF Pro Text
Light--font-weight-light300
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
Bold--font-weight-bold700
2XS--font-size-2xs10px
XS--font-size-xs11px
SM--font-size-sm12px
Base--font-size-base13px
LG--font-size-lg14px
XL--font-size-xl16px
2XL--font-size-2xl18px
3XL--font-size-3xl20px
4XL--font-size-4xl22px
6XL--font-size-6xl24px
Display SM--font-size-32px32px
Display LG--font-size-56px56px
Display Hero--font-size-64px64px
Tight--letter-spacing-tight−0.05px
Normal--letter-spacing-normal0.1px
Wide--letter-spacing-wide0.2px
Wider--letter-spacing-wider0.3px
Widest--letter-spacing-widest0.4px
LS-6--letter-spacing-ls-60.5px
LS-7 (Labels)--letter-spacing-ls-70.8px
Spacing (Representative) 47 total tokens
Space 1--space-11px
Space 2--space-22px
Space 5--space-54px
Space 6--space-66px
Space 8--space-88px
Space 10--space-1010px
Space 16--space-1612px
Space 160--space-16024px
Space 23--space-2332px
Space 25--space-2540px
Space 28--space-2848px
Space 30--space-3056px
Space 31--space-3164px
Space 33--space-3380px
Space 35--space-3596px
Space 37--space-37120px
Space 40--space-40148px
Borders & Radius 25 tokens
Hairline--border-width-hairline0.5px
Thin--border-width-thin1px
Base--border-width-base2px
Thick--border-width-thick4px
MD--radius-md2px
2XL--radius-2xl4px
R7--radius-r76px
R8--radius-r88px
R10--radius-r1011px
R11--radius-r1112px
R12--radius-r1216px
R13--radius-r1320px
R21 Pill--radius-r2199999px
Motion, Opacity & Layers 56 tokens
Instant--duration-instant100ms
Fast--duration-fast125ms
Normal--duration-normal150ms
Slow--duration-slow200ms
Slower--duration-slower225ms
D-7--duration-duration-7300ms
D-8--duration-duration-8400ms
D-9--duration-duration-9500ms
D-15--duration-duration-151.5s
D-16--duration-duration-162s
Ease In Out--easing-ease-in-outease-in-out
Ghost--opacity-1010%
Faint--opacity-2020%
Dim--opacity-5050%
Strong--opacity-8080%
Nearly Solid--opacity-9090%
Below Canvas--z-1-1
Base--z-21
Elevated--z-32
Popover--z-43
Command Window--z-5200
Design System Preview · Raycast (Dark) · Generated 17/04/2026 · 123 color tokens · 14 font-size · 3 font-family · 5 font-weight · 20 line-height · 7 letter-spacing · 47 spacing · 21 radius · 4 border-width · 6 shadow · 16 duration · 1 easing · 5 z-index · 30 breakpoints · 34 opacity