Raycast
raycast.comKeyboard-first launcher aesthetic: dark glass panels, compact lists and a coral-red accent.
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.