Raycast

version alpha

name Raycast

属于 A dark-canvas developer-tools system that treats the marketing page like an extended product screenshot — pure-near-black background, command-palette mockups as the hero, Inter typography with the ss03 stylistic set turned on, and a single white CTA pill that doesn't break the inky atmosphere. The chrome reads like Raycast's own command-palette UI scaled up to a marketing page: monochrome dark surfaces with a faint surface ladder (#07080a → #0d0d0d → #101111), tight 6–10px radius on cards, hairline 1px borders in #242728, and rare splashes of saturated accent (Hacker News yellow, Slack red, Mac green, info blue) reserved for product-tile category illustrations. The signature visual moment is a red gradient hero wordmark — three diagonal red stripes laid across the very top of the home page like a launch-banner — paired with full-bleed product UI screenshots that show Raycast's actual command palette, store, and AI chat surfaces.

description | Raycast's marketing system reads like an extended product screenshot. The chrome IS the in-product chrome at marketing scale: pure-near-black canvas, hairline 1px borders, command-palette-style cards, Inter typography with the ss03 stylistic set enabled site-wide, white CTA pill, and a small set of saturated category accent colors (yellow / red / green / blue) reserved for extension and feature illustrations. Section rhythm is generous (~96px) but the page never breaks tonal continuity — the whole site sits in one continuous dark mode.

colors primary: "#ffffff" primary-pressed: "#e8e8e8" on-primary: "#000000" ink: "#f4f4f6" body: "#cdcdcd" charcoal: "#d3d3d4" mute: "#9c9c9d" ash: "#6a6b6c" stone: "#434345" on-dark: "#ffffff" on-dark-mute: "rgba(255,255,255,0.72)" canvas: "#07080a" surface: "#0d0d0d" surface-elevated: "#101111" surface-card: "#121212" button-fg: "#18191a" hairline: "#242728" hairline-soft: "rgba(255,255,255,0.08)" hairline-strong: "rgba(255,255,255,0.16)" accent-blue: "#57c1ff" accent-blue-soft: "rgba(87,193,255,0.15)" accent-red: "#ff6161" accent-red-soft: "rgba(255,97,97,0.15)" accent-green: "#59d499" accent-green-soft: "rgba(89,212,153,0.15)" accent-yellow: "#ffc533" accent-yellow-soft: "rgba(255,197,51,0.15)" hero-stripe-start: "#ff5757" hero-stripe-end: "#a1131a" key-bg-start: "#121212" key-bg-end: "#0d0d0d"

typography display-xl: fontFamily: Inter fontSize: 64px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0 fontFeature: '"calt", "kern", "liga", "ss03"' display-lg: fontFamily: Inter fontSize: 56px fontWeight: 500 lineHeight: 1.17 letterSpacing: 0.2px fontFeature: '"calt", "kern", "liga", "ss03"' heading-xl: fontFamily: Inter fontSize: 24px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.2px fontFeature: '"calt", "kern", "liga", "ss03"' heading-lg: fontFamily: Inter fontSize: 22px fontWeight: 500 lineHeight: 1.15 letterSpacing: 0 fontFeature: '"calt", "kern", "liga", "ss03"' heading-md: fontFamily: Inter fontSize: 20px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.2px fontFeature: '"calt", "kern", "liga", "ss03"' heading-sm: fontFamily: Inter fontSize: 18px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.2px fontFeature: '"calt", "kern", "liga", "ss03"' body-lg: fontFamily: Inter fontSize: 18px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0 fontFeature: '"calt", "kern", "liga", "ss03"' body-md: fontFamily: Inter fontSize: 16px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0 fontFeature: '"calt", "kern", "liga", "ss03"' body-strong: fontFamily: Inter fontSize: 16px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.2px fontFeature: '"calt", "kern", "liga", "ss03"' body-sm: fontFamily: Inter fontSize: 14px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0 fontFeature: '"calt", "kern", "liga", "ss03"' body-sm-strong: fontFamily: Inter fontSize: 14px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.2px fontFeature: '"calt", "kern", "liga", "ss03"' caption-md: fontFamily: Inter fontSize: 13px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.1px fontFeature: '"calt", "kern", "liga", "ss03"' caption-sm: fontFamily: Inter fontSize: 12px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.4px fontFeature: '"calt", "kern", "liga", "ss03"' link-md: fontFamily: Inter fontSize: 16px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.3px fontFeature: '"calt", "kern", "liga", "ss03"' button-md: fontFamily: Inter fontSize: 14px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.2px fontFeature: '"calt", "kern", "liga", "ss03"'

rounded none: 0px xs: 4px sm: 6px md: 8px lg: 10px xl: 16px full: 9999px

spacing xxs: 2px xs: 4px sm: 8px md: 12px lg: 16px xl: 24px xxl: 32px section: 96px

components button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 8px 16px height: 36px button-primary-pressed: backgroundColor: "{colors.primary-pressed}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" button-secondary: backgroundColor: "transparent" textColor: "{colors.on-dark}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 8px 16px height: 36px button-tertiary: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.on-dark}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 8px 16px height: 36px button-disabled: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.ash}" rounded: "{rounded.md}" install-button: backgroundColor: "transparent" textColor: "{colors.on-dark}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 6px 14px text-input: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 8px 12px height: 36px text-input-focused: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.on-dark}" rounded: "{rounded.md}" store-search-bar: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 10px 16px height: 44px command-palette-row: backgroundColor: "transparent" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 6px 10px command-palette-row-active: backgroundColor: "{colors.surface-card}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.sm}" pill-tab: backgroundColor: "transparent" textColor: "{colors.body}" typography: "{typography.body-sm}" rounded: "{rounded.full}" padding: 4px 10px pill-tab-active: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.on-dark}" typography: "{typography.body-sm}" rounded: "{rounded.full}" badge-pro: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.on-dark-mute}" typography: "{typography.caption-sm}" rounded: "{rounded.xs}" padding: 2px 6px badge-info-soft: backgroundColor: "{colors.accent-blue-soft}" textColor: "{colors.accent-blue}" typography: "{typography.caption-sm}" rounded: "{rounded.xs}" padding: 2px 8px keycap: backgroundColor: "{colors.surface-card}" textColor: "{colors.body}" typography: "{typography.caption-md}" rounded: "{rounded.xs}" padding: 1px 6px height: 20px command-palette-card: backgroundColor: "{colors.surface}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 0px feature-card-dark: backgroundColor: "{colors.surface}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 24px feature-card-elevated: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 24px store-extension-card: backgroundColor: "{colors.surface}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 16px pricing-tier-card: backgroundColor: "{colors.surface}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 24px pricing-tier-card-featured: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 24px hero-stripe-band: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.display-xl}" rounded: "{rounded.none}" padding: 96px 48px app-icon-tile: backgroundColor: "{colors.surface-card}" rounded: "{rounded.md}" size: 48px app-icon-tile-large: backgroundColor: "{colors.surface-card}" rounded: "{rounded.md}" size: 64px primary-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.body-sm-strong}" rounded: "{rounded.none}" height: 56px footer-section: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: 64px 48px link-inline: textColor: "{colors.on-dark}" typography: "{typography.link-md}"

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), /