---
site: Raycast - Your shortcut to everything
url: "https://raycast.com"
generated_at: "2026-06-25T08:25:22.082Z"
generator: "designlang@13.0.0"
intent: landing
material: flat
tokens:
  colors:
    primary: "#ff6363"
    secondary: "#8cd6ff"
    accent: "#56c2ff"
    background: "#07080a"
    foreground: "#ffffff"
  typography:
    sans: Inter
    mono: GeistMono
    base: 16
  spacing:
    base: 2
    scale: "[1, 45, 56, 64, 72, 80, 96, 102, 120, 128]"
  radii:
    xs: 2
    sm: 5
    md: 8
    lg: 16
    xl: 19
  shadows:
    sm: "rgb(27, 28, 30) 0px 0px 0px 1px, rgb(7, 8, 10) 0px 0px 0px 1px inset"
    xs: "rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset"
---

# Overview

A **landing** page (heuristic confidence 0.45), dressed in **flat** material.

> "Raycast - Your shortcut to everything"

The author writes in a **neutral** voice; headings tend to be **unknown** case and **tight**.

Reading order detected on the source: `—`.

Source: <https://raycast.com>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#ff6363` | 5 |
| secondary | `#8cd6ff` | 2 |
| accent | `#56c2ff` | 1 |
| background | `#07080a` | — |
| foreground | `#ffffff` | — |

**Neutrals:** `#ffffff` · `#6a6b6c` · `#9c9c9d` · `#434345` · `#e6e6e6`

**Total unique colors detected:** 18.

# Typography

**Families**
- `Inter` · 2247 uses
- `SF Pro Text` · 525 uses
- `SF Pro` · 215 uses
- `GeistMono` · 31 uses

**Body size:** `16px` / line-height `18.4px`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `64px` | `600` | `70.4px` |
| h2 | `56px` | `400` | `65.52px` |
| h3 | `24px` | `600` | `28px` |
| h4 | `20px` | `500` | `normal` |

# Layout

**Spacing base:** `2px` increments.
**Scale:** `1px` · `45px` · `56px` · `64px` · `72px` · `80px` · `96px` · `102px` · `120px` · `128px`

**Layout primitives:** 334 grid containers · 839 flex containers.

**Breakpoints:** `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px`

# Elevation and Depth

**Shadow scale**
- `sm` — `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`
- `sm` — `rgb(27, 28, 30) 0px 0px 0px 1px, rgb(7, 8, 10) 0px 0px 0px 1px inset`
- `xs` — `rgba(0, 0, 0, 0.2) 0px 0px 1px 0px, rgba(0, 0, 0, 0.17) 0px 2px 2px 0px, rgba(0, 0, 0, 0.1) 0px 4px 3px 0px, rgba(0, 0, 0, 0.03) 0px 7px 3px 0px, rgba(0, 0, 0, 0) 0px 12px 3px 0px, rgba(0, 0, 0, 0.25) 0px 4px 4px 0px, rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.25) 0px 4px 4px 0px`
- `xs` — `rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset`
- `xs` — `rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset, rgba(7, 13, 79, 0.05) 0px 0px 20px 3px, rgba(7, 13, 79, 0.05) 0px 0px 40px 20px, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset`
- `xs` — `rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.25) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset`

**Z-index layers:** 6

# Shapes

**Radius scale**
- `xs` — `2px`
- `sm` — `5px`
- `md` — `8px`
- `lg` — `11px`
- `lg` — `16px`
- `xl` — `19px`

# Components

**Detected patterns:** `buttons` · `cards` · `inputs` · `links` · `navigation` · `footer` · `dropdowns` · `tables` · `badges` · `avatars` · `tooltips` · `switches`

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| card | — | — | 44 |
| button | — | — | 14 |

# Do's and Don'ts

**Do's**
- Use `download`, `install`, `send` as the primary verbs in CTAs — these dominate the source.
- Write headings in **unknown** case, **tight** length.
- Address the reader with the pronoun posture **third-person**.
- Stay inside the **flat** material — match shadow and radius habits.

**Don'ts**
- Don't 4 font families — consider limiting to 2 (heading + body).
- Don't 32 unique shadows — consider a 3-level elevation scale (sm/md/lg).
- Don't 9 !important rules — prefer specificity over overrides.
- Don't 75% of css is unused — consider purging.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v13.0.0 from <https://raycast.com>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._