What is Raycast's primary brand color?

Raycast has no chromatic brand color in the traditional sense — the universal primary CTA is pure white at #ffffff, paired with black text at #000000. Saturated reds, yellows, greens, and blues appear only inside extension illustrations and category tiles, never on chrome. The one chromatic moment on chrome is a red diagonal-stripe gradient that fades from #ff5757 to #a1131a across the top of the hero band, used once per page maximum.

Does Raycast's design system have a light mode?

No — the system is dark-only by design. The base canvas is pure-near-black at #07080a, with a four-step surface ladder through #0d0d0d, #101111, and #121212 carrying every elevation tier. There is no light variant in the captured surfaces. Depth comes from the surface ladder rather than drop shadows, which the system avoids entirely.

What typography does Raycast use, and what makes it distinctive?

Raycast runs Inter with font-feature-settings 'calt', 'kern', 'liga', 'ss03' enabled site-wide. The ss03 stylistic set swaps in Inter's alternate single-story g, which is the brand's signature typographic detail — without it the chrome reads as plain Inter and loses its voice. The display tier additionally enables ss02 and ss08 and disables standard liga to render the hero wordmark with its distinctive geometric construction. Sizes run from 64px display-xl at weight 600 down to 12px caption-sm at weight 400.

What is Raycast's corner radius vocabulary?

The radius scale clusters tightly between 4 and 16px. Keycaps use 4px (xs), command-palette rows and inline buttons use 6px (sm), standard buttons and inputs use 8px (md), feature and pricing tier cards use 10px (lg), and large hero command-palette mockup containers use 16px (xl). The 9999px full radius is reserved for pill-tabs and avatar circles. Chrome never goes flat at 0px on cards and never exceeds 16px except for fully-rounded pills.

How do I use this DESIGN.md in a React project?

Feed the file to Claude, Cursor, Copilot, or any AI tool that reads structured design tokens. The agent will reproduce Raycast's restraint rather than a generic dark theme — single white CTA, hairline borders, ss03-enabled Inter, four-step surface ladder. You can also reference the tokens directly: every color, type style, radius, and spacing value is a quoted value you can paste into Tailwind config, CSS variables, or your own component library. Critically, enable font-feature-settings 'calt', 'kern', 'liga', 'ss03' on the body element or the type will lose its signature voice.

What's missing from this DESIGN.md spec?

A handful of items documented in the Known Gaps section: mobile screenshots were not captured, so responsive behavior is synthesized from desktop evidence and the breakpoint stack; hover states are not documented by system policy, even though Raycast's in-product command-palette rows have rich hover behavior; the in-product Raycast launcher running on macOS is referenced in marketing screenshots but not documented as a separate UI system; form validation states beyond the focused-input border treatment are absent; and authenticated chrome — account dashboard, billing settings, team management — is not in the captured pages.

Raycast Design System

Raycast's design system as a DESIGN.md file.

About Raycast DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source raycast.com

Productivity & SaaS
Developer Tools & IDEs

Raycast's marketing site reads like an extended product screenshot. The chrome IS the in-product command palette scaled up: pure-near-black canvas at #07080a, hairline 1px borders at #242728, command-palette-style cards with corners between 6 and 16px, and a single white CTA pill anchoring every primary action. The system runs Inter with font-feature-settings "calt", "kern", "liga", "ss03" enabled site-wide — the ss03 stylistic set swaps in Inter's single-story alternate g, which is the brand's signature typographic detail. Without that flag the chrome loses its voice and reads as generic Inter.

This page packages the whole spec into a single DESIGN.md file using the Google Labs format. Inside: 24 color tokens grouped into brand, surface, text, semantic, and gradient bands; 16 typography tokens from a 64px display-xl down to 12px caption-sm; 7 corner radii from 0 to 9999px; 8 spacing tokens including the 96px section rhythm; and 30 components covering buttons, command-palette cards, pricing tiers, store extension cards, keycap glyphs, and the hero stripe band. Every value is quoted and machine-readable.

Feed the file to Claude, Cursor, GitHub Copilot, or any agent that reads structured tokens. The AI will reproduce Raycast's restraint — single white CTA, hairline borders, ss03-enabled Inter, four-step surface ladder — rather than a generic dark-mode shadcn theme. Reference tokens directly in Tailwind config or CSS variables. Raycast is worth studying because it's the rare system where the marketing chrome and the in-product chrome are genuinely the same surface, and the discipline shows.

What makes it distinct

Single dark surface modea 4-step ladder from #07080a canvas through #0d0d0d, #101111, to #121212 carries every elevation tier
White CTA pill at #ffffff is the universal primary actionthere is no second primary color in the entire system
Inter with font-feature-settings ss03 enabled site-widethe alternate single-story g is the brand's signature typographic detail
Hairline 1px borders at #242728 carry every card edgethe system has zero drop shadows
Red diagonal-stripe gradient from #ff5757 to #a1131a appears once per page maximumthe only chromatic moment on chrome

Live at raycast.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

raycast.com

Explore Raycast

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Raycast design system FAQ

Common questions about Raycast's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with Tailwind and shadcn primitives.

Use Raycast in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→