Design System: Raycast

1. Visual Theme & Atmosphere

Raycast's marketing site feels like the dark interior of a precision instrument a Swiss watch case carved from obsidian. The background isn't just dark, it's an almost-black blue-tint (#07080a) that creates a sense of being inside a macOS native application rather than a website. Every surface, every border, every shadow is calibrated to evoke the feeling of a high-performance desktop utility: fast, minimal, trustworthy.

The signature move is the layered shadow system borrowed from macOS window chrome: multi-layer box-shadows with inset highlights that simulate physical depth, as if cards and buttons are actual pressed or raised glass elements on a dark desk. Combined with Raycast Red (#FF6363) deployed almost exclusively in the hero's iconic diagonal stripe pattern the palette creates a brand that reads as "powerful tool with personality." The red doesn't dominate; it punctuates.

Inter is used everywhere headings, body, buttons, captions with extensive OpenType features (calt, kern, liga, ss03) creating a consistent, readable typographic voice. The positive letter-spacing (0.2px0.4px on body text) is unusual for a dark UI and gives the text an airy, breathable quality that counterbalances the dense, dark surfaces. GeistMono appears for code elements, reinforcing the developer-tool identity.

Key Characteristics:

• Near-black blue-tinted background (#07080a) not pure black, subtly blue-shifted
• macOS-native shadow system with multi-layer inset highlights simulating physical depth
• Raycast Red (#FF6363) as a punctuation color hero stripes, not pervasive
• Inter with positive letter-spacing (0.2px) for an airy, readable dark-mode experience
• Radix UI component primitives powering the interaction layer
• Subtle rgba white borders (0.060.1 opacity) for containment on dark surfaces
• Keyboard shortcut styling with gradient key caps and heavy shadows