Raycast

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 three-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, Slack red, Linear green, info blue.

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 / 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 ({colors.accent-yellow} for Hacker News, {colors.accent-red} for Slack/Apple, {colors.accent-green} for productivity tools, {colors.accent-blue} for info) 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 in {colors.hero-stripe-start} → {colors.hero-stripe-end}, used once per page maximum

Colors

Source pages: / (home), /store (extension marketplace), /core-features/ai (feature page), /pricing (plan tiers), /thomas/hacker-news (single extension detail). The chrome palette is identical across all five pages — the dark surface ladder, hairline borders, white CTA, and ss03-enabled typography are the same on every page.

Brand & Accent

• White ({colors.primary} — #ffffff): the universal primary CTA pill background. "Download" / "Install Extension" / "Get Pro" — every primary action carries it.
• White Pressed ({colors.primary-pressed} — #e8e8e8): pressed-state for the primary pill — a single notch dimmer.
• On Primary ({colors.on-primary} — #000000): pure black text on the white CTA — the only place black appears as text in the system.

Surface

• Canvas ({colors.canvas} — #07080a): pure-near-black page background. The dominant surface across every page.
• Surface ({colors.surface} — #0d0d0d): card and elevated panel background — one notch lighter than canvas.
• Surface Elevated ({colors.surface-elevated} — #101111): button-tertiary fill, text-input fill, store-search-bar fill, pill-tab-active fill.
• Surface Card ({colors.surface-card} — #121212): app-icon-tile background, keycap fill, command-palette row hover.
• Button FG (in-card) ({colors.button-fg} — #18191a): rare deep-card variant used inside featured pricing tier card backgrounds.
• Hairline ({colors.hairline} — #242728): the universal 1px card border. Carries every card edge across every page.
• Hairline Soft ({colors.hairline-soft} — rgba(255,255,255,0.08)): even fainter border on translucent over-image overlays.
• Hairline Strong ({colors.hairline-strong} — rgba(255,255,255,0.16)): stronger 1px divider where a regular hairline reads as too soft.

Text

• Ink ({colors.ink} — #f4f4f6): primary headlines on dark canvas. Slightly off-white for tonal coherence with the near-black background.
• Body ({colors.body} — #cdcdcd): default paragraph text and inline-link color.
• Charcoal ({colors.charcoal} — #d3d3d4): subtly brighter body where ink reads too soft.
• Mute ({colors.mute} — #9c9c9d): metadata, footer link text, secondary captions.
• Ash ({colors.ash} — #6a6b6c): disabled-state text, lowest-emphasis utility.
• Stone ({colors.stone} — #434345): least-emphasis caption text and disabled icon color.
• On Dark ({colors.on-dark} — #ffffff): interactive-state primary text (button label, focused tab).
• On Dark Mute ({colors.on-dark-mute} — rgba(255,255,255,0.72)): translucent secondary text on dark surfaces.

Semantic

• Accent Blue ({colors.accent-blue} — #57c1ff) + Soft ({colors.accent-blue-soft} — rgba(87,193,255,0.15)): info and informational badge — used inside feature illustrations and the rare "New" pill.
• Accent Red ({colors.accent-red} — #ff6161) + Soft ({colors.accent-red-soft} — rgba(255,97,97,0.15)): destructive/error indicator + Slack/Apple category accent in extension illustrations.
• Accent Green ({colors.accent-green} — #59d499) + Soft ({colors.accent-green-soft} — rgba(89,212,153,0.15)): success state + productivity category accent in extension illustrations.
• Accent Yellow ({colors.accent-yellow} — #ffc533) + Soft ({colors.accent-yellow-soft} — rgba(255,197,51,0.15)): "warning" semantic + the Hacker News orange-yellow that appears as the most prominent accent illustration on the home page hero.

Brand Gradient

• Hero Stripe Gradient — three diagonal red stripes layered across the very top of the home page hero, fading from {colors.hero-stripe-start} (#ff5757) to {colors.hero-stripe-end} (#a1131a). The system's only chromatic gradient on chrome — used once per page maximum and reserved for hero launch-banner moments.
• Keycap Gradient — the small key-glyph background uses a subtle linear-gradient from {colors.key-bg-start} (#121212) to {colors.key-bg-end} (#0d0d0d) that gives Raycast's keycap UI its slight 3D-key feel.

Typography

Font Family

Inter is the system's primary face, loaded with the Inter Fallback system fallback variant. Critically, Raycast enables font-feature-settings: "calt", "kern", "liga", "ss03" site-wide — the ss03 stylistic set swaps in Inter's alternate g glyph (single-story open g), which is the brand's signature typographic detail. Standard ligatures (liga), kerning (kern), and contextual alternates (calt) are also active. The display tier additionally enables ss02 and ss08 and disables standard liga to render the hero "Raycast Pro" wordmark with its distinctive geometric construction.

There is no monospace face used outside of inline <code> chips in documentation; the marketing pages use Inter for everything.

Hierarchy

Principles

The hierarchy works on a 1.6-line-height ladder for body and a 1.1–1.4 ladder for display/heading. Letter-spacing is consistently positive (0.1–0.4px) — slightly opening the type — which gives Raycast's chrome an airy quality at body sizes despite the dark canvas. The ss03 stylistic set is the brand's most distinctive typographic detail; without it, the body face renders identically to plain Inter and loses Raycast's signature rendering.

Note on Font Substitutes

Inter is open-source and Google-Fonts-hosted; load it directly. To preserve the brand's signature look, you must enable font-feature-settings: "calt", "kern", "liga", "ss03" on the body element. Without ss03, the typography is recognizably "Inter default" rather than "Raycast." On systems where Inter cannot be loaded, the documented fallback is Inter Fallback (a self-hosted variant) → system-ui. JetBrains Mono or Geist Mono are acceptable substitutes for inline code chips when needed, though Raycast's marketing chrome rarely uses code-styled text.

Layout

Spacing System

• Base unit: 8px (with 2/4/12px steps for tight inline gaps).
• Tokens (front matter): {spacing.xxs} (2px) · {spacing.xs} (4px) · {spacing.sm} (8px) · {spacing.md} (12px) · {spacing.lg} (16px) · {spacing.xl} (24px) · {spacing.xxl} (32px) · {spacing.section} (96px).
• Universal section rhythm: every page in the set uses {spacing.section} (96px) as the vertical gap between major content blocks. Card grids use {spacing.lg} (16px) gutters; in-card padding sits at {spacing.xl} (24px) for feature cards and {spacing.lg} (16px) for store extension cards.

Grid & Container

• Max width: 1240px content area at desktop with 24px gutters (48px at ultrawide). Hero command-palette mockups run wider (~1080px) with the page background extending to full bleed.
• Store extension grid: 2-up at desktop with rows of 2 cards stacked, collapsing to 1-up at mobile. Each card is a horizontal layout with a large square app icon at the left and copy + Install button at the right.
• Pricing tier grid: 3-up at desktop (Free / Pro / Pro+Advanced AI), collapsing to 1-up stacked at mobile.
• Featured extension card grid: 3-up at desktop in the "Featured" row at the top of the store page.
• Comparison table: full-width on the pricing page below the tier cards — 5-column table (Free / Pro / Advanced AI / Custom for Teams / Enterprise) with feature rows.
• Footer: 6-column horizontal link grid at desktop, collapsing to 2-up at tablet and 1-up at mobile.

Whitespace Philosophy

Whitespace is generous and the canvas is uninterrupted. Sections sit 96px apart with no decorative dividers between them — the dark canvas continues edge-to-edge from hero to footer. Inside a section, content is left-aligned in a tight column, with command-palette mockup imagery occupying the right 50–60% of the band on home-page feature rows. The signature decorative element — the red diagonal-stripe gradient band — only appears in the very first hero band; from the second section down, the page is monochrome dark.

Elevation & Depth

The system has no drop-shadow elevation at all. Depth is built entirely from the surface-color ladder: each notch lighter on the dark scale reads as one step closer to the viewer.

Decorative Depth

Depth comes from product imagery and a single stripe-gradient band:

• Hero stripe gradient — three diagonal red stripes ({colors.hero-stripe-start} → {colors.hero-stripe-end}) layered across the home-page hero band, evoking a launch-banner / motion-blur effect. The system's signature decorative moment.
• Command-palette mockups — full-fidelity Raycast in-product UI screenshots (the actual Spotlight-style overlay with rounded keycaps, command rows, and accent-color glyphs) sitting inside the home-page hero and feature rows. These ARE the brand decoration.
• App icon tiles — small 48–64px rounded-corner tiles displaying real app icons (Slack, Spotify, Figma, Notion, Linear, Hacker News) inside store and feature illustrations.
• Keycap glyphs — subtle gradient-filled rounded keycap glyphs used inline to indicate keyboard shortcuts (e.g., ⌘ K), with a faint {colors.key-bg-start} → {colors.key-bg-end} linear gradient suggesting a physical key surface.

Shapes

Border Radius Scale

The radius vocabulary clusters tightly between 4 and 16px, with most chrome at 6–10px. The system never goes flat (0px) on cards and never above 16px except for fully-rounded pills.

Photography Geometry

There is no traditional photography. Visual elements are limited to:

• Command-palette mockups — full-fidelity Raycast UI screenshots at 16:9 or 4:3 aspect inside {rounded.xl} (16px) containers.
• App icon tiles — 48–64px square at {rounded.md} (8px), displaying real app icons.
• Avatar circles — 32–40px at {rounded.full} for in-extension author attribution.
• Hero stripe gradient — full-bleed wash with no aspect ratio.

Components

No hover states documented per system policy. Each spec covers Default and Active/Pressed only.

Buttons

button-primary — the universal Raycast CTA

• Background {colors.primary} (white), text {colors.on-primary} (black), type {typography.button-md}, padding 8px 16px, height ~36px, rounded {rounded.md}.
• Used for "Download" (sticky top-nav CTA), "Get Pro", "Install" — every primary action across every surface.
• Pressed state lives in button-primary-pressed — background dims to {colors.primary-pressed}.

button-secondary — transparent text button

• Background transparent, text {colors.on-dark}, type {typography.button-md}, padding 8px 16px, height ~36px, rounded {rounded.md}.
• Lower-emphasis action: "Sign in" (top nav), "Learn more →", "View on GitHub".

button-tertiary — soft surface button

• Background {colors.surface-elevated}, text {colors.on-dark}, type {typography.button-md}, padding 8px 16px, height ~36px, rounded {rounded.md}.
• Mid-emphasis: "Watch demo", "View extension", "Manage" buttons inside cards.

button-disabled

• Background {colors.surface-elevated}, text {colors.ash} — dim utility state.

install-button — the store-page install pill

• Background transparent with 1px solid {colors.hairline-strong} border, text {colors.on-dark}, type {typography.button-md}, padding 6px 14px, rounded {rounded.md}.
• Sits at the right edge of every store extension card with the label "Install Extension".

Filter & Tab Chips

pill-tab + pill-tab-active — small filter chip strip

• Default: transparent background, text {colors.body}, type {typography.body-sm}, padding 4px 10px, rounded {rounded.full}.
• Active: background flips to {colors.surface-elevated}, text {colors.on-dark} — the chip "lifts" by one surface notch.
• Used in the store filter row ("All Extensions", "Recently Added", "Most Popular") and similar segmented controls.

badge-pro — small Pro/Plan label

• Background {colors.surface-elevated}, text {colors.on-dark-mute}, type {typography.caption-sm}, padding 2px 6px, rounded {rounded.xs}.
• Inline "Pro" / "Pro+" / "Free" tier indicators on pricing tier cards.

badge-info-soft — translucent info chip

• Background {colors.accent-blue-soft}, text {colors.accent-blue}, type {typography.caption-sm}, padding 2px 8px, rounded {rounded.xs}.
• Rare "New" / "Beta" inline tag.

Inputs & Forms

text-input + text-input-focused

• Default: background {colors.surface-elevated}, text {colors.on-dark}, 1px solid {colors.hairline}, type {typography.body-md}, padding 8px 12px, height ~36px, rounded {rounded.md}.
• Focused: same surface; 1px border becomes {colors.hairline-strong} — a subtle brightening rather than a colored ring.

store-search-bar — the store-page search field

• Background {colors.surface-elevated}, text {colors.on-dark}, type {typography.body-md}, padding 10px 16px, height ~44px, rounded {rounded.md}.
• Sits at the top of the store page hero with a magnifier icon at the left and "Search the store..." placeholder. Slightly taller than the standard text-input.

Cards & Containers

command-palette-card — the home-page hero command-palette mockup

• Container: background {colors.surface}, 1px solid {colors.hairline}, padding 0 (the mockup contents fill the card), rounded {rounded.lg} or {rounded.xl} depending on hero size.
• Layout: top header strip with macOS traffic-light dots + a search input row, body with a vertical stack of {component.command-palette-row} items, bottom-right keycap hint cluster.

command-palette-row + command-palette-row-active — single row inside the command palette

• Default: transparent background, text {colors.on-dark} in {typography.body-md}, padding 6px 10px, rounded {rounded.sm}.
• Active: background {colors.surface-card} (one notch lighter than the surrounding palette card) — the selection state.
• Each row contains a small app-icon tile + label + optional keycap shortcut at the right edge.

feature-card-dark — standard product feature card

• Container: background {colors.surface}, 1px solid {colors.hairline}, padding {spacing.xl} (24px), rounded {rounded.lg}.
• Used in 2- or 3-up grids on home and feature pages — pairs a small product mockup or app-icon row with body copy and a "Learn more →" {component.button-secondary}.

feature-card-elevated — slightly-elevated variant

• Same chrome as feature-card-dark but background flips to {colors.surface-elevated} — used to break visual rhythm in alternating feature rows.

store-extension-card — store-page extension card

• Container: background {colors.surface}, 1px solid {colors.hairline}, padding {spacing.lg} (16px), rounded {rounded.md}.
• Layout: 48px {component.app-icon-tile} at left, vertical stack of name + by-author metadata + 1-line description in the center, {component.install-button} at the right edge.

pricing-tier-card — pricing plan card (default tier)

• Container: background {colors.surface}, 1px solid {colors.hairline}, padding {spacing.xl} (24px), rounded {rounded.lg}.
• Layout: tier name in {typography.heading-xl} (24px), price in larger numeric in {typography.display-lg}, body description in {typography.body-lg}, CTA {component.button-primary} (or {component.button-secondary} for free tier), feature checklist with ✓ glyphs.

pricing-tier-card-featured — middle "Pro" featured tier

• Same chrome but background flips to {colors.surface-elevated} (one notch lighter) — the only visual cue distinguishing the featured tier from the surrounding cards.

hero-stripe-band — home-page hero with red stripe gradient

• Background {colors.canvas} with three diagonal red stripes layered across the top half ({colors.hero-stripe-start} → {colors.hero-stripe-end}).
• Padding {spacing.section} 96px vertical / 48px horizontal, rounded {rounded.none}.
• Carries the hero headline in {typography.display-xl} and a single {component.button-primary} "Download" CTA.

Decorative

app-icon-tile — small 48px square app icon

• Background {colors.surface-card}, padding 0 (icon fills the tile), rounded {rounded.md}, size 48×48.
• Used in command-palette rows and store extension cards.

app-icon-tile-large — 64px feature variant

• Same but at 64×64. Used in featured store cards and home-page hero illustration rows.

keycap — keyboard shortcut glyph

• Background {colors.surface-card} with a subtle linear gradient {colors.key-bg-start} → {colors.key-bg-end}, text {colors.body} in {typography.caption-md}, padding 1px 6px, height ~20px, rounded {rounded.xs}.
• Renders inline command-palette shortcut hints like ⌘ K, ⏎, Esc. The signature "physical-key" feel on a flat dark canvas.

Navigation

primary-nav

• Background {colors.canvas}, text {colors.on-dark}, height ~56px, type {typography.body-sm-strong}, rounded {rounded.none}, with a 1px {colors.hairline} bottom rule.
• Layout (desktop): Raycast wordmark at left, centered nav cluster ("Pro · AI · Store · Manual · Changelog · Blog · Pricing"), right cluster (Sign in link + the always-white {component.button-primary} "Download" CTA pill).

Top Nav (Mobile)

• Hamburger menu icon at left, Raycast wordmark at center, "Download" white CTA pill at right. Primary nav collapses into a full-screen drawer that slides from the left.

Footer

footer-section

• Background {colors.canvas}, text {colors.body} in {typography.body-sm}, padding 64px 48px, with a 1px {colors.hairline} top rule.
• Layout: 6-column horizontal link grid (Product · Core Features · Top Extensions · Company · Community · By Raycast) with column headers in {typography.body-sm-strong} {colors.on-dark} and link lists in {typography.body-sm} {colors.body}.
• Bottom row: small Raycast wordmark + a subscribe newsletter input field with {component.button-primary} "Subscribe" at the right.
• The very top of the footer band has a faint red stripe-gradient repeat — a smaller echo of the hero's diagonal stripe motif.

Inline

link-inline — body-prose anchor link

• {colors.on-dark} text with no underline by default; underlines on focus. Inline body links are full-white rather than a tinted accent color, which keeps the dark canvas tonally pure.

Do's and Don'ts

Do

• Render the entire site in one continuous dark mode. There is no light variant in the system.
• Use {colors.primary} (white pill) for every primary CTA. There is no second primary color — white IS the brand action.
• Build elevation from the surface-color ladder ({colors.canvas} → {colors.surface} → {colors.surface-elevated} → {colors.surface-card}), never from drop shadows.
• Enable font-feature-settings: "calt", "kern", "liga", "ss03" on the body element. The ss03 alternate g is part of the brand identity.
• Anchor a {component.command-palette-card} mockup as the hero's load-bearing visual. Real Raycast UI is the brand.
• Use {component.keycap} glyphs inline to indicate keyboard shortcuts. Subtle key-bg gradient ({colors.key-bg-start} → {colors.key-bg-end}) is the brand's only "depth" decoration.
• Reserve {colors.hero-stripe-start} → {colors.hero-stripe-end} red gradient for the hero band exactly once per page. Never repeat the stripe gradient deeper in the page.
• Use saturated category accents ({colors.accent-yellow}, {colors.accent-red}, {colors.accent-green}, {colors.accent-blue}) only inside extension and feature illustrations — never on chrome buttons or text.

Don't

• Don't introduce a light mode. The system is dark-only by design.
• Don't add drop shadows on cards. Elevation is built from the surface ladder, not from shadows.
• Don't replace {colors.primary} (white) with a tinted accent for the primary CTA. Pure white is the brand action color.
• Don't use the saturated accent colors ({colors.accent-yellow}, {colors.accent-red}, {colors.accent-green}, {colors.accent-blue}) on text, buttons, or chrome surfaces. They belong inside extension illustrations.
• Don't repeat the hero stripe gradient outside the top hero band. The one-band rule is the system's restraint.
• Don't use Inter without the ss03 feature flag enabled. The chrome will lose its signature voice.
• Don't pad cards with 32px+ on all sides. The system runs tight at 16–24px in-card padding.

Responsive Behavior

Breakpoints

Touch Targets

All interactive elements meet WCAG AA at 36px+. {component.button-primary} and {component.button-tertiary} sit at 36px height with 16px padding. {component.text-input} sits at 36px. {component.store-search-bar} sits at 44px (above AAA). {component.pill-tab} is ~24–28px height with 10px padding extending to 36–40px tappable via inline padding (above AA but below AAA — intentional, the chips are compact). {component.install-button} sits at ~32px height with 14px padding.

Collapsing Strategy

• Primary nav: desktop horizontal cluster → tablet hamburger drawer at 768px. The white "Download" CTA stays visible at every breakpoint.
• Hero command-palette mockup: desktop full-fidelity 2-column with copy at left + mockup at right → tablet stacks vertical with mockup below copy → mobile mockup scales down to ~80% width.
• Store extension grid: 2-up → 1-up at tablet.
• Pricing tier grid: 3-up → 2+1 at desktop-small → 1-up stacked at tablet.
• Comparison table: desktop full 5-column → tablet horizontal scroll → mobile vertical card stack with one tier per card.
• Footer: 6-up link columns → 3-up at tablet → 2-up at mobile-landscape → 1-up at mobile.
• Section padding: {spacing.section} (96px) desktop → 64px tablet → 48px mobile.
• Hero headline: {typography.display-xl} (64px) at desktop, scaling 56px / 44px / 36px down the breakpoint stack.

Image Behavior

The only "imagery" in the system is in-product Raycast UI screenshots and small app-icon assets:

• Command-palette mockups scale fluidly with the container; the in-product UI itself is responsive and re-renders for each breakpoint.
• App-icon tiles stay at 48–64px fixed size at every breakpoint; they tile in flexible rows that wrap at narrower widths.
• Hero stripe gradient stays at the top of the hero band at every breakpoint with the stripe angle preserved.

Iteration Guide

1. Focus on ONE component at a time. Pull its YAML entry and verify every property resolves.
2. Reference component names and tokens directly ({colors.primary}, {component.button-primary-pressed}, {rounded.md}) — do not paraphrase.
3. Run npx @google/design.md lint DESIGN.md after edits — broken-ref, contrast-ratio, and orphaned-tokens warnings flag issues automatically.
4. Add new variants as separate component entries (-pressed, -disabled, -active) — do not bury them inside prose.
5. Default body to {typography.body-md} (16px / 400 / 1.6); reach for {typography.body-strong} for emphasis; reserve {typography.display-xl} strictly for the hero band.
6. Keep {colors.primary} (white CTA pill) scarce per viewport — at most one solid white pill per fold.
7. When introducing a new component, ask whether it can be expressed with the existing surface-ladder + 8px-radius + ss03-Inter vocabulary before adding new tokens. The system's strength is that it almost never needs new ones.

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.