CURATED · OPEN · FREE

Raycast

A powerful, AI-native command palette and productivity launcher.

01

Identity DNA

A high-performance command center for your operating system.

02

Color

Extreme high-contrast dark mode with deep blacks, crisp white text, and a singular, aggressive red accent in the hero.

03

Typography

humanist-sans · geometric-mono

• display56px · 500
• h232px · 500
• body16px · 400
• caption13px · 500

Use GeistMono for technical specifications and version numbers. · Maintain tight letter spacing (-1px) for large display text. · Body text uses regular weight (400) for readability on dark backgrounds.

04

Spacing

Consistent 4px grid, prioritizing generous white space to balance the dense dark UI.

05

Surfaces

Subtle 1px solid borders with rgba(255, 255, 255, 0.1) or dark grays.

rgba(0, 0, 0, 0.4) 0px 1.5px 0.5px 2.5px · rgb(27, 28, 30) 0px 0px 0px 1px · rgb(7, 8, 10) 0px 0px 0px 1px inset · rgba(255, 255, 255, 0.2) 0px 1px 1px 1px inset · rgba(215, 201, 175, 0.05) 0px 0px 20px 5px

06

Layout

Centered hero with a full-width atmospheric background, followed by structured content blocks.

07

Motion & Interaction

Smooth transitions for hover states (opacity, box-shadow, transform). · Subtle opacity fades for content appearance.

Buttons and interactive elements change opacity or box-shadow with a 0.2s transition. · Subtle transform or scale effect.

08

Components

• button Primary buttons are white with black text and high border-radius (pill), secondary buttons are outlined or ghost.
• card Dark, subtly bordered containers with inset shadows, often housing extensions or feature previews.
• chip Small, pill-shaped tags with dark backgrounds and subtle borders, used for feature labels.
• input Not visible in screenshot, but inferred as dark, recessed fields with inset shadows.
• hero Full-viewport hero with a striking diagonal light beam effect and centered, large typography.

09

Voice & Don'ts

• Tone Confident, concise, and slightly technical.
• Headlines Short, punchy, and benefit-driven (e.g., 'Your shortcut to everything.').
• CTAs Direct and action-oriented (e.g., 'Download for Mac', 'Try the new Raycast').

• Don't use a light theme — screenshot shows a deep, near-black (#0D0D0D) background.
• Don't use rounded, bubbly UI — screenshot shows more squared-off, refined border-radius (6-12px).
• Don't use multiple bright accent colors — screenshot shows a singular red accent only in the hero graphic.
• Don't use playful, handwritten, or script fonts — screenshot uses clean humanist-sans and geometric-mono.
• Don't use heavy drop shadows — screenshot relies on subtle inset shadows and thin borders for depth.
• Don't center-align all body text — screenshot shows left-aligned feature text blocks.
• Avoid: Avoid overly casual or playful language.
• Avoid: Avoid cluttered or noisy layouts.
• Avoid: Avoid bright, saturated colors outside the hero.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko