---
name: Raycast
description: "Keyboard-first launcher aesthetic: dark glass panels, compact lists and a coral-red accent."
website: https://www.raycast.com
color: "#FF6363"
category: Developer tools
icon: raycast
updated_at: "2026-10-29"
---

# Raycast — DESIGN.md

> An independent summary of Raycast's public design language, written by UI Skillbook for coding agents. Not affiliated with or endorsed by Raycast. Color values are approximate.

## Overview

Raycast's UI is a fast command bar. Everything is a list you filter and act on from the keyboard, framed by dark translucent surfaces.

## Color

| Role | Value | Use |
| --- | --- | --- |
| Raycast red | `#FF6363` | Brand accent |
| Background | `#0C0C0C` | Marketing canvas |
| Panel | `#1A1A1A` | Command window |
| Text muted | `#9C9C9D` | Secondary text |

## Typography

Inter at small UI sizes; large, tight marketing headlines. Keyboard shortcuts shown as small key caps.

## Spacing and layout

Compact 40px list rows with icon, title, subtitle and accessory text.

## Components

- Search field flush in the top bar of the window.
- Action panel (⌘K) listing actions for the selected item.
- Key caps for shortcuts.
- Extension store cards with icon, author and installs.

## Do

- Make every action reachable from the keyboard.
- Keep list rows consistent in height.

## Don't

- Don't add mouse-only affordances.
- Don't brighten panels that should feel like glass.

## Prompt for your agent

```
Style this interface in the spirit of Raycast's design language, without copying its logo or brand assets.
Keyboard-first launcher aesthetic: dark glass panels, compact lists and a coral-red accent.
Follow the color roles, type and component notes in this DESIGN.md.
```