How to build a UI in the Raycast style

:root {
  /* Raycast style — extracted from raycast.com by taste-skill */
  --canvas: #07080A;
  --surface: #141517;
  --text: #FFFFFF;
  --text-muted: #9CA3AF;
  --accent: #FF6363;
  --border: rgba(255, 255, 255, 0.08);
  --font-heading: Inter, Inter, system-ui, -apple-system, sans-serif;
  --font-body: Inter, Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'JetBrains Mono', ui-monospace, monospace;
  --h1-size: 64px;
  --h1-tracking: 0em;
  --h1-weight: 600;
  --radius-button: 10px;
  --radius-common: 8px;
  --shadow-common: 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 inset;
  --ease: cubic-bezier(0.23, 1, 0.32, 1), cubic-bezier(0.23, 1, 0.32, 1), cubic-bezier(0.23, 1, 0.32, 1), cubic-bezier(0.23, 1, 0.32, 1), cubic-bezier(0.23, 1, 0.32, 1), cubic-bezier(0.23, 1, 0.32, 1);
  --duration: 0.4s, 0.2s, 0.2s, 0.2s, 0.4s, 0.4s;
}

// tailwind.config.js — Raycast style tokens (taste-skill)
module.exports = {
  theme: {
    extend: {
      colors: {
        canvas: "#07080A",
        surface: "#141517",
        ink: "#FFFFFF",
        muted: "#9CA3AF",
        accent: "#FF6363",
        line: "rgba(255, 255, 255, 0.08)",
      },
      fontFamily: {
        heading: ["Inter", 'Inter', 'system-ui', 'sans-serif'],
        sans: ["Inter", 'Inter', 'system-ui', 'sans-serif'],
        mono: ["JetBrains Mono", 'ui-monospace', 'monospace'],
      },
      fontSize: { display: ["64px", { letterSpacing: "0em", fontWeight: "600" }] },
      borderRadius: { button: "10px", card: "8px" },
      boxShadow: { brand: "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 inset" },
      transitionTimingFunction: { brand: "cubic-bezier(0.23, 1, 0.32, 1), cubic-bezier(0.23, 1, 0.32, 1), cubic-bezier(0.23, 1, 0.32, 1), cubic-bezier(0.23, 1, 0.32, 1), cubic-bezier(0.23, 1, 0.32, 1), cubic-bezier(0.23, 1, 0.32, 1)" },
    },
  },
};

---
name: raycast-style
description: Build UI in the Raycast visual style (Desktop-Class macOS Acrylic Glass & Crimson Spotlight). Use when the user asks for a Raycast-like look.
---

# Raycast Style — Quick Rules (source: raycast.com, extracted by taste-skill)

## Tokens
- canvasBg: #07080A — Primary Raycast page canvas
- surfaceElevated: #141517 — Primary elevated card & bento surface
- surfaceSecondary: rgba(0, 0, 0, 0.6) — Secondary interactive container / hover fill
- borderPrimary: rgba(255, 255, 255, 0.08) — Primary structural divider (1px rgba(255,255,255,0.08))
- borderSecondary: rgba(255, 255, 255, 0.06) — Secondary nested module or pill border
- textPrimary: #FFFFFF — Hero H1, section H2 & high-contrast foreground
- textMuted: #9CA3AF — Lead paragraphs, descriptions & muted labels
- accentPrimary: #FF6363 — Primary interactive CTA & brand highlight (10px)
- accentSecondary: rgba(255, 255, 255, 0.1) — Secondary badge, syntax or telemetry highlight

## Typography
- Heading font: Inter; body: Inter; mono: JetBrains Mono
- Hero H1: 64px | line-height 70.4px (leading-[1.1]) | letter-spacing 0px (tracking-[0em]) | weight 600 (font-[600]) | color #FFFFFF (text-white) | font Inter
- Section H2 (Primary): 32px | line-height 38.4px (leading-[1.2]) | letter-spacing -0.8px (tracking-[-0.025em]) | weight 500 (font-[500]) | color #FFFFFF (text-white) | font Inter
- Section H2 (Secondary): 20px | line-height 24px (leading-[1.2]) | letter-spacing 0.2px (tracking-[0.01em]) | weight 500 (font-[500]) | color #FFFFFF (text-white) | font Inter
- Card / Feature H3: 24px | line-height 28.8px (leading-[1.2]) | letter-spacing 0.2px (tracking-[0.008em]) | weight 500 (font-[500]) | color #FFFFFF (text-white) | font Inter

## Components
- Primary button: height 32px, padding 8px 12px, radius 10px, bg rgba(255, 255, 255, 0.1), text #FFFFFF, 13px / 400
- Card: bg rgba(0, 0, 0, 0.44), border 1px solid rgba(255, 255, 255, 0.08), radius 19px, padding 8px 8px

## Never
- NEVER substitute generic uncalibrated gray backgrounds for Raycast’s exact #07080A canvas and #141517 surface pairing.
- NEVER replace Inter display typography or ignore its signature scale (64px / 1.1 (w600)).
- NEVER use thick opaque borders that clash with rgba(255, 255, 255, 0.08) (1px rgba(255,255,255,0.08)).
- NEVER deviate from the signature button geometry (10px) or introduce off-brand saturated gradients.
- NEVER use default browser monospace when rendering code or telemetry—always pair with JetBrains Mono.

Full 120-line spec: https://taste-skill.pages.dev/taste/raycast/

npx taste-skill add raycast