Design System inspired by Raycast

Productivity launcher. Dark theme, vibrant gradients, keyboard-first design.

Usage

npx getdesign@latest add raycast

Run this command from your project root, then ask your AI assistant to use DESIGN.md for UI work.

Installs

Bookmarked

Not an official Raycast design system. A curated starting point for building Raycast-like UIs with your AI coding agent.

Productivity launcher. Dark theme, vibrant gradients, keyboard-first design.

Preview

raycast.design.md

Brand System Catalog

DESIGN SYSTEM INSPIRATION OF RAYCAST

Productivity launcher. Dark theme, vibrant gradients, keyboard-first design.

Explore the system View tokens

Color Palette

Productivity launcher. Dark theme, vibrant gradients, keyboard-first design.

Primary

#111111

Brand color

Surface

#1a1a1a

Brand color

Border

#333333

Brand color

Red

#ff6363

Brand color

Blue

#56b9f1

Brand color

Purple

#bf6fff

Brand color

Green

#56d364

Brand color

Yellow

#f0c000

Brand color

White

#ffffff

Brand color

Gray

#858585

Brand color

Typography

A type system inspired by Raycast.

Inter

Inter, Inter

JetBrains Mono

JetBrains Mono, Inter

DISPLAY / 64px / 700 / 1.1

EVERYONE

H1 / 48px / 700 / 1.2

A disciplined editorial voice

H2 / 32px / 600 / 1.3

Section heading

BODY / 16px / 400 / 1.6

Body copy reads at the size and rhythm extracted from the source spec. Lorem ipsum dolor sit amet.

SMALL / 14px / 400 / 1.5

Small

CODE / 14px / 400 / 1.6

Code

Buttons

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

Not detected on this URL

Cards

Card patterns inspired by Raycast.

Not detected on this URL

Components

Other component primitives mapped from the Raycast spec.

Not detected on this URL

Design System Inspired by Raycast

1. Visual Theme & Atmosphere

Productivity launcher. Dark theme, vibrant gradients, keyboard-first design.

Key Characteristics:

Dark theme with vibrant multi-color gradients

Keyboard-first design philosophy

Command palette as primary UI pattern

Glowing neon accents on dark surfaces

Developer-oriented productivity aesthetic

2. Color Palette & Roles

Primary

BG (#111111): Brand color
Surface (#1A1A1A): Brand color
Border (#333333): Brand color
Red (#FF6363): Brand color
Blue (#56B9F1): Brand color
Purple (#BF6FFF): Brand color
Green (#56D364): Brand color
Yellow (#F0C000): Brand color
White (#FFFFFF): Brand color
Gray (#858585): Brand color

3. Typography Rules

Font Family

Display & UI: Inter, JetBrains Mono

Hierarchy

Role	Size	Weight	Line Height
Display	64px	700	1.1
H1	48px	700	1.2
H2	32px	600	1.3
Body	16px	400	1.6
Small	14px	400	1.5
Code	14px	400	1.6

4. Component Stylings

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

5. Layout Principles

Base unit: 4-8px
Max container: 1100-1200px
Consistent section spacing: 80-120px vertical

6. Depth & Elevation

Depth is communicated through background color shifts and subtle shadows or borders.

7. Do's and Don'ts

Do

Follow the established color palette strictly
Maintain typographic hierarchy
Use brand-consistent border-radius

Don't

Introduce off-brand colors
Use inconsistent spacing
Override the established visual language

8. Responsive Behavior

Breakpoint	Width
Mobile	<640px
Tablet	640-1024px
Desktop	>1024px

9. Agent Prompt Guide

Quick Color Reference

BG: #111111
Surface: #1A1A1A
Border: #333333
Red: #FF6363
Blue: #56B9F1
Purple: #BF6FFF

Typography

Font: Inter, JetBrains Mono