# DESIGN.md · Raycast (WR-005)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Website Reference · Category: I. Website References
- Platforms: Web, macOS, Windows
- Color theme: Monochrome dark · Layout pattern: Centered hero · Mood: Glossy, premium, bold
- License / terms: Screenshots: fair-use reference captures; site content © Raycast
- Industry: Productivity / Devtools
- Patterns: Product-as-hero, Pricing table, Sign-up entry

Dark site with glossy red 3D hero art; pricing tiers with toggle; extension Store browsing as the key public flow.

### Analysis (ours)
Raycast (our capture) runs every page on a near-black canvas (#07080A, ESTIMATED) with a rounded, translucent floating nav bar and a single light ‘Download’ button carrying the Apple logo. The hero is full-bleed abstract artwork of diagonal red light bars behind a centered white headline, a two-line description, a ‘Download for Mac’ button and small monospace notes on system requirements and Homebrew install. Pricing uses dark cards with a Monthly/Yearly segmented toggle (with a ‘-20%’ chip); the middle Pro card is raised and gets the only light button, and nested segmented controls inside cards switch sub-tiers (Pro/Plus/Max) without adding columns. The Store page reuses the hero formula: floating app-icon tiles fading toward the edges, a centered ‘Store’ title and a search field with a keyboard-shortcut hint. Lesson: one dramatic art direction plus a repeated centered template makes every page instantly recognizable. Pitfall: gray body text in long feature lists on dark cards gets small and dim.

### Best practices (ours)
- Repeat one hero template (art + centered title + one action) across pages for instant recognition.
- Use segmented controls inside a pricing card to show sub-tiers instead of adding columns.
- Show keyboard-shortcut hints in search fields for keyboard-first products.
- Raise and lighten the recommended pricing card rather than recoloring it.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#07080A` ~37%
- `#A6636D` ~8%
- `#33171C` ~7%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
- Top nav
- 3D hero art
- Dark pricing cards
- Extension store grid

## Layout rules
- Observed layout pattern: **Centered hero** (from our captures).
- Public flow (captured, stopped before any form submission): Landing (https://www.raycast.com/) → Pricing (https://www.raycast.com/pricing) → Store (https://www.raycast.com/store)

## Do’s and don’ts
- Do: Use a near-black canvas with high-contrast white text and at most one accent.
- Don’t: Don’t add multiple saturated accents or light-mode shadows.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://www.raycast.com
- Capture: https://www.raycast.com/
- Capture: https://www.raycast.com/pricing
- Capture: https://www.raycast.com/store
- Library entry: https://design-library-byt.pages.dev/entry/WR-005