# Raycast — Design Reference

> A launcher's glow in a near-black room, struck by one red

**Theme:** dark · **Measured from:** raycast.com (English, 1440 px)

Raycast looks like its own app, blown up to page size. The canvas is a near-black `#07080a`, the type is white Inter set mostly in weight 500, and every shade of gray is just white at lower opacity (60%, 40%, 30%). There is one action and it looks like a physical key: a light-gray `#e6e6e6` button with dark text, an 8px radius and a soft white glow. Raycast red `#ff6363` is never a button; it lives in the hero's diagonal light streaks, the logo and tiny uppercase eyebrows. Product screenshots float in glassy frames with deep black shadows, and extension cards borrow the color of the tool they show. Sections are separated by huge stretches of empty dark, so each block reads like a separate window.

## Colors

| Name | Hex | Role |
|------|-----|------|
| Void | `#07080a` | Page canvas — never pure black |
| White | `#ffffff` | Headings and primary text; at 60% / 40% / 30% opacity for secondary and muted text |
| Keycap | `#e6e6e6` | Fill of the primary Download button — the only light surface |
| Graphite | `#2f3031` | Text and icons on the Keycap button |
| Raycast Red | `#ff6363` | Logo, hero light streaks, uppercase eyebrows, active dots — never a button fill |
| Fog | `#9c9c9d` | Secondary labels |
| Smoke | `#6a6b6c` | Muted captions and footnotes |
| Panel | `#111214` | Nav bar and raised cards |
| Ash | `#262626` | Inner panels and sidebars in product mockups |
| Ember | `#130d0e` | Red-tinted fill of the small promo pill |
| Hairline | `#242728` | Solid borders; elsewhere borders are white at 6–14% |
| Sky | `#56c2ff` | Info/link accent inside the app UI only |

**Hero light:** diagonal bands of red (`#ff6363` → `#d72a2a`) with grainy, blurred edges fading into the dark, plus a faint radial glow `rgba(255,150,150,.11)` at the top. Use it once, behind the hero headline.

## Typography

**Inter** for everything (free on Google Fonts). **GeistMono** for tiny technical lines; substitute **Geist Mono** 400 from Google Fonts.

- Weight **500** is the default for body text and section titles; weight **600** only for the 64px hero headline.
- Small text gets slight positive tracking (`0.1–0.2px`); only the 32px heading tightens (`-0.8px`).
- Section titles are small (20px) and two-tone: a white first line, then a gray line at 60% opacity below it.

| Role | Size | Weight | Line height | Letter spacing |
|------|------|--------|-------------|----------------|
| Display | 64px | 600 | 1.1 | 0 |
| Heading | 32px | 500 | 1.2 | -0.8px |
| Heading small | 24px | 500 | normal | 0.2px |
| Section title | 20px | 500 | normal | 0.2px |
| Body large | 18px | 400 | 1.5 | 0.18px |
| Body | 16px | 500 | 1.6 | 0 |
| Button | 14px | 500 | 1.6 | 0.2px |
| Caption | 13px | 400 | normal | 0.1px |

**Two-tone section title:** "Take shortcuts, not detours." in white, then "One interface, everything you need." in white at 60%, both 20px/500, stacked with no gap.

## Shape and spacing

- **Buttons:** 8px radius. Small promo links are full pills (`1000px`).
- **Cards:** 20px radius (extension cards); product window frames 12px; small inner tiles 6px.
- **Base unit:** 4px. Scale: 4, 8, 12, 16, 20, 32, 64, 128.
- **Content width:** about 1204px, centered.
- **Section gap:** very large, 240px or more of empty dark between blocks.

## Components

### Primary button
Keycap `#e6e6e6` fill, Graphite `#2f3031` text, 8px radius, padding `8px 12px`, 36px tall, Inter 500 at 14px, a small OS icon on the left. Shadow `0 0 0 2px rgba(0,0,0,.5), 0 0 14px rgba(255,255,255,.19)` plus an inset bottom edge, so it looks like a lit key. Labels: "Download", "Download for Windows". Under the hero button, two lines of GeistMono 13px in gray ("Windows 10+ (x64 or ARM64)", "Install via WinGet").

### Promo pill
Ember `#130d0e` fill, white text, 1px border of red at 25%, fully rounded, padding `4px 12px`, 30px tall, Inter 500 14px, trailing `→`. Example: "The Raycast Keyboard →".

### Navigation
A floating rounded bar inset from the page edge: Panel fill, 1px white-at-6% border. Logo plus "Raycast" wordmark left; centered links (Store, Pro, AI, iOS, Windows, Teams, Enterprise, Blog, Pricing) in gray 14px/500; right side "Log in" as plain text and the Keycap "Download" button.

### Extension card
360×536, 20px radius, filled with a dark gradient tinted by the extension's own color (navy for Linear, blue for Google Translate, green for Spotify). App icon and name top-left, a small square arrow button top-right, a two-line description in white 500, then a large live illustration of the extension. Cards scroll horizontally, with round prev/next arrows at the bottom right and tab pills (Productivity, Engineering, Design, Writing) above.

### Product window
A full macOS-style screenshot inside a frame of black at 60%, 1px `rgba(142,140,144,.2)` border, 12px radius, shadow `0 4px 40px 8px rgba(0,0,0,.4)`. The Raycast panel inside has its own red glow behind it. A one-line caption sits centered below: bold white lead phrase, gray continuation.

### Eyebrow
Tiny uppercase label in Raycast Red with wide spacing ("AI AGENT") centered above a 32px heading.

## Do

- Keep the canvas `#07080a` and build grays from white at opacity.
- Use the light Keycap button as the only call to action.
- Reserve Raycast Red for light, logo and eyebrows.
- Show the real app UI in floating, deeply shadowed frames.
- Use Inter 500 for body; save 600 for the hero.
- Leave huge dark gaps between sections.

## Don't

- Don't fill buttons with red or any bright color.
- Don't use a light or white page background.
- Don't use bold (700) headings or tight tracking on small text.
- Don't round buttons into pills (only the small promo link is a pill).
- Don't use flat gray cards without a hairline or inner highlight.
- Don't add colorful gradients outside the hero light and extension cards.

## Layout

Centered hero: floating nav bar, red diagonal light streaks filling the first screen, a 64px two-line headline, an 18px subline, then the single Download button with GeistMono notes below and the promo pill. Then a large product window showing one feature, a dimmed keyboard-grid section with a left-aligned two-tone title, a horizontal carousel of extension cards, and a centered AI section with a red eyebrow and a chat-window mockup. Every section title is small, two-tone and sits close to its visual.

## Agent prompt guide

- Text: `#ffffff` · Secondary text: `rgba(255,255,255,.6)` · Muted: `#6a6b6c`
- Canvas: `#07080a` · Raised: `#111214` · Borders: `rgba(255,255,255,.06)`
- Action: `#e6e6e6` with `#2f3031` text · Accent: `#ff6363`

Example prompts:

1. "Primary button: background #e6e6e6, text #2f3031, 8px radius, padding 8px 12px, 36px tall, Inter 500 14px, small icon on the left, box-shadow 0 0 0 2px rgba(0,0,0,.5), 0 0 14px rgba(255,255,255,.19)."
2. "Two-tone section title on #07080a: two stacked lines in Inter 500 20px, letter-spacing 0.2px; first line #ffffff, second line rgba(255,255,255,.6)."
3. "Product window: screenshot inside a frame of rgba(0,0,0,.6), 1px border rgba(142,140,144,.2), 12px radius, shadow 0 4px 40px 8px rgba(0,0,0,.4); centered caption below with a white bold lead phrase and gray continuation."

## Quick start

### CSS variables

```css
:root {
  /* Colors */
  --color-void: #07080a;
  --color-white: #ffffff;
  --color-keycap: #e6e6e6;
  --color-graphite: #2f3031;
  --color-raycast-red: #ff6363;
  --color-fog: #9c9c9d;
  --color-smoke: #6a6b6c;
  --color-panel: #111214;
  --color-ash: #262626;
  --color-ember: #130d0e;
  --color-hairline: #242728;
  --color-sky: #56c2ff;

  /* Fonts */
  --font-sans: 'Inter', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'GeistMono', 'Geist Mono', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 64px;
  --text-display--line-height: 1.1;
  --text-display--font-weight: 600;
  --text-heading: 32px;
  --text-heading--line-height: 1.2;
  --text-heading--letter-spacing: -0.8px;
  --text-heading--font-weight: 500;
  --text-heading-sm: 24px;
  --text-heading-sm--line-height: normal;
  --text-heading-sm--letter-spacing: 0.2px;
  --text-heading-sm--font-weight: 500;
  --text-section-title: 20px;
  --text-section-title--line-height: normal;
  --text-section-title--letter-spacing: 0.2px;
  --text-section-title--font-weight: 500;
  --text-body-lg: 18px;
  --text-body-lg--line-height: 1.5;
  --text-body-lg--letter-spacing: 0.18px;
  --text-body-lg--font-weight: 400;
  --text-body: 16px;
  --text-body--line-height: 1.6;
  --text-body--font-weight: 500;
  --text-button: 14px;
  --text-button--line-height: 1.6;
  --text-button--letter-spacing: 0.2px;
  --text-button--font-weight: 500;
  --text-caption: 13px;
  --text-caption--line-height: normal;
  --text-caption--letter-spacing: 0.1px;
  --text-caption--font-weight: 400;

  /* Radius */
  --radius-buttons: 8px;
  --radius-inputs: 8px;
  --radius-cards: 20px;
  --radius-tags: 1000px;

  /* Spacing */
  --spacing: 4px;

  /* Shadows */
  --shadow-keycap: 0 0 0 2px rgba(0, 0, 0, 0.5), 0 0 14px rgba(255, 255, 255, 0.19), inset 0 -1px 0.4px rgba(0, 0, 0, 0.2);
  --shadow-window: 0 4px 40px 8px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(0, 0, 0, 0.8), inset 0 0.5px 0 rgba(255, 255, 255, 0.3);
  --shadow-card-edge: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 20px 3px rgba(7, 13, 79, 0.05), 0 0 40px 20px rgba(7, 13, 79, 0.05);

  /* Layout */
  --container-page: 1204px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-void: #07080a;
  --color-white: #ffffff;
  --color-keycap: #e6e6e6;
  --color-graphite: #2f3031;
  --color-raycast-red: #ff6363;
  --color-fog: #9c9c9d;
  --color-smoke: #6a6b6c;
  --color-panel: #111214;
  --color-ash: #262626;
  --color-ember: #130d0e;
  --color-hairline: #242728;
  --color-sky: #56c2ff;

  /* Fonts */
  --font-sans: 'Inter', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'GeistMono', 'Geist Mono', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 64px;
  --text-display--line-height: 1.1;
  --text-display--font-weight: 600;
  --text-heading: 32px;
  --text-heading--line-height: 1.2;
  --text-heading--letter-spacing: -0.8px;
  --text-heading--font-weight: 500;
  --text-heading-sm: 24px;
  --text-heading-sm--line-height: normal;
  --text-heading-sm--letter-spacing: 0.2px;
  --text-heading-sm--font-weight: 500;
  --text-section-title: 20px;
  --text-section-title--line-height: normal;
  --text-section-title--letter-spacing: 0.2px;
  --text-section-title--font-weight: 500;
  --text-body-lg: 18px;
  --text-body-lg--line-height: 1.5;
  --text-body-lg--letter-spacing: 0.18px;
  --text-body-lg--font-weight: 400;
  --text-body: 16px;
  --text-body--line-height: 1.6;
  --text-body--font-weight: 500;
  --text-button: 14px;
  --text-button--line-height: 1.6;
  --text-button--letter-spacing: 0.2px;
  --text-button--font-weight: 500;
  --text-caption: 13px;
  --text-caption--line-height: normal;
  --text-caption--letter-spacing: 0.1px;
  --text-caption--font-weight: 400;

  /* Radius */
  --radius-buttons: 8px;
  --radius-inputs: 8px;
  --radius-cards: 20px;
  --radius-tags: 1000px;

  /* Spacing */
  --spacing: 4px;

  /* Shadows */
  --shadow-keycap: 0 0 0 2px rgba(0, 0, 0, 0.5), 0 0 14px rgba(255, 255, 255, 0.19), inset 0 -1px 0.4px rgba(0, 0, 0, 0.2);
  --shadow-window: 0 4px 40px 8px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(0, 0, 0, 0.8), inset 0 0.5px 0 rgba(255, 255, 255, 0.3);
  --shadow-card-edge: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 20px 3px rgba(7, 13, 79, 0.05), 0 0 40px 20px rgba(7, 13, 79, 0.05);

  /* Layout */
  --container-page: 1204px;
}
```

---

*Measured from https://www.raycast.com/ on 2026-10-28 by Faundr. Inspired by Raycast; not its official design system and not affiliated with Raycast.*