Raycast

---
version: alpha
name: Raycast — cinematic productivity landing page
description: A near-black landing page combining red diagonal artwork, precise type and richly detailed product demonstrations.
colors:
  primary: "#E6E6E6"
  secondary: "#9C9C9D"
  tertiary: "#FF6363"
  neutral: "#07080A"
  surface: "#111214"
  on-surface: "#FFFFFF"
  on-primary: "#2F3031"
typography:
  headline-display:
    fontFamily: Inter
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.1
  headline-lg:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.2
  headline-md:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 500
    letterSpacing: 0.2px
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    letterSpacing: 0.2px
  label-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 500
    lineHeight: 16px
    letterSpacing: 0.2px
  body-sm:
    fontFamily: GeistMono
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.2px
  headline-mobile:
    fontFamily: Inter
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.1
rounded:
  action: 8px
  compact: 4px
  chat-row: 10px
spacing:
  mobile-gutter: 16px
  action-block: 8px
  action-inline: 12px
components:
  download-action:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.action}"
  technical-caption:
    textColor: "{colors.secondary}"
    typography: "{typography.body-sm}"
---

# Raycast landing-page reference

## Overview

Observed at https://www.raycast.com/ on September 18, 2026, at 1440px desktop and 390px mobile widths. The design presents a productivity launcher as a polished technical tool: a dramatic red-and-black hero leads into detailed interface demonstrations, extension cards, AI workflows, social proof and developer material. This independent reference describes the observed page, not an official brand specification.

## Colors

Keep the page near black with white headings and restrained gray supporting text. The download action is light gray with dark lettering. Red is expressive artwork and accent, not the universal action color. Values above are sampled from computed CSS; the tertiary token is a sampled accent, not a flat substitute for the hero's multitone red artwork. Blue and other hues appear locally within feature illustrations. No error-state palette was inspected.

## Typography

Use Inter for narrative copy and controls, with GeistMono for technical helper text. The desktop hero is 64px/70.4px at weight 600; at 390px it becomes 36px/39.6px. Supporting hero copy changes from 18px to 14px. Small chapter headings are commonly 20px/500, while the AI chapter uses 32px/38.4px. Keep dense application UI distinct from the spacious marketing hierarchy. Font families and listed sizes are measured; unspecified line heights were computed as normal, not reverse-engineered into exact values.

## Layout

At desktop width, use an inset navigation bar and a broad centered content area, approximately 1200px wide. The hero headline occupies a measured 540px region. Diagonal artwork dominates the first screen; the action sits lower with technical requirements and an understated secondary link below. Alternate centered chapter intros with left-aligned product explanation and multi-panel demonstrations. Leave substantial dark space between chapters; exact section spacing was not exhaustively measured.

At 390px, the hero uses 16px gutters and navigation collapses to a menu icon. The desktop download and installation controls are hidden in this viewport, while the keyboard-product link remains. The page width matches the viewport at both tested widths. The extension rail retains horizontal cards; additional breakpoint rules and menu behavior were not tested.

## Elevation & Depth

Layer subtle translucent panels, thin bright edges and soft glow over dark surfaces. Product windows provide depth without bright container fills. Hero artwork is textured and animated; its color and arrangement can differ between captures. Blur and shadow values are visual observations rather than exact tokens.

## Shapes

Use compact rounded-rectangle actions with a measured 8px radius. Technical controls use 4px rounding and chat rows use 10px. Reserve more exaggerated rounding for navigation framing and carousel arrows. Contrast these controlled surfaces with sharp diagonal hero geometry.

## Components

Use a floating navigation frame, centered hero, light download action, monospace helper line, product-window demos, horizontally browsable extension cards, AI conversation previews and a dense grouped footer. Product screenshots carry much of the explanation. Animated and offscreen carousel states are not fully represented by one full-page capture; the static reference must not be interpreted as a complete interaction contract.

## Do's and Don'ts

- Do preserve crisp type contrast on the near-black canvas.
- Do use color inside specific product stories while keeping page structure restrained.
- Do give technical screenshots enough space to remain legible.
- Don't replace nuanced hero artwork with a generic flat red background.
- Don't assume the desktop download action remains visible on mobile.
- Don't copy unmeasured motion, hover or focus behavior as if verified.