# Raycast: design reference

> Glossy hardware-like hero, keyboard-first narrative and a store that reads like a product catalogue. A landing page from Arche Directory, a hand-picked reference library of carefully made websites.

- Website: https://www.raycast.com
- On Arche: https://arche.directory/sites/raycast
- First screen: https://media.arche.directory/shots/raycast.webp?v=5651ee1e09
- Full page: https://media.arche.directory/shots/raycast-full.webp?v=685fdda09c

## Design notes

Raycast is a dark, colourful productivity landing page. Typefaces detected: Inter. Headings and text share a sans-serif voice. The first screen is a dark page built around near-black (#080A0C), with saturated colour. It is built with Next.js and uses WebGL graphics. It opens with the line “Your shortcut to everything”.

## Facts

- Category: Landing page
- Industry: Productivity, Developer tools
- Style: Dark, Colourful
- Built with: Next.js
- Technique: WebGL
- Typefaces: Inter
- Dominant colour: #080A0C (dark page)
- Opening line: “Your shortcut to everything.”

## How to use it

Use Raycast as a starting point, not a template. Learn from what makes it work (its type scale, spacing, density, colour temperature and how much moves), mix in other references and your own brand and ideas, and build something recognisably yours with your own name, copy and images. Do not copy its text, logo, images or exact layout; the site belongs to its owners.

## Similar references

- [Linear](https://arche.directory/sites/linear.md)
- [Hermes Agent](https://arche.directory/sites/hermes-agent.md)
- [Neon Serverless Postgres](https://arche.directory/sites/neon.md)

## More

- Arche MCP (https://arche.directory/mcp) gives an agent this site measured on the live page: its design system as CSS variables or Tailwind, its animations as CSS / GSAP / Motion code, and its sections. $7/month, free during early access.
- How to give an AI a website reference: https://arche.directory/guides/website-references-for-ai