Raycast Style

---
name: raycast-command-dark
description: Apply the Raycast Style visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Raycast Style, mentions Raycast dark, command palette UI, launcher aesthetic, or describes floating command palette centerpiece, single coral-red accent, film-grain noise overlay — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Raycast Style Design System

Dark, compact command-tool styling in the Raycast mold: a floating ⌘K palette as the centerpiece, charcoal panels with a film-grain noise overlay, one coral-red accent (#ff6363) doing all the branding, tight Inter type at modest weights, and an extension-store grid of small utilitarian cards.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Raycast Style.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (Raycast dark, command palette UI, launcher aesthetic, compact dark utility), or describes its traits: floating command palette centerpiece; single coral-red accent; film-grain noise overlay; compact 6px-radius panels; tight Inter at 400–500; extension-store card grid.

## Design tokens

### Color palette

- Near-black page canvas: `#0d0d0f` (--color-bg)
- Palette panel and cards: `#17171a` (--color-surface)
- Hovered/selected rows and nested wells: `#212126` (--color-surface-2)
- Primary text: `#f2f2f2` (--color-text)
- Shortcut hints, subtitles, metadata: `#9c9ca3` (--color-text-muted)
- Coral red — the single brand accent for CTAs, highlights, and the logo glow: `#ff6363` (--color-accent)
- Panel and card edges: `#1f1f22` (--color-border)

### Typography

- Display / headings: Inter (fallback: -apple-system, Segoe UI, sans-serif)
- Body: Inter (fallback: -apple-system, Segoe UI, sans-serif)
- Mono / data: JetBrains Mono (fallback: SFMono-Regular, Menlo, monospace)
- Type scale: 1.25 ratio, base 15px — computed steps: 15px / 19px / 23px / 29px / 37px / 46px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 600, line-height 1.15, letter-spacing -0.02em
- Body: line-height 1.4, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 6, 8, 12, 16, 24, 40, 64 — Compact utility density: palette rows are 40–44px, card padding 16px, gaps 12–16px — everything sized for a launcher window, even on the web.
- Border radius: sm 6px, md 8px, lg 12px — 6px on controls and cards, 12px on the floating palette window.
- Border treatment: 1px solid #1f1f22 — Barely-there edges one step above the surface; separation mostly comes from surface-2 fills.

### Shadows

- minimal: `0 1px 2px rgba(0,0,0,0.4)` — Cards and inline panels
- window: `0 24px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06)` — The floating command palette and modals

### Layout

- Max content width: 1080px
- Centered floating palette as hero, canvas dimmed around it
- Extension-store grid: 3–4 columns of small icon-led cards
- Compact centered sections with modest 64px rhythm
- Real keyboard-shortcut chrome (kbd hints, action bars) shown in every product mock

### Effects

- Film-grain noise overlay at 2–4% opacity across dark surfaces
- Soft red radial glow behind the logo or palette
- Keyboard-selection highlight moving between rows in demos
- kbd-styled shortcut hints aligned to the right edge of rows

### Motion

- Easing: cubic-bezier(0.32, 0.72, 0, 1); durations 100ms / 180ms / 300ms
- Palette appears with a fast 100ms fade-and-scale from 0.98 — launcher-instant
- Selection highlight snaps between rows with no easing tail
- Hover states are subtle surface-2 washes, no lifts or glows
- Demo animations pause under prefers-reduced-motion

## CSS variables (drop-in)

```css
:root {
  --color-bg: #0d0d0f;
  --color-surface: #17171a;
  --color-surface-2: #212126;
  --color-text: #f2f2f2;
  --color-text-muted: #9c9ca3;
  --color-accent: #ff6363;
  --color-border: #1f1f22;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-minimal: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-window: 0 24px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
  --border-default: 1px solid #1f1f22;
  --font-display: Inter, -apple-system, "Segoe UI", sans-serif;
  --font-body: Inter, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", SFMono-Regular, Menlo, monospace;
  --text-base: 15px;
  --leading-heading: 1.15;
  --leading-body: 1.4;
  --tracking-heading: -0.02em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --duration-fast: 100ms;
  --duration-base: 180ms;
  --duration-slow: 300ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Minimal transparent bar over the canvas: small logo, quiet links, a #ff6363 'Download' pill; gains #0d0d0f fill and hairline on scroll
- **Hero:** Short punchy headline in Inter 600, one-line subhead, then the floating command palette mock with the window shadow and noise texture as the visual centerpiece
- **Card:** #17171a fill, 1px #1f1f22 border, 8px radius, 16px padding; extension icon top-left, name in 500, install count in text-muted
- **Button (primary):** #ff6363 fill, near-black text, 8px radius, 36px tall, 500 weight; brightens slightly on hover
- **Button (secondary):** surface-2 fill, light text, same geometry; used for 'Learn more' and store actions
- **Form fields:** Palette-style: borderless #17171a well, 8px radius, 15px input text with muted placeholder; focus adds a 2px #ff6363 ring at 60%

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The floating command palette: a centered ~750px dark panel, 12px radius, subtle noise texture, a large borderless search input with placeholder text, and keyboard-highlighted result rows — rendered as the hero of the marketing page itself. Spend boldness here; keep everything else quiet.

## Do

- Make the command palette the hero — show real rows, real shortcuts, real selection states
- Hold the line at one accent: coral red for CTAs and highlights, gray for everything else
- Add the noise overlay to large dark surfaces; it is what keeps the charcoal from looking vector-flat
- Keep components launcher-compact — 40px rows, 16px padding — even in marketing contexts

## Don't

- No gradients as fills; the red is flat and the surfaces are matte
- Don't inflate the density with airy SaaS padding — compactness is the identity
- Avoid showing shortcuts that don't exist; the audience will try them
- Don't add a second accent color for states — use surface steps and opacity instead

## Accessibility notes

- #ff6363 on #0d0d0f measures ~6.5:1 and passes AA, but near-black text on a #ff6363 button is the safe fill direction; white-on-coral fails for small text
- text-muted #9c9ca3 passes on bg and surface but not on surface-2 hover fills below 14px — keep shortcut hints at 12px+ only on resting surfaces
- The noise overlay must stay under ~4% opacity or it degrades text edges for low-vision readers

## Reference sites

- Raycast: https://www.raycast.com
- Raycast Store: https://www.raycast.com/store

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip raycast-command-dark.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/raycast-command-dark.json

Settings → Capabilities → Skills → Upload skill → raycast-command-dark.zip