---
title: "Raycast design system"
variant: extended
source: https://www.raycast.com/
captured_at: 2026-10-12
theme: dark
industry: productivity
generator: Design DNA (https://four.wiralomi.com/style/raycast-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Raycast · Design System

> Quiet darkness, focused productivity

**Theme:** dark · **Industry:** productivity · **Source:** https://www.raycast.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Raycast’s homepage pairs a near-black canvas with centered white messaging and restrained interface chrome. The long page alternates expansive product storytelling with compact, dark-framed UI previews and a bright download action.

## North star

Keep the near-black canvas quiet and spacious, and let clear white messaging and product UI previews provide the visual focus.

## Overview

The visual strategy is deliberately restrained: a near-black canvas (#07080a) dominates, allowing crisp white headlines and interface details to stand out without decorative colour competing for attention. Muted grays separate navigation and supporting copy from primary messaging; charcoal surfaces and hairline borders frame product previews. The first viewport is exceptionally open, with a compact floating navigation bar above a centered hero and a small, bright download CTA set well below the copy. Inter is the workhorse for headings, body text and controls, using medium weights and natural casing rather than display-heavy styling. GeistMono adds a technical accent to code-like content. Across the long page, centered headline sections give way to dense product UI galleries and split feature layouts. Generous section gaps preserve calm pacing, while dark cards, subtle gradients and restrained shadows provide depth without breaking the monochrome system. Product imagery and interface mockups carry most of the visual variety.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Canvas | `#07080a` | `--color-midnight-canvas` | brand | Dominant page canvas and hero background; keeps the site nearly black and visually quiet. |
| Bright Paper | `#ffffff` | `--color-bright-paper` | neutral | Primary headings, body copy, interface labels, and text on dark controls. |
| Graphite Edge | `#161718` | `--color-graphite-edge` | surface | Common card surface and subtle borders, including dark navigation and UI framing. |
| Ash Gray | `#6a6b6c` | `--color-ash-gray` | neutral | Low-emphasis supporting text and subdued labels within dark interface previews. |
| Soft Nickel | `#9c9c9d` | `--color-soft-nickel` | neutral | Secondary navigation links and readable muted copy against the dark canvas. |
| Black Panel | `#040406` | `--color-black-panel` | surface | Deep card and media backgrounds that sit just below the main canvas in brightness. |
| Slate Frame | `#434345` | `--color-slate-frame` | surface | Raised UI elements, card details, and restrained mid-dark contrast. |
| Carbon Line | `#202123` | `--color-carbon-line` | surface | Fine borders and outlines, primarily within interface and media mockups. |
| Shadow Field | `#121212` | `--color-shadow-field` | surface | Dark gradient tone used in background and card treatments. |
| Panel Charcoal | `#1a1b1d` | `--color-panel-charcoal` | surface | Dark card, badge, and inset UI treatment. |
| Deep Fade | `#0d0d0d` | `--color-deep-fade` | surface | Gradient endpoint and deep dark media/card shading. |
| Blue Black | `#070b11` | `--color-blue-black` | surface | Subtle cool-black shade appearing in product card treatments. |
| Iron Gray | `#262626` | `--color-iron-gray` | surface | Occasional dark card and interface detail; secondary to the core charcoal palette. |
| Button Graphite | `#2f3031` | `--color-button-graphite` | surface | Dark text on the pale download button and occasional UI controls. |
| Quiet Cobalt | `#052f6c` | `--color-quiet-cobalt` | accent | Limited blue accent inside product card treatments, not a dominant site-wide CTA colour. |
| Steel Text | `#555657` | `--color-steel-text` | neutral | Low-contrast badge and supporting interface text. |

### Semantic aliases

`--color-canvas` → `#07080a` (Midnight Canvas) · `--color-surface` → `#161718` (Graphite Edge) · `--color-surface-2` → `#040406` (Black Panel) · `--color-surface-3` → `#434345` (Slate Frame) · `--color-text` → `#ffffff` (Bright Paper) · `--color-text-muted` → `#6a6b6c` (Ash Gray) · `--color-text-subtle` → `#9c9c9d` (Soft Nickel) · `--color-border` → `#161718` (Graphite Edge) · `--color-accent` → `#052f6c` (Quiet Cobalt)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#07080a` | 20.04:1 | AAA |
| `#ffffff` | `#161718` | 17.95:1 | AAA |
| `#ffffff` | `#040406` | 20.48:1 | AAA |
| `#ffffff` | `#434345` | 9.87:1 | AAA |
| `#6a6b6c` | `#07080a` | 3.75:1 | AA-large |
| `#6a6b6c` | `#161718` | 3.36:1 | AA-large |
| `#6a6b6c` | `#040406` | 3.84:1 | AA-large |
| `#6a6b6c` | `#434345` | 1.85:1 | fail |
| `#9c9c9d` | `#07080a` | 7.3:1 | AAA |
| `#9c9c9d` | `#161718` | 6.54:1 | AA |

### Gradients

- `radial-gradient(75% 75% at 50% 91.9%, rgb(18, 18, 18) 0%, rgb(13, 13, 13) 100%)`
- `radial-gradient(85.77% 49.97% at 51% 5.12%, rgba(255, 150, 150, 0.11) 0%, rgba(222, 226, 255, 0.08) 45.83%, rgba(241, 242, 255, 0.02) 100%), none`
- `radial-gradient(rgb(47, 48, 49) 0.5px, rgba(0, 0, 0, 0) 0px)`
- `linear-gradient(45deg, rgb(12, 13, 15) 0%, rgb(7, 8, 10) 100.67%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 500, 400, 600 | Primary family for headings, body copy, links, and buttons. | Inter |
| Segoe UI Variable | `--font-segoe-ui-variable` | system | 400, 500 | System-fallback interface and input text in selected product UI. | Noto Sans |
| GeistMono | `--font-mono` | webfont | 500, 400, 300 | Code-style and technical text. | IBM Plex Mono |
| SF Pro Text | `--font-sf-pro-text` | system | 500, 700 | Keyboard keycap labels in product illustrations. | Inter |

- **Inter:** Measured weights 400, 500, and 600; natural casing, generally neutral tracking, with medium-weight interface text.
- **Segoe UI Variable:** Measured regular and medium weights; used for compact controls and app-like interface copy.
- **GeistMono:** Measured light through medium weights; monospaced, with slightly open tracking for technical labels.
- **SF Pro Text:** System face, medium and bold weights; appears in key-shaped UI mockups rather than general page copy.

### Type scale — Major Third (ratio ≈ 1.26, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 400 | 1.15 | 0 | — | Inter | Hero and primary section headlines; centered or left aligned by section. |
| h2 | 24px | 500 | 1.6 | 0.008em | — | Inter | Secondary feature and product-section headings. |
| h3 | 20px | 500 | normal | 0.01em | — | Inter | Feature titles and smaller content-block headings. |
| body | 16px | 500 | 1.6 | 0 | — | Inter | Supporting explanations, product descriptions, and testimonials. |
| caption | 13px | 400 | normal | 0.008em | — | Inter | Small metadata, helper text, and understated UI labels. |
| button | 24px | 500 | 1.6 | 0.008em | — | Inter | Prominent action labels and interface control text. |
| link | 14px | 500 | 1.6 | 0.014em | — | Inter | Navigation, secondary actions, and inline destinations. |
| code | 14px | 500 | 1.6 | 0.021em | — | GeistMono | Technical labels and code-like product interface content. |

OpenType features in use: `"calt", "kern", "liga", "ss03"`, `"liga" 0, "ss02", "ss08"`, `"ss09"`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 3, 4, 8, 10, 12, 15, 16, 20, 24 px.
- Section rhythm 224px · element gap 8px · card padding — · max content width 1204px.

The page uses a spacious, vertically sequenced layout with a measured maximum content width of 1204px and section gaps reaching 224px. The first viewport centers its hero within a broad, nearly empty field, while the floating navigation stays within the same centered frame. Later sections vary between wide multi-column product galleries, split feature areas, and centered testimonials. Density is intentionally uneven: generous breathing room around major claims contrasts with tighter, media-rich interface demonstrations. Keep alignment purposeful, using centered compositions for brand statements and structured grids for product detail.

## Shape & elevation

- Radius: button `4px` · card `16px` · media `50%` · badge `6px` · link `12px` · xs `3px` · sm `4px` · md `5px` · lg `6px` · xl `8px` · 2xl `11px` · pill `9999px`
- Shadow `inset` (other, card): `rgba(0, 0, 0, 0.4) 0px 1.5px 0.5px 2.5px, rgb(0, 0, 0) 0px 0px 0.5px 1px, rgba(0, 0, 0, 0.25) 0px 2px 1px 1px inset, rgba(255, 255, 255, 0.2) 0px 1px 1px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px in`
- Shadow `inset-2` (other, card, link): `rgb(27, 28, 30) 0px 0px 0px 1px, rgb(7, 8, 10) 0px 0px 0px 1px inset`
- Shadow `lg` (link): `rgba(215, 201, 175, 0.05) 0px 0px 20px 5px, rgba(215, 201, 175, 0.05) 0px 0px 16px -7px`
- Shadow `sm` (media): `rgba(0, 0, 0, 0.28) 0px 1.189px 2.377px 0px`
- Shadow `inset-3` (other): `rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.25) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset`
- Shadow `sm-2` (other, card, button): `rgba(0, 0, 0, 0.03) 0px 7px 3px 0px, rgba(0, 0, 0, 0.25) 0px 4px 4px 0px`
- Motion: standard transition `0.3s ease` on interactive elements.

Most surfaces remain flat against the dark canvas. Thin charcoal outlines and inset highlights define the navigation and product cards, with measured inset shadows adding a polished hardware-like edge to keyboard and UI mockups. Use soft, restrained shadows for separation; avoid bright glows or heavy elevation that would overwhelm the quiet monochrome hierarchy.

## Imagery

The page relies on product-interface mockups rather than lifestyle photography. Screens of the launcher, extension workflows, keyboard keys, and app previews appear inside dark-framed cards, often arranged as galleries or feature demonstrations. Treat these as crisp UI artifacts with subdued borders and shallow depth; preserve their internal colour as product content rather than promoting it into the site-wide brand palette. The hero itself is mostly typography and empty dark space.

## Components

### Floating navigation

A compact dark bar centered within the page frame, with muted links, brand mark, and a pale Download button.

### Hero headline

Large white, regular-weight Inter headline centered above a short two-line supporting statement.

### Download CTA

Bright gray-white button with dark label and subtle outer glow; the primary action against the black canvas.

### Product preview cards

Dark interface mockups presented in rounded cards, outlined with restrained charcoal borders and inset highlights.

### Feature gallery

Wide, multi-column presentation of extensions and product surfaces, with imagery carrying most of the colour variation.

### Keyboard keycaps

Raised dark key shapes with light labels and layered inset shadows, used to illustrate shortcut-led interaction.

### Badges

Compact dark-gray labels with white text for feature categories such as AI Chat and Raycast Notes.

### Measured component styles

- **Primary button** (“Download”): background #e6e6e6 · text #2f3031 · radius 8px · padding 8px 12px · 500 14px Inter · shadow rgba(0, 0, 0, 0.5) 0px 0px 0px 2px, rgba(255, 255, 255, 0.19) 0px 0px 14px 0px, 
- **Secondary button** (“The Raycast Keyboard”): background #130d0e · text #ffffff · radius 1000px · padding 4px 12px · 500 14px Inter
- **Link** (“Linear Create, search and modify your is”): transparent background · text #ffffff · radius 20px · padding 0px · 400 16px Inter
- **Input**: transparent background · text #ffffff · radius 0px · padding 0px 8px 0px 4px · 400 14px Segoe UI Variable
- **Card** (“Linear Create, search and modify your is”): transparent background · text #ffffff · radius 20px · padding 0px · 400 16px Inter · shadow rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset, rgba(7, 13, 79, 0.05) 0px 0px 20
- **Badge** (“AI Chat”): background #1b1c1e · text #ffffff · radius 6px · padding 0px 6px · 500 14px Inter

## Do

- Use #07080a as the dominant canvas.
- Reserve white for key headings and high-priority interface text.
- Keep secondary navigation and copy muted with measured gray tones.
- Give hero messaging broad negative space and centered alignment.
- Frame product previews with subtle dark borders and inset highlights.
- Use pale download buttons as clear, high-contrast actions.

## Don't

- Do not introduce bright accent colours across the page chrome.
- Do not fill the hero with decorative imagery or extra UI.
- Do not use heavy shadows to lift every card.
- Do not make every section a centered text block.
- Do not treat colours inside product mockups as global brand colours.
- Do not crowd the long-form section rhythm with tight spacing.

## Agent prompt

Build a new Raycast-style productivity page on a near-black #07080a canvas. Use Bright Paper #ffffff for concise headlines and primary text, Soft Nickel #9c9c9d for secondary links, and Graphite Edge #161718 or Panel Charcoal #1a1b1d for card framing. Keep the page wide but content-controlled, with a compact floating navigation and generous vertical breathing room. Set typography in Inter, favoring regular or medium weights and natural casing; reserve GeistMono for technical details. Make the hero sparse and centered, then introduce varied feature sections with crisp product UI mockups in dark bordered cards. Use the pale download action as the key contrast point. Keep shadows subtle, gradients low-contrast, and any vivid colour confined to embedded product visuals.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Sparse single-column hero under a compact floating navigation; centered headline and supporting copy. | primary download action, platform availability note | near-black canvas, white headline, pale CTA |
| 2 | product-showcase | Centered section followed by a wide, full-bleed multi-column product interface gallery. | explore launcher interface, scan product examples | dark UI cards, dense preview grid, subtle borders |
| 3 | feature-split | Wide, asymmetrical content area with left-aligned headline and keyboard-focused illustration. | emotional product benefit, shortcut demonstration | keycap visuals, dark layered media |
| 4 | integrations | Wide multi-column feature area with extension previews and a secondary extensions callout. | browse integrations, discover more extensions | app logos, product cards, mixed alignment |
| 5 | feature-split | Two-column AI feature presentation with supporting product interface and controls. | explore AI features, interact with chat UI | AI badges, dark app mockup, compact controls |
| 6 | testimonials | Centered introduction above a broad, multi-column collection of customer testimonials. | social proof, scan named endorsements | portrait imagery, dark cards, compact attribution |
| 7 | feature-grid | Centered headline with a three-column presentation of repeatable-work automation features. | learn automation use cases, inspect snippets | feature cards, UI previews, short descriptions |
| 8 | feature-grid | Wide twelve-column capability overview built from compact actions and supporting visuals. | scan capability list, jump to a feature | compact feature tiles, small illustrations |
| 9 | cta | Centered community introduction with a wide set of community and resource links. | join community, follow social channels | community cards, link-led actions |
| 10 | footer | Single-column closing area with no detected section heading or extracted text. | navigate site resources | dark footer, compact link groups |

## Source CSS custom properties (selected)

```css
--spacing-none: 0px;
--spacing-0-5: 4px;
--spacing-1: 8px;
--spacing-1-5: 12px;
--spacing-2: 16px;
--spacing-2-5: 20px;
--spacing-3: 24px;
--spacing-4: 32px;
--spacing-5: 40px;
--spacing-6: 48px;
--spacing-7: 56px;
--spacing-8: 64px;
--spacing-9: 80px;
--spacing-10: 96px;
--spacing-11: 112px;
--spacing-12: 168px;
--spacing-13: 224px;
--main-font: "Inter", "Inter Fallback", sans-serif;
--monospace-font: "jetBrainsMono", "jetBrainsMono Fallback", Menlo, Monaco, Courier, monospace;
--grid-gap: 32px;
--background: #07080a;
--reverse-background: #fff;
--font-color-rgb: 255, 255, 255;
--reverse-font-color-rgb: 0, 0, 0;
--lines-color-rgb: 255, 255, 255;
--radius-md: 6px;
--color-bg: #07080a;
--color-bg-100: #101111;
--color-bg-200: #18191a;
--color-bg-300: #313133;
--color-bg-400: #494b4d;
--color-fg: #f4f4f6;
--color-fg-200: #c2c7ca;
--color-fg-300: #78787c;
--color-fg-400: #5e6366;
--color-yellow: #ffc533;
--color-yellow-transparent: #ffc53326;
--color-red: #ff6161;
--color-red-transparent: #ff616126;
--color-blue: #57c1ff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/raycast-com