Near-black crafted launcher: a grey ladder on #07080a, Inter capped at 600, one coral-red accent, and signature physical glass keycaps built from a multi-layer inset+drop shadow.
⚠ native app, site only
Browse Raycast in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
| 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).
| 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.
Inter, "Inter Fallback", sans-serif (--main-font)"JetBrains Mono", Menlo, Monaco, Courier, monospace (+ GeistMono in code)"SF Pro Text" to mimic the native macOS UI#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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.