Raycast Colors & Fonts
What colors and fonts does Raycast use? Productivity tool for developers. Vibrant gradients, dark UI.
Raycast Color Palette
Primary: #FF6363
Primary
#FF6363Brand, accents
Background
#1A1A1AMain background
Surface
#2A2A2ACards, panels
Border
#3A3A3ADividers
Text Primary
#FFFFFFHeadings
Text Secondary
#999999Body text
Gradient Start
#FF6363Gradients
Gradient End
#E040FBGradients
What Font Does Raycast Use?
Raycast uses Inter and Inter
Inter
Inter
JetBrains Mono
Spacing & Radius
Spacing Scale
Base: 4px
Border Radius
6px12px16pxRaycast Tailwind Config
Copy this config to your project
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'primary': '#FF6363',
'background': '#1A1A1A',
'surface': '#2A2A2A',
'border': '#3A3A3A',
'text-primary': '#FFFFFF',
'text-secondary': '#999999',
'gradient-start': '#FF6363',
'gradient-end': '#E040FB',
},
fontFamily: {
'heading': ['Inter', 'sans-serif'],
'body': ['Inter', 'sans-serif'],
'mono': ['JetBrains Mono', 'sans-serif'],
},
},
},
}Extract Raycast's Full Design
Get pixel-perfect colors, fonts, and spacing extracted directly from the live site. Ready for Tailwind and Cursor AI.
Get PromptUI — $19One-time payment · 20 extractions · No subscription
Similar Design Systems
Explore more design systems
Linear
The issue tracking tool loved by developers. Dark, minimal, fast.
Stripe
Payment infrastructure for the internet. Clean gradients, polished.
Vercel
Frontend cloud platform. Black & white, sharp, bold typography.
Supabase
Open source Firebase alternative. Green accents, dark theme, developer-friendly.