Skip to content
Back to extractor

Overview

Raycast employs a sophisticated dark-mode aesthetic rooted in glass-morphism and careful typography hierarchy. The palette is anchored by deep charcoal backgrounds (grey-900 to grey-700) with high-contrast white text, accented by a vibrant red (#ff6363) that draws attention to interactive and critical elements. Every component is designed for clarity and speed—inputs feel responsive, modals layer gracefully with backdrop blur, and spacing is meticulous to support visual scanning.

Signature traits: Dark minimalism, glass-morphic surfaces with backdrop blur, high-contrast monochrome base, red accent for CTAs, precise typographic hierarchy, smooth micro-interactions, and inset/shadow depth without heavy drop-shadows.

Colors

| Role | Token | Hex/Value | Usage | |------|-------|-----------|-------| | Background | --color-grey-900 | #1a1a1a | Page and app backgrounds | | Surface | --color-grey-800 | #2a2a2a | Cards, panels, modals | | Surface Accent | --color-grey-700 | #3a3a3a | Gradient highlights, secondary surfaces | | Text Primary | --color-base-white | #ffffff | Headings, primary body, CTAs | | Text Secondary | --color-grey-200 | #d1d1d1 | Body copy, secondary labels | | Text Tertiary | --color-grey-300 | #b8b8b8 | Placeholders, muted text | | Border Default | --color-grey-500 | #6b6b6b | Input borders, dividers | | Border Subtle | rgba(255,255,255,0.06) | — | Card borders, inset highlights | | Accent Primary | --color-red-dark | #ff6363 | Buttons, highlights, error states | | Accent Muted | --color-red-muted | #2c1617 | Danger button background | | Success | --color-success | #59d499 | Confirmation, success messages | | Error | --color-error | #ff6363 | Error messages, destructive actions |

Typography

| Role | Family | Size | Weight | Line Height | Letter Spacing | Usage | |------|--------|------|--------|-------------|----------------|-------| | Display | Inter | 32px | 600 | 1.6 | 0.2px | Hero headlines, main titles | | Heading XL | Inter | 20px | 600 | 1.6 | 0.2px | Section titles, page headers | | Heading | Inter | 18px | 500 | 1.6 | 0.2px | Subsection titles | | Body Large | Inter | 16px | 500 | 1.6 | 0.2px | Feature descriptions, emphasis | | Body | Inter | 14px | 500 | 1.6 | 0.2px | Standard paragraph text | | Body Small | Inter | 13px | 400 | 1.6 | 0.1px | Secondary text, captions | | Caption | Inter | 12px | 500 | 1.33 | 0.2px | Labels, metadata, badges | | Mono | Geist Mono | 13px | 400 | 1.6 | 0.01em | Code snippets, commands |

Layout

| Token | Value | Context | |-------|-------|---------| | Spacing XS | 4px | Minimal inline gaps, tightly packed elements | | Spacing SM | 8px | Component internal padding, small gaps | | Spacing MD | 12px | Medium gaps between UI elements | | Spacing LG | 16px | Standard component padding, moderate gaps | | Spacing XL | 20px | Large gaps, section padding | | Spacing 2XL | 24px | Extra-large component padding | | Spacing 3XL | 32px | Section vertical spacing | | Spacing 4XL | 40px | Large feature spacing | | Spacing 5XL | 48px | Extra-large feature spacing | | Max Width (default) | 640px | Content container max-width | | Max Width (large) | 1064px | Full-width feature layouts | | Grid Gap | 16px | Default gap between grid items |

Responsive strategy: Mobile-first approach with breakpoints at 480px (medium), 640px (tablet), and 720px+ (desktop). Components scale typography and spacing at each breakpoint; modals and dialogs adjust max-width; grid layouts shift from single-column to multi-column.

Elevation & Depth

| Level | CSS Value | Usage | |-------|-----------|-------| | Inset Subtle | inset 0 1px 0 0 rgba(255, 255, 255, 0.05) | Top edge highlights on cards | | Border Subtle | 0 0 0 1px rgba(255, 255, 255, 0.25) | Card and input outlines | | Inset Shadow | inset 0 -1px 0 0 rgba(0, 0, 0, 0.2) | Bottom shadow for depth | | Elevation MD | 0 4px 40px 10px rgba(154, 170, 255, 0.05) | Hover elevation for interactive elements | | Elevation LG | 0 0 40px 20px rgba(255, 255, 255, 0.03) | Modal and overlay shadows | | Backdrop Blur | backdrop-filter: blur(10px–100px) | Glass-morphic surfaces |

Shapes

| Token | Value | Applied To | |-------|-------|-----------| | none | 0px | Unavailable in this design system | | xs | 4px | Minor UI details, small buttons | | sm | 6px | Buttons, inputs, small components | | md | 8px | Cards, search boxes, standard dialogs | | lg | 12px | Panels, larger modals, windows | | xl | 16px | Major containers, full-screen overlays | | full | 9999px | Pills, badge backgrounds, circular elements |

Components

Search & Input

  • —Search box: Max 500px width, centered with 20% margin-top; gradient background (grey-800 → grey-700), subtle border; input text is white, transparent background, bottom border only
  • —Search input: Flex-grow for responsiveness, 16px padding, no visible border until focused
  • —Loading indicator: Animated gradient sweeping left-to-right (Night Rider animation) at bottom of search area, 2s infinite loop

Buttons

  • —Light variant: Grey-50 background, white on hover, subtle inset shadows with top+bottom beveling
  • —Dark variant: Linear gradient 180° (rgba(255,255,255,0.03) → rgba(255,255,255,0.1)), inset highlights, border with white at 0.25 opacity
  • —Danger variant: Red text (#ff6363), dark red muted background (#2c1617), red border (#833637)

Cards & Surfaces

  • —Standard card: Radial gradient background (100% 100% at 50% 0, grey-800 → grey-700), 1px border rgba(255,255,255,0.06), inset top highlight, rounded 8px
  • —Glass effect: Backdrop blur 2–100px, border rgba(255,255,255,0.08–0.3), inset highlights for depth
  • —Hover state: Slight elevation increase, border opacity boost, background opacity shift

Modals & Overlays

  • —Backdrop: Fixed, inset 0, dark with backdrop blur, z-index 50
  • —Modal body: Max 500px, centered with auto margins, smooth scale animation (0.95 → 1.0 on enter/exit over 0.2s)
  • —Padding: 16–20px internal, 8px between sections

Transitions

  • —All state changes: 0.2–0.3s ease or cubic-bezier(.4, 0, .2, 1)
  • —Opacity transitions: 0.3s ease
  • —Transform (scale, translate): 0.2s cubic-bezier
  • —Hover lift: inset shadows animate smoothly

Do's and Don'ts

| Do ✓ | Don't ✗ | |------|---------| | Use high-contrast white text on dark surfaces | Use light grey text on dark backgrounds (insufficient WCAG contrast) | | Apply subtle inset shadows for depth, never heavy drop-shadows | Add thick outer shadows or multiple shadow layers | | Use backdrop blur to separate surfaces in modals/overlays | Rely on solid colour to define surface separation | | Organize spacing in multiples of 4px (xs, sm, md, lg…) | Mix spacing scales arbitrarily (e.g., 14px, 18px) | | Reserve the red accent (#ff6363) for CTAs, errors, and highlights | Use red for secondary or neutral UI elements | | Employ radial gradients (100% 100% at 50% 0) for subtle top lighting | Use complex gradients that distract from content | | Keep rounded corners at 8px or 12px for standard components | Use mixed or unpredictable border radius values | | Animate state changes with ease or cubic-bezier(.4, 0, .2, 1) | Use linear transitions or overly long durations (>0.5s) | | Test contrast ratios for all text; aim for WCAG AA or better | Assume dark mode guarantees sufficient contrast automatically |

Agent Prompt Guide

You are working within the Raycast design system. Key constraints:

Colours:

  • —Background: #1a1a1a (grey-900)
  • —Surface: #2a2a2a (grey-800)
  • —Text Primary: #ffffff (white)
  • —Text Secondary: #d1d1d1 (grey-200)
  • —Text Tertiary: #b8b8b8 (grey-300)
  • —Border: rgba(255, 255, 255, 0.06) or #6b6b6b (grey-500)
  • —Accent: #ff6363 (red-dark)
  • —Success: #59d499
  • —Error: #ff6363

Typography:

  • —Display/Hero: Inter, 32px, 600, 0.2px letter-spacing
  • —Heading: Inter, 18–20px, 500–600, 0.2px letter-spacing
  • —Body: Inter, 14px, 500, 0.2px letter-spacing
  • —Caption: Inter, 12–13px, 400–500, 0.1–0.2px letter-spacing
  • —Mono: Geist Mono, 13px, 400, 0.01em letter-spacing

Spacing: Use tokens only: 4px (xs), 8px (sm), 12px (md), 16px (lg), 20px (xl), 24px (2xl), 32px (3xl), 40px (4xl), 48px (5xl)

Radius: 6px (sm), 8px (md), 12px (lg), 16px (xl), 9999px (full)

Shadows & Depth:

  • —Inset highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.05)
  • —Border: 0 0 0 1px rgba(255, 255, 255, 0.25)
  • —Inset depth: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2)
  • —Hover lift: 0 4px 40px 10px rgba(154, 170, 255, 0.05)
  • —Modal: 0 0 40px 20px rgba(255, 255, 255, 0.03)
  • —Glass: backdrop-filter: blur(10px to 100px)

Transitions: 0.2–0.3s ease or cubic-bezier(.4, 0, .2, 1) for most interactions

Rules:

  1. —Never use colours outside the palette
  2. —Never mix spacing scales (e.g., no 14px or 18px padding)
  3. —Reserve red (#ff6363) for CTAs and errors only
  4. —Always apply subtle inset shadows for surface depth
  5. —Use radial gradients sparingly for top-light effects
  6. —Test text contrast: white (#fff) on grey-900 passes WCAG AA
  7. —Animate state changes with easing; avoid linear
  8. —Keep rounded corners consistent: 8px for cards/buttons, 12px for panels