Raycast Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

24tokens

10type steps

6radius steps

1pxspacing base

Raycast, in one page

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

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.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Raycast design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #ffffff
- primary-pressed: #e8e8e8
- on-primary: #000000
- ink: #f4f4f6
- body: #cdcdcd
- charcoal: #d3d3d4
- mute: #9c9c9d
- ash: #6a6b6c
- stone: #434345
- on-dark: #ffffff

Type:
- families: Inter, Inter Fallback, JetBrains Mono, Geist Mono
- scale: 12, 13, 14, 16, 18, 20, 22, 24, 56
- weights: 400, 500, 600

Shape:
- radius: 0, 4, 6, 8, 10, 16

Spacing: 1, 2, 4, 6, 8, 10, 12, 16, 24, 32

Rules:
- 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…
- 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 o…

Avoid:
- 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 ch…
- 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.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

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

Type scaleRead the full spec

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

Token	Size	Weight	Line Height	Letter Spacing	Use
`{typography.display-xl}`	64px	600	1.1	0	Hero "Built for the perfect tools" / "The new way to..." headline (with `liga: 0`, `ss02`, `ss08`)
`{typography.display-lg}`	56px	500	1.17	0.2px	Section headline ("Explore", "Pricing", store hero "Store")
`{typography.heading-xl}`	24px	500	1.6	0.2px	Sub-section heading, pricing-tier name
`{typography.heading-lg}`	22px	500	1.15	0	Mid-section feature heading
`{typography.heading-md}`	20px	500	1.4	0.2px	Card group title, in-card heading
`{typography.heading-sm}`	18px	500	1.4	0.2px	Small heading, extension card title
`{typography.body-lg}`	18px	400	1.6	0	Pricing tier description, hero subtitle
`{typography.body-md}`	16px	400	1.6	0	Default body, paragraph text
`{typography.body-strong}`	16px	500	1.4	0.2px	Inline emphasis, primary nav link
`{typography.body-sm}`	14px	400	1.6	0	Card description, secondary copy
`{typography.body-sm-strong}`	14px	500	1.6	0.2px	In-card label, table-header text
`{typography.caption-md}`	13px	400	1.4	0.1px	Caption, metadata
`{typography.caption-sm}`	12px	400	1.5	0.4px	Smallest utility text, badge label
`{typography.link-md}`	16px	500	1.4	0.3px	Inline body anchor link
`{typography.button-md}`	14px	500	1.6	0.2px	Standard button label

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.

Components and layoutRead the full spec

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.

Responsive behaviourRead the full spec

Breakpoints

Name	Width	Key Changes
ultrawide	1920px+	Content max-width holds at 1240px; outer gutters grow to ~80px
desktop-large	1440px	Default — 3-up pricing grid, 2-up store extension grid
desktop	1280px	Same with narrower outer gutters
desktop-small	1024px	3-up pricing collapses to 2+1; primary nav remains horizontal
tablet	768px	Pricing → 1-up stacked; primary nav becomes hamburger drawer
mobile	480px	Single-column everything; hero `{typography.display-xl}` scales 64px → ~36px
mobile-narrow	320px	Section padding tightens to 48px

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:

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-raycast {--page-bg: #07080a;
  --page-bg-gradient: none;
  --text-color: #f4f4f6;
  --heading-color: #f4f4f6;
  --link-color: #ffffff;
  --link-hover-color: #e6e6e6;
  --border-color: #323234;
  --card-bg: #07080a;
  --card-shadow: 0 1px 2px rgba(244,244,246,0.06);
  --card-hover-shadow: 0 6px 18px rgba(244,244,246,0.12);
  --header-bg: #1b1c1e;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #07080a;
  --footer-text-color: #a1a1a3;
  --button-bg: #ffffff;
  --button-text-color: #000000;
  --button-hover-bg: #e6e6e6;
  --button-border: none;
  --button-border-radius: 8px;
  --button-secondary-bg: #151618;
  --button-secondary-text-color: #f4f4f6;
  --button-secondary-hover-bg: #232426;
  --button-secondary-border: 1px solid #323234;
  --prompt-bg: #131416;
  --prompt-text-color: #f4f4f6;
  --base-font: var(--font-inter);
  --heading-font: var(--font-mono);
  --card-border-radius: 8px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

resend 76.8%
hashicorp 73.8%
shuuemura 73.1%
mintlify 72.0%
cursor 71.9%

Where this came from

Source document: volt/design-md/raycast/DESIGN.md · 40.0 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.