# Raycast — Design System
> A powerful, extendable productivity launcher for macOS and Windows.
- **Canonical:** https://uiuxskills.com/library/raycast
- **Source:** https://www.raycast.com
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-06-09T23:13:47.226Z

---

---
version: alpha
name: Raycast
description: A powerful, extendable productivity launcher for macOS and Windows.
tone: Professional, efficient, minimalist, and highly functional.
color-scheme: dark
colors:
  primary: "#FF6363"
  secondary: "#56C2FF"
  surface: "#070921"
  surface-container: "#1A1D3D"
  on-surface: "#FFFFFF"
  on-surface-dim: "#A0A0B0"
  error: "#FF4D4D"
  success: "#59D499"
  outline: "#2D3055"
  focus-ring: "#56C2FF"
typography:
  display-lg:
    fontFamily: Inter, sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: Inter, sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: Inter, sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: Inter, sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: Inter, sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: Inter, sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.875rem
  label-md:
    fontFamily: Inter, sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#FFFFFF"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#FF8080"
  button-secondary:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  card:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
  card-elevated:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.secondary}"
  link-hover:
    textColor: "#80D0FF"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface-dim}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.surface}"
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-medium: 250ms
  easing-standard: ease-in-out
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.2)
  md: 0 4px 6px rgba(0,0,0,0.3)
  lg: 0 10px 15px rgba(0,0,0,0.4)
---

## Overview

Raycast is a high-performance, keyboard-centric productivity tool designed for speed and precision. Its visual identity is defined by a dark, sleek, and professional aesthetic that emphasizes clarity, efficiency, and native-feeling interactions.

## Colors

The color palette is optimized for a dark-mode environment, using high-contrast accents against deep, atmospheric backgrounds to ensure readability and focus.

*   Primary (#FF6363): The signature brand red used for primary call-to-action buttons and key highlights.
*   Secondary (#56C2FF): Accent color for navigational links and focus states.
*   Surface (#070921): The deep, dark background color for the main interface.
*   Surface-container (#1A1D3D): A lighter, distinct surface used for cards and UI containers.
*   On-surface (#FFFFFF): Primary text color for maximum legibility on dark backgrounds.
*   On-surface-dim (inferred) (#A0A0B0): Secondary text color for labels, metadata, and non-essential information.
*   Error (inferred) (#FF4D4D): Semantic color reserved for destructive actions and error states.
*   Success (#59D499): Semantic color used for success states and positive feedback.
*   Outline (inferred) (#2D3055): Border color for input fields and subtle dividers.
*   Focus-ring (inferred) (#56C2FF): High-visibility ring for accessibility and keyboard navigation.

## Typography

The typography system relies on the Inter typeface to provide a clean, neutral, and highly legible foundation for technical content.

*   Display-lg/md (inferred): Large-scale hero headlines designed for impact.
*   Headline-lg/md/sm (inferred): Hierarchical headers for section organization.
*   Body-md/sm (inferred): Standard and compact body text for interface content.
*   Label-md/sm (inferred): UI labels for buttons, badges, and metadata.

## Layout

Raycast utilizes a centered, container-based layout with a strict max-width constraint to maintain optimal line lengths and readability. The system follows a 4px-based grid, using a 16px spacing scale (`spacing.md`) as the standard gutter between elements. The page structure follows a logical flow: `nav`, `hero`, `features`, `extensions`, and `footer`. The hero section is composed of a centered headline and subhead, supported by a primary CTA and a secondary link. The interface is mobile-first, collapsing navigation into a drawer on smaller viewports.

## Elevation & Depth

Depth is established through subtle, layered shadows that mimic a native application environment. These shadows provide visual separation between the background and interactive elements.

*   Elevation.sm: Used for subtle card lift and minor UI separation.
*   Elevation.md: The standard depth for interactive cards and floating containers.
*   Elevation.lg: Used for modals, drawers, or high-priority overlays that require focus.

## Shapes

The design language balances technical precision with modern softness by utilizing a rounded corner scale. Interactive components like buttons and cards typically feature a moderate border-radius of 8px (`rounded.md`) to 12px (`rounded.lg`), which provides a friendly yet professional aesthetic.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use `{colors.primary}` for primary actions and `{colors.surface-container}` for secondary actions. They are designed to be highly visible and use `{typography.label-md}` for clear, concise labeling.

### Card
Cards are the primary container for content, utilizing `{colors.surface-container}` and `{rounded.md}`. Use these to group related information or features, ensuring consistent `{spacing.md}` between them.

### Input Field
Input fields feature a `{colors.surface}` background with a `{colors.outline}` border. Upon focus, the border transitions to `{colors.focus-ring}` to provide clear accessibility feedback.

### Badge
Badges are used for status indicators or labels. Use `badge-success` for positive states and `badge-error` for destructive or error states, ensuring the typography remains legible at `label-sm` sizes.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary call-to-action buttons. | Never use `{colors.primary}` for secondary or tertiary buttons. |
| Apply `{rounded.md}` to all interactive cards. | Avoid using sharp corners (0px) on interactive components. |
| Use `{typography.body-md}` for primary content blocks. | Do not mix `{typography.display-lg}` with body text in the same container. |
| Ensure `{colors.outline}` is used for all subtle dividers. | Never use low-contrast text on `{colors.surface-container}`. |
| Use `{colors.secondary}` for all navigational links. | Avoid excessive use of shadows on flat UI elements. |
| Maintain consistent `{spacing.md}` between card elements. | Do not use `{colors.error}` for non-destructive actions. |
| Use `{elevation.md}` for floating cards. | Do not use `{elevation.lg}` for standard list items. |
| Apply `{colors.focus-ring}` to `input-field-focus` states. | Never omit focus states on interactive elements. |

## Content Style

CTA labels should be imperative, concise, and action-oriented (e.g., "Download", "Learn more"). Avoid long phrases; focus on the immediate result of the interaction.

Headings should be direct, benefit-driven, and punchy. They should clearly communicate the value proposition of the section without unnecessary fluff.

Maintain high copy density by using short, scannable paragraphs and frequent bullet points. Use whitespace generously to separate sections and keep the interface feeling fast and lightweight.

## Imagery & Icons

The imagery style is mixed, utilizing high-fidelity product screenshots, clean iconography, and abstract gradients to convey a modern, technical vibe. Icons should be sharp and consistent with the minimalist aesthetic, while product imagery should be presented cleanly, often within a card container to maintain visual order.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Raycast, a minimal enterprise productivity tool with a precise, keyboard-centric aesthetic. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.md}` — never hardcode hex, px, or font-size values.
2. Use only the component variants listed under `components:`. Do not invent new button styles, badge variants, or card types the spec doesn't define.
3. Follow the Layout narrative: centered container, 4px-based grid, `{spacing.md}` as the standard gutter, mobile-first with one breakpoint at 768px.
4. Apply elevation tokens semantically: `{elevation.md}` for floating cards, `{elevation.lg}` only for modals and overlays — never on flat list items.
5. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict before proceeding.

## Output contract

**Must:**
- Use all tokens by name on every generated component.
- Include hover, focus, and disabled states for interactive components when the spec defines them (e.g., `button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{rounded.md}` to cards and interactive containers; `{rounded.sm}` to inputs and badges; `{rounded.full}` only for pill-shaped elements.
- Use `{motion.duration-medium}` and `{motion.easing-standard}` on all state transitions.
- Write CTAs and headings per the Content Style section: imperative, concise, benefit-driven.

**Must NOT:**
- Invent colors, font sizes, radii, or spacing values absent from the spec.
- Use generic system defaults when a brand token exists.
- Add emoji, filler copy, or decorative marketing language.
- Apply `{colors.primary}` to secondary or tertiary buttons.
- Omit focus rings on any interactive element.
- Rewrite page copy, button labels, navigation items, or alter page structure as a side effect of applying tokens.

## When in doubt
- If a value isn't specified, ask the user before inventing a token.
- Prefer composing existing components over introducing new ones.
- For ambiguous backgrounds, default to `{colors.surface-container}`; for text on those surfaces, use `{colors.on-surface}`.
- Tokens marked "(inferred)" in the spec are visual approximations; if an authoritative source exists, it takes precedence.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px per the Layout section.