# Raycast design system

> Captured from https://www.raycast.com/ on 2026-10-05 by Brooks New Media (https://design.brooksnewmedia.com/styles/raycast/). An independent analysis for reference: Raycast and its marks belong to their owner. Learn from the system; don't copy the brand.

## Overview

Raycast sits on a near-black #07080a ground with pure white headlines in Inter at 64px and weight 600. Its coral red (#ff6363) arrives as light in the hero artwork rather than as a button color: actions are pale, raised buttons that read like keycaps. Small monospace notes in Geist Mono give a developer tone under the main call to action.

- Theme: dark
- Mood: dark, glow, developer
- Category: Productivity

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#07080a` | The page ground |
| Surface | `#1e1e1e` | Raised panels, bands and cards |
| Text | `#ffffff` | Primary ink, 20.0:1 on the background |
| Muted text | `#9c9c9d` | Supporting copy, 7.3:1 on the background |
| Accent | `#e6e6e6` | Primary actions; this system has no brand hue in its controls |
| Highlight | `#ff6363` | Brand color in artwork, marks and badges |
| Border | `#1a1b1d` | Hairlines and dividers |

Full palette, most used first: `#07080a`, `#ffffff`, `#9c9c9d`, `#6a6b6c`, `#e6e6e6`, `#ff6363`, `#1e1e1e`, `#2f3031`.

## Typography

- **Inter**: display and body, 95.2% of the text. Use Inter. Free under the SIL Open Font License.
- **GeistMono**: code, 3.4% of the text. Use Geist Mono. Free under the SIL Open Font License.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | Inter | 64px | 600 | 1.1 | 0 |
| Heading | Inter | 20px | 500 | normal | 0.01em |
| Subheading | Inter | 18px | 400 | normal | 0.011em |
| Body | Inter | 20px | 500 | normal | 0.01em |
| Small | Inter | 13px | 400 | normal | 0.008em |

Sizes in use, largest first: 64px, 32px, 20px, 18px, 16px, 14px, 13px, 12px.

## Spacing

No single base unit: the values below are what the page repeats.
Values in use: 2px, 6px, 8px, 10px, 12px, 15px, 24px, 32px, 48px.

## Shape

Corner radii, smallest first: 4px, 6px, 8px, 11px, 12px, pill (9999px).

Shadows, most used first:

- `rgba(0, 0, 0, 0.4) 0px 1.5px 0.5px 2.5px, rgb(0, 0, 0) 0px 0px 0.5px 1px, rgba(0, 0, 0, 0.25) 0px 2px 1px 1px inset, rgba(255, 255, 255, 0.2) 0px 1px 1px 1px inset`
- `rgba(0, 0, 0, 0.4) 0px 4px 40px 8px, rgba(0, 0, 0, 0.8) 0px 0px 0px 0.5px, rgba(255, 255, 255, 0.3) 0px 0.5px 0px 0px inset`
- `rgba(0, 0, 0, 0.03) 0px 7px 3px 0px, rgba(0, 0, 0, 0.25) 0px 4px 4px 0px`
- `rgba(0, 0, 0, 0.5) 0px 0px 0px 2px, rgba(255, 255, 255, 0.19) 0px 0px 14px 0px, rgba(0, 0, 0, 0.2) 0px -1px 0.4px 0px inset, rgb(255, 255, 255) 0px 1px 0.4px 0px inset`

## Components

### Primary button ("Download")

- Fill: #e6e6e6
- Text: #2f3031, 14px at weight 500
- Border: none
- Ring or shadow: `rgba(0, 0, 0, 0.5) 0px 0px 0px 2px, rgba(255, 255, 255, 0.19) 0px 0px 14px 0px, rgba(0, 0, 0, 0.2) 0px -1px 0.4px 0px inset, rgb(255, 255, 255) 0px 1px 0.4px 0px inset`
- Corner: 8px
- Height: 36px, padding 8px 12px

### Card

- Fill: #030304
- Border: 1px solid #1e1e20
- Corner: 12px
- Shadow: `rgba(0, 0, 0, 0.4) 0px 4px 40px 8px, rgba(0, 0, 0, 0.8) 0px 0px 0px 0.5px, rgba(255, 255, 255, 0.3) 0px 0.5px 0px 0px inset`

## Do

- Keep the ground near black and let one hue glow in the artwork.
- Make primary buttons light and slightly raised, like keys.
- Set small technical notes in a monospace face.

## Don't

- Paint the buttons in the brand red.
- Use flat grey boxes: panels are near-black with a fine border and a deep shadow.
- Let secondary text drop below 7:1 on the dark ground.

## CSS variables

```css
:root {
  --color-background: #07080a;
  --color-surface: #1e1e1e;
  --color-text: #ffffff;
  --color-text-muted: #9c9c9d;
  --color-accent: #e6e6e6;
  --color-highlight: #ff6363;
  --color-border: #1a1b1d;
  --font-display: "Inter", "Inter", system-ui, sans-serif;
  --text-display: 64px;
  --weight-display: 600;
  --font-heading: "Inter", "Inter", system-ui, sans-serif;
  --text-heading: 20px;
  --weight-heading: 500;
  --font-subheading: "Inter", "Inter", system-ui, sans-serif;
  --text-subheading: 18px;
  --weight-subheading: 400;
  --font-body: "Inter", "Inter", system-ui, sans-serif;
  --text-body: 20px;
  --weight-body: 500;
  --font-small: "Inter", "Inter", system-ui, sans-serif;
  --text-small: 13px;
  --weight-small: 400;
  --space-1: 2px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 15px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 48px;
  --radius-1: 4px;
  --radius-2: 6px;
  --radius-3: 8px;
  --radius-4: 11px;
  --radius-5: 12px;
  --radius-6: 9999px;
}
```

## Notes for AI coding tools

- Start from the CSS variables above and build components from them, not from new values.
- Use the font substitutes listed. Never embed a commercial or platform-only typeface without a license.
- Keep body text at 4.5:1 contrast or better against its ground.
- These values were measured from the live page at 1440x900; the site may have changed since 2026-10-05.