skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-raycast

Apply Raycast's design system tokens and component styles when generating UI.

Updated Feb 23, 2026
Search Tags:#typography#design system#css#design tokens#dark mode#raycast#ui generation
One-click install
npx skills add https://github.com/deepparser/skills --skill design-raycast-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-raycast
Source: https://github.com/deepparser/skills/tree/main/design-raycast
Command: npx skills add https://github.com/deepparser/skills --skill design-raycast-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Raycast's visual identity requires exact design tokens — colors, typography, shadows, and spacing — that are tedious to reverse-engineer from the live site. This Skill provides the complete Raycast design system so generated UI matches the brand without manual inspection. ## Core Features & Use Cases - Complete Design Tokens: Exact color palette (#07080a background, #FF6363 Raycast Red), Inter typography scale with OpenType features, and an 8px-based spacing system. - Component Specifications: Detailed styling for buttons, cards, forms, navigation, keyboard shortcut keys, and badges, including the signature multi-layer macOS-native shadow system. - Visual Reference Previews: Bundled light and dark theme HTML previews (preview.html, preview-dark.html) for verifying exact CSS values and component structure. - Use Case: When asked to build a landing page or dashboard styled like Raycast, the Skill supplies every hex value, shadow stack, border-radius, and responsive breakpoint needed to produce a faithful implementation. ## Quick Start Use the design-raycast skill to create a dark-themed hero section and feature cards styled like Raycast's website.

Frequently Asked Questions about design-raycast

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a website look like Raycast?▼

Use a near-black blue-tinted background (#07080a), Inter font with positive letter-spacing (+0.2px), and multi-layer shadows with inset highlights. Reserve Raycast Red (#FF6363) for hero accents and use translucent white pill buttons for primary CTAs.

What colors does the Raycast design system use?▼

The core palette is near-black blue #07080a for backgrounds, near-white #f9f9f9 for text, and Raycast Red #FF6363 as the brand accent. Semantic accents include blue #55b3ff for links, green #5fc992 for success, and yellow #ffbc33 for warnings.

What font does Raycast use on its website?▼

Raycast uses Inter for all headings, body text, and buttons, with OpenType features calt, kern, liga, and ss03 enabled. GeistMono is used for code elements, and SF Pro Text appears in select macOS-native UI contexts.

Does this design system support light mode?▼

The Skill is primarily a dark-mode system built around the #07080a background. It bundles both a standard preview.html and a preview-dark.html reference, but the documented tokens and component specs assume dark surfaces throughout.

Why do Raycast-style shadows look flat in my implementation?▼

Single-layer drop shadows break the aesthetic. Raycast uses paired shadows: an outer ring for containment plus inset top highlights (rgba white) and inset bottom darks, simulating physical glass depth. Always combine outer and inset layers.

Related Skills

Explore More Design & Creative Skills→
pikkujspikkujs

copywriting

Generate conversion-focused marketing copy for web pages.

Official
Intermediate
carson-sweetcarson-sweet
6

SweetClaude Mockup Sandbox

Create isolated React UI mockups with Vite, Tailwind CSS, and shadcn/ui.

Community
Advanced
SwimmingLiuSwimmingLiu
1

audit

Audit UI quality across accessibility, performance, theming, and responsive design.

Community
Advanced
figmafigma
1.9k

implement-design

Translate Figma designs into UI code using design tokens and existing components.

Official
Advanced