# Raycast — Marketing Site Design Spec

> Source: raycast.com (live DOM, computed styles + full CSS token system), 2026-07-09 (desktop 1512px).
> Coverage: marketing home + nav + hero + embedded product previews. App: n/a — Raycast is a native macOS/Windows app, no web product (site only). Responsive: breakpoints from container tokens; mobile rendering not verified.

## 1. Visual Theme & Atmosphere

Near-black, high-craft developer aesthetic that treats the page like an extension of the Raycast launcher itself. The canvas is an almost pure-black `#07080a`; structure is carried by a deep neutral grey ladder and ultra-low-alpha white hairlines rather than shadows on flat elements. The signature move is the *physical keycap / command-bar* treatment — translucent surfaces lifted off the page with multi-layer inset+drop shadows that read as glass with a top light and a soft cast below, echoing the macOS spotlight window. Color is almost entirely grayscale; a coral-red `#ff6363` is the one brand hue, with blue/green/yellow reserved for status. Inter throughout, weight capped at 600. Feels: dark, crafted, tactile, precise.

## 2. Color Palette & Roles

### Neutrals (grey ladder — dark theme)
| Token | Hex | Role / usage |
|---|---|---|
| grey-900 / bg | `#07080a` | Page background (`--background`) |
| grey-800 | `#0c0d0f` | Deep panel |
| grey-700 / bg-100 | `#101111` | Raised panels, cards |
| grey-600 / bg-200 | `#18191a` | Higher panels, button fg color |
| grey-500 | `#2f3031` | Hairline-ish dividers |
| bg-300 | `#313133` | Inset surfaces, kbd |
| grey-400 | `#434345` | Muted chip bg |
| bg-400 | `#494b4d` | Lightest raised grey |
| grey-300 / fg-400 | `#5e6366`–`#6a6b6c` | Tertiary text |
| fg-300 | `#78787c` | Muted text |
| grey-200 | `#9c9c9d` | Secondary text |
| grey-100 | `#cdcece` | Bright secondary |
| fg-200 | `#c2c7ca` | Subhead text |
| grey-50 | `#e6e6e6` | Near-white labels |
| fg / white | `#f4f4f6` / `#ffffff` | Primary text, headings |
| border | `#24282a` | Solid hairline (`hsl(195,5%,15%)`) |

White-alpha borders do most structural work: `rgba(255,255,255,.06/.10/.20)`.

### Accent + status
| Token | Value | Role |
|---|---|---|
| red (brand) | `#ff6363` (`hsl(0,100%,69%)`) | Logo, primary accent, highlights |
| blue | `#56c2ff` (`hsl(202,100%,67%)`) | Info / links, `-transparent` = 15% wash |
| green | `#5cd398` (`hsl(151,59%,59%)`) | Success |
| yellow | `#ffc533` (`hsl(43,100%,60%)`) | Warning |
| button-bg | `rgba(255,255,255,.815)` → `#fff` hover | Primary CTA fill (translucent white) |

Rule: chrome is grayscale on near-black; coral-red is the only brand hue. Blue/green/yellow appear only as status, each with a 15%-alpha transparent variant.

## 3. Typography Rules

- Main stack: `Inter, "Inter Fallback", sans-serif` (`--main-font`)
- Mono stack: `"JetBrains Mono", Menlo, Monaco, Courier, monospace` (+ GeistMono in code)
- Embedded launcher/app previews use `"SF Pro Text"` to mimic the native macOS UI
- Body: 18px / 400 / `#ffffff`, letter-spacing 0.2px

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 64 / 70.4 (1.1) | 600 | normal |
| Section (h3) | 24 | 500 | 0.2px |
| Card title (h2) | 20 | 500 | 0.2px |
| Body | 18 | 400 | 0.2px |
| Nav / links | 16 | 400 | normal |

Weight tops out at 600; body copy carries a subtle +0.2px tracking. No serif, no second display family.

## 4. Component Stylings

### Buttons
- **Primary (CTA)**: translucent white bg `rgba(255,255,255,.815)` → solid `#fff` on hover, text `#18191a`, radius 8–11px, pill on nav. Layered "raised key" shadow (see §6).
- **Ghost / nav**: transparent, text `#e6e6e6`/muted, radius 8px, hover raises white-alpha fill.
- **Download (nav)**: dark keycap — grey fill with the signature multi-layer inset+drop shadow and an Apple glyph.

### Keycaps / command bar (signature)
- Rounded 6–11px tiles on `bg-200/300`, rendered with the multi-layer shadow (top inset highlight `rgba(255,255,255,.2)`, bottom inset shade, hard 1px black ring, soft drop) so they look like physical keys. Used for ⌘K hints, store items, hero command bar.

### Cards / panels
- bg `#101111`/`#18191a`, border 1px `rgba(255,255,255,.06–.10)` (or solid ring `rgb(27,28,30)`), radius 12–16px. Product-preview cards float above the page with a faint warm glow `rgba(215,201,175,.05) 0 0 20px 5px`.

### Inputs / kbd
- Dark inset fields on `bg-200`, radius 6–8px, mono for shortcuts, hairline white-alpha border.

## 5. Layout Principles

- Container widths: default `1204px`, sm `1064`, lg `1280`, xs `746`; centered.
- Navbar: height `76px`, 16px top padding, floating rounded bar with hairline border, logo left, center links, right Log in + Download keycap.
- Spacing scale (8px base): 4/8/12/16/20/24/32/40/48/56/64/80/96/112/168/224; grid gap 32px.
- Hero: centered 64px display → 18px muted subhead → animated command-bar demo; product previews sit in floating glass cards.

## 6. Depth & Elevation

- Radius scale: xs `4`, sm `6`, normal `8`, md `12`, lg `16`, xl `20`, xxl `24`, full `100%`; hero keycaps often `11px`.
- **Signature keycap shadow** (verbatim): `rgba(0,0,0,.4) 0 1.5px .5px 2.5px, rgb(0,0,0) 0 0 .5px 1px, rgba(0,0,0,.25) 0 2px 1px 1px inset, rgba(255,255,255,.2) 0 1px 1px 1px inset`.
- Panel ring: `rgb(27,28,30) 0 0 0 1px, rgb(7,8,10) 0 0 0 1px inset`.
- Warm ambient glow on previews: `rgba(215,201,175,.05) 0 0 20px 5px`.
- Flat text/containers use white-alpha hairlines, not shadows; shadows are reserved for lifted "physical" elements.

## 7. Motion

- Spring-based motion — a custom `linear()` spring easing (`--spring-1`, ~40-stop curve that overshoots to ~1.04 then settles) drives entrances and hover lifts, giving a bouncy tactile feel rather than linear ease.
- Command-bar and store previews animate content (typed queries, result lists) inside static glass frames.
- Micro-transitions on color/bg/border for hover; keycaps depress on press. Framer Motion-style springs; no heavy scroll-jacking observed.

## 8. Backgrounds, Effects & WebGL

- Flat near-black `#07080a` canvas; no background video.
- Floating product previews use soft warm ambient glows and the layered keycap shadows to sell depth.
- `backdrop-filter` blur on the floating nav bar and translucent surfaces (translucent white button, glass cards).
- No large gradients or WebGL on the marketing home — depth comes from shadow craft, not color washes.

## 9. Do's and Don'ts

### Do
- Use near-black `#07080a` canvas with the grey ladder (`#101111`/`#18191a`/`#313133`) for raised surfaces.
- Reserve coral-red `#ff6363` as the single brand accent; use blue/green/yellow only for status, each with a 15% transparent variant.
- Render keys, CTAs and command bars as physical glass tiles using the multi-layer inset+drop keycap shadow.
- Keep Inter everywhere, weight ≤600, body 18px with +0.2px tracking; use SF Pro only inside launcher mockups.
- Structure flat containers with white-alpha hairlines (.06–.10), not shadows.
- Radius 6–8px on controls/keys, 12–16px on cards; container 1204px.
- Use spring easing for entrances and hover lifts.

### Don't
- Don't use font weight 700+; Inter tops out at 600.
- Don't introduce a second brand color beyond coral-red; keep blue/green/yellow as status only.
- Don't flatten the keycaps/CTAs — the layered shadow is the signature; a single flat drop shadow looks wrong.
- Don't add large color-gradient backgrounds; the canvas stays flat near-black.
- Don't use linear/ease-in-out where a spring is expected.

## 10. Responsive Behavior

- Container tokens: xs 746 / sm 1064 / default 1204 / lg 1280.
- Floating nav collapses to a menu on mobile; hero display scales down.
- Mobile rendering not verified — captured at desktop 1512px only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#07080a` · Surface `#101111`/`#18191a` · Text `#ffffff` · Muted `#9c9c9d` · Border `rgba(255,255,255,.10)` · Accent `#ff6363`
- Font: Inter (mono: JetBrains Mono) · Body: 18px (+0.2px) · Radius: 8px control / 12–16px card · Navbar 76px · Container 1204px
- Primary CTA: bg `rgba(255,255,255,.815)`→`#fff`, text `#18191a` · Keycap shadow: `rgba(0,0,0,.4) 0 1.5px .5px 2.5px, rgb(0,0,0) 0 0 .5px 1px, rgba(0,0,0,.25) 0 2px 1px 1px inset, rgba(255,255,255,.2) 0 1px 1px 1px inset`

<raycast_design_language>
Use the Raycast design language: near-black #07080a canvas with a neutral grey ladder (#101111, #18191a, #313133) for raised surfaces, near-white #ffffff text, muted #9c9c9d. Inter everywhere (mono: JetBrains Mono), weight capped at 600; body 18px with +0.2px tracking; 64px/1.1 display. A single coral-red #ff6363 brand accent; blue #56c2ff, green #5cd398, yellow #ffc533 used only for status (each with a 15% transparent wash). The signature is physical glass keycaps and command bars: rounded 6–11px tiles lifted with a multi-layer shadow — rgba(0,0,0,.4) 0 1.5px .5px 2.5px, rgb(0,0,0) 0 0 .5px 1px, plus a rgba(255,255,255,.2) top-inset highlight and rgba(0,0,0,.25) bottom-inset shade. Flat containers use white-alpha hairlines (.06–.10), not shadows. Primary CTA is translucent white rgba(255,255,255,.815) going solid on hover with #18191a text. Cards radius 12–16px, controls 8px, container 1204px, floating 76px nav with backdrop blur. Motion is spring-based (an overshooting linear() spring) for entrances and hover lifts. Feels: dark, crafted, tactile, precise. Avoid: font weights 700+, a second brand color, flattening the keycap/CTA shadow into a plain drop shadow, large gradient backgrounds, or linear easing where a spring belongs.
</raycast_design_language>