Raycast Design System

Overview

Raycast's marketing site reads like an extended product screenshot. The chrome IS the in-product command palette at marketing scale: pure-near-black canvas ({colors.canvas} — "#07080a"), hairline 1px borders ({colors.hairline} — "#242728"), command-palette-style cards with rounded corners between 6 and 16px, Inter typography with the ss03 stylistic set enabled site-wide (a single character — the alternate g — that gives Raycast's typography its signature subtle distinction), a single white CTA pill that anchors every primary action, and small splashes of saturated accent reserved for category illustrations.

The system has effectively one surface mode — dark — with a faint four-step surface ladder ({colors.canvas} → {colors.surface} → {colors.surface-elevated} → {colors.surface-card}) carrying cards, in-card panels, and key-cap glyph backgrounds. The signature decorative moment is a red diagonal-stripe gradient band across the very top of the home page hero, used as a launch-banner motif behind the headline — the only time saturated red appears on chrome. Beyond that single moment, color in the chrome is reserved for category accents inside extension and feature illustrations: Hacker News yellow ("#ffc533"), Slack red ("#ff6161"), Linear green ("#59d499"), info blue ("#57c1ff").

The design philosophy is "the marketing page is the product." Section rhythm is generous ({spacing.section} 96px) but the page never breaks tonal continuity — the whole site sits in one continuous dark mode, full-bleed product UI screenshots show Raycast's actual command palette, store, and AI chat surfaces, and the typography ligature settings (ss03) are inherited from the in-product app's text rendering.

Key Characteristics:

• Single dark surface mode with a 4-step surface ladder: {colors.canvas} ("#07080a") → {colors.surface} ("#0d0d0d") → {colors.surface-elevated} ("#101111") → {colors.surface-card} ("#121212")
• White CTA pill ({colors.primary} — "#ffffff") is the universal primary action; everything else is monochrome dark
• Inter typography with font-feature-settings: "calt", "kern", "liga", "ss03" enabled site-wide — the ss03 alternate g is part of the brand voice
• Hairline 1px borders ({colors.hairline} — "#242728") carry every card edge; there are no drop shadows in the system
• Multi-radius card vocabulary: {rounded.sm} (6px) for keycaps, {rounded.md} (8px) for buttons and small cards, {rounded.lg} (10px) for feature cards, {rounded.xl} (16px) for hero command-palette mockup containers
• Saturated category accents appear only inside extension tile imagery — never on chrome
• Signature red diagonal-stripe gradient band at the very top of the hero — three angled stripes from {colors.hero-stripe-start} ("#ff5757") to {colors.hero-stripe-end} ("#a1131a"), used once per page maximum

Known Gaps

• Mobile screenshots not captured — responsive behavior synthesizes Raycast's mobile pattern (hamburger drawer, single-column grid, hero downscale) from desktop evidence and the breakpoint stack.
• Hover states not documented by system policy. Raycast's in-product app has rich hover behavior on command-palette rows that this document doesn't capture.
• In-product app chrome (the actual Raycast launcher running on macOS) is referenced in marketing screenshots but not documented as a separate UI system here. The marketing site is documented; the in-product app surface is its own design system.
• Dark mode is the only mode — no light variant exists in the captured surfaces.
• Form validation states beyond the focused-input border treatment are not present in the captured surfaces.
• Authenticated chrome (account dashboard, billing settings, team management) not in the captured pages.