# Raycast — DESIGN.md

A dark, keyboard-first launcher site where the product itself, in animated mockups, carries the page.

Independent reference guide from browser captures and computed styles. Not an official brand guide. Values describe the captured desktop states; responsive rules below are implementation recommendations.

Captured: 2026-09-24

## Agent task
Build an original interface using this visual language. Inspect the existing stack and conventions first. Use the included screenshots to understand hierarchy, composition and density. Keep your own branding and content.

## Font
Observed family: **Inter** (with JetBrains Mono and GeistMono for eyebrows and small print). A family name is not a bundled font licence. Use an available, licensed installation or a system sans-serif fallback.

## Marketing — Dark showcase with red light

### Observed palette
- Canvas: `#07080a`
- Primary text: `#ffffff`
- Secondary heading text: `#6a6b6c`
- Nav link text: `#9c9c9d`
- Accent (eyebrows, links): `#ff6363`
- Light button fill: `#e6e6e6`
- Light button label: `#2f3031`
- Bento card fill: `rgba(255, 255, 255, 0.02)`

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Hero heading | 64px / 70.4px | 600 | normal |
| Feature headline | 56px / 65.52px | 400 | 0.2px |
| Price | 64px / 64px | 600 | 0.3px |
| Section heading (two-tone) | 20px / normal | 500 | 0.2px |
| Hero lead | 18px / normal | 400 | 0.2px |
| Bento description | 15px / 22.5px | 400 | normal |
| Eyebrow (JetBrains Mono, uppercase) | 12px / 16px | 500 | 1.44px |
| Nav link and button label | 14px / 16px | 500 | 0.2px |

### Layout & hierarchy
- Floating navbar: a 92px fixed container with 16px inset holding a rounded, bordered dark bar; links centred, Log in and a light Download button on the right.
- Sections are centred and short: a 20px heading in white with a grey second line, then a large app mockup or a bento grid (30px radius cards, 24px padding, about 1020px wide).
- Pricing uses three plan cards with the Pro card raised, then a full-width comparison table; long pages close on a red light motif above a six-column footer.

### Components & behavior
- Primary action: light #e6e6e6 fill, #2f3031 14px / 500 label, 8px radius, 8px / 12px padding, 36px high, often with an Apple icon.
- Eyebrow labels in red JetBrains Mono caps above headings (for example "AI AGENT").
- Live mockups of the macOS app (launcher, AI chat, clipboard history) animate through scripted states.
- Monospace (GeistMono 12px) for small print such as "macOS Tahoe and Apple Silicon required".

## Product — Dark store and docs

### Observed palette
- Canvas: `#07080a`
- Primary text: `#ffffff`
- Secondary text: `#9c9c9d`
- Muted text: `#6a6b6c`
- Card border: `rgba(255, 255, 255, 0.06)`
- Search field fill: `#0c0d0f`
- Search field border: `#2f3031`
- Accent: `#ff6363`
- Version badge fill: `rgba(255, 97, 97, 0.15)`
- Docs canvas (GitBook): `#1d1d1d`

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Store title | 80px / 86px | 600 | 1.2px |
| Changelog title | 52px / 55.25px | 600 | 0.52px |
| Extension name (detail) | 20px / 30px | 600 | normal |
| List heading | 20px / 23px | 500 | normal |
| Card title | 16px / 18.4px | 600 | normal |
| Card description and search text | 15px / 17.25px | 400 | normal |
| Changelog body | 16px / 25.6px | 400 | 0.32px |
| Tab label | 13px / 20px | 600 | normal |

### Layout & hierarchy
- Store catalogue: a two-column grid of outlined cards (12px radius, 32px padding, 1px rgba(255,255,255,0.06) border) under a tab row and a search field.
- Extension detail: a header row (icon, name, meta, install actions) above pill tabs, with the main column on the left and Contributors, compatibility and categories in a right rail.
- Search is a centred command palette over a blurred, dimmed page, grouped under small section labels, the selected row showing a return-key hint.

### Components & behavior
- Install Extension: light #e6e6e6 button, 8px radius, 40px high, paired with a dark chevron button that opens Copy Link / Get Install Button.
- Small Install on cards: 36px high, 8px radius, subtle white-alpha gradient fill.
- Pill tabs: 9999px radius, 13px / 600; the active tab has a grey radial-gradient fill and a 1px rgba(255,255,255,0.1) border.
- Modal dialogs (Get Install Button) sit on a blurred backdrop with a round close button.

## Implementation recommendations
- Use your own name, logo, copy and sample data. Recreate the visual principles and interaction structure.
- Use semantic HTML, visible focus states, labelled controls and accessible contrast; check grey-on-near-black text against contrast targets.
- Recommended: use a 4px spacing base, collapse rails on small screens, stack grids and allow tables to scroll.
- Recommended: implement loading, validation, error, success, empty and disabled states; do not infer unobserved backend behavior.
- Use the supplied font only when available and appropriately licensed; otherwise use a system sans-serif fallback.
- Treat desktop measurements as reference values, not a complete responsive specification.

## Interaction inventory
- Store extension list: The Store scrolled to its catalogue: All Extensions / Recently Added / Most Popular tabs, a platform filter (All, macOS, Windows) and a search field, then a two-column grid of outlined extension cards with icon, name, small Install button, description and a meta row (author, command count, install count, macOS only where relevant). Screenshot: `captures/raycast-product-store-list.jpg`.
- Search palette with results: The Store search palette with "color" typed: nine results, each an icon, name and truncated description, the first selected with a return-key hint. Clicking the dimmed backdrop closes it. Screenshot: `captures/raycast-product-search.jpg`.
- Category page: Productivity category: a centred title and subtitle, then a "Featured Productivity Tools" row of three large cards (1Password, Arc, ChatGPT) with centred icon, author and an "Install Extension" button. The full category list sits further down (not in this viewport). Screenshot: `captures/raycast-product-category.jpg`.
- Extension version history: The Linear extension page with the Version History tab selected: a Versions count badge, then dated release entries with bullet notes, and the Contributors list on the right. Same page as the flow detail step, different tab. Screenshot: `captures/raycast-product-extension.jpg`.
- Extension commands: The Commands tab: a count badge and a list of commands (Create Issue, Search Issues, My Issues, Created Issues and more), each a name with a one-line description, separated by hairlines. Screenshot: `captures/raycast-product-commands.jpg`.
- App changelog: The macOS changelog: a large "Changelog" title with a platform switcher (macOS, Windows, iOS, macOS V1), a red version badge and date in a left column, and release notes with a dark hero image, body copy and red inline links, including "API changelog". Screenshot: `captures/raycast-product-changelog.jpg`.
- Developer docs changelog: developers.raycast.com (GitBook): a dark sidebar of guides and API reference with Changelog active in red, the changelog article with version headings and code-formatted API names, and an On this page index on the right. The docs cookie banner was declined before capture. Screenshot: `captures/raycast-product-docs.jpg`.
- Developer docs introduction: The docs introduction page: "Introduction" title, a short lead, a purple gradient image of a raycast-api.tsx code window, and the sidebar scrolled to the Misc group so Changelog is visible. Screenshot: `captures/raycast-product-docs-intro.jpg`.

## Avoid
- Do not apply the 64–80px display scale to the dense store lists and docs.
- Do not present sampled or unmeasured values as exact; hero lighting and mockup colours are animated and were not measured.
- Do not treat screenshots as editable components or original source code.
- Do not assume uncaptured hover states, mobile layouts, signed-in behavior, the desktop app or the install hand-off.

## Reference pages
- Homepage: https://www.raycast.com/
- Pricing: https://www.raycast.com/pricing
- Raycast AI: https://www.raycast.com/core-features/ai

## Capture scope
Logged-out desktop web journey through the Store: home, Store, search palette, results, the Linear extension, its more-actions menu and Get Install Button dialog, and the author page. Install Extension hands off to the Raycast desktop app through a raycast:// link, so the install itself, the desktop app and every signed-in screen are not captured (web only). Install counts, featured extensions and changelog entries change over time.

## Format inspiration
- https://github.com/voltagent/awesome-design-md
- https://getdesign.md/

The structure is inspired by these resources. The guide text and values come from this independent capture pass. No proprietary source code or font files are included.