# Design Reference - Raycast
> Command-first dark UI with high-contrast cards, red action accents, and shortcut-heavy structure.

Theme: dark
Industry: productivity
Captured: 2026-04-20T12:44:00.000Z

## Source
- Source: Public source
- Source URL: https://raycast.com
- Original site: https://raycast.com
- License note: Publicly visible design reference metadata. Use as inspiration and token guidance, not as copied brand assets.

## Technical Summary
A launcher-style system optimized for fast scanning, command entry, and dense tool metadata. Useful for agent command palettes, action catalogs, and plugin markets.

## Tags
- command
- dark
- launcher
- shortcuts
- plugins

## Colors
| Name | Value | Token | Group | Role |
| --- | --- | --- | --- | --- |
| Black | `#080808` | `--color-black` | surface | App background. |
| Card | `#171717` | `--color-card` | surface | Command card surface. |
| Text | `#f5f5f5` | `--color-text` | neutral | Primary text. |
| Muted | `#8b8b8b` | `--color-muted` | neutral | Secondary labels. |
| Ray Red | `#ff6363` | `--color-ray-red` | accent | Action and selected state. |

## Typography
### Inter - `--font-inter`
Single family for dense product UI, labels, tables, and command surfaces.
- Family: `Inter, ui-sans-serif, system-ui, sans-serif`
- Weights: 400, 500, 600
- Sizes: 12px, 13px, 14px, 16px, 20px, 40px
- Line heights: 1.2, 1.4, 1.5

## Spacing
- Base unit: 4px
- Density: compact

| Name | Value | Token |
| --- | --- | --- |
| 4 | `4px` | `--spacing-4` |
| 8 | `8px` | `--spacing-8` |
| 12 | `12px` | `--spacing-12` |
| 16 | `16px` | `--spacing-16` |
| 24 | `24px` | `--spacing-24` |
| 32 | `32px` | `--spacing-32` |
| 48 | `48px` | `--spacing-48` |
| 64 | `64px` | `--spacing-64` |

## Radius
- Default: 8px
- Controls: 8px
- Panels: 10px

## Components
### Command palette
Role: Interaction
- Search input top
- icon list rows
- right shortcut labels

### Extension card
Role: Marketplace
- Icon, name, short description, install state

## Do
- Keep command input always prominent.
- Use shortcuts as first-class metadata.
- Use accent for executable actions.

## Dont
- Do not make lists verbose.
- Do not hide keyboard affordances.
- Do not use multiple saturated accents.