返回设计库
R

Raycast

Raycast

访问网站

生产力启动器。 sleek dark chrome,鲜艳渐变强调,键盘优先设计。

深色chrome鲜艳渐变键盘优先命令面板mac原生风格

配色方案

primary
secondary
background
surface
text
muted
border

字体规范

标题字体SF Pro Display, system-ui, sans-serif
正文字体SF Pro Text, system-ui, sans-serif
基础字号14px
行高1.4
字重400, 500, 600, 700

标题层级

h1Raycast Heading
h2Raycast Heading
h3Raycast Heading
h4Raycast Heading

DESIGN.md

# Raycast Design System

## Visual Theme & Atmosphere
Sleek dark chrome. The deep charcoal (#1A1A1A) background with vibrant gradients (red-orange) creates macOS-native sophistication. Keyboard-first interactions with command palette UI. Every pixel feels polished by developers who obsess over details.

## Color Palette & Roles
| Token | Hex | Role |
|-------|-----|------|
| Primary | #FF6363 | Coral accent |
| Secondary | #FF9F43 | Orange accent |
| Background | #1A1A1A | Dark chrome |
| Surface | #252525 | Elevated surfaces |
| Text | #FFFFFF | Primary text |
| Muted | #A0A0A0 | Secondary text |
| Border | #333333 | Subtle dividers |

## Typography Rules
- **Fonts**: SF Pro Display/Text (macOS native)
- **Base Size**: 14px (compact)
- **Line Height**: 1.4

## Component Stylings
- **Command Palette**: Dark overlay, search input, list items
- **Icons**: Colorful gradient icons
- **Shortcuts**: Keyboard combo badges

## Agent Prompt Guide
Dark chrome UI, vibrant gradient accents, command palette patterns, keyboard shortcuts.

常见问题

Raycast 的设计风格是什么?

生产力启动器。 sleek dark chrome,鲜艳渐变强调,键盘优先设计。

Raycast 使用什么主色调?

Raycast 的主色调是 #FF6363,背景色为 #1A1A1A,文本色为 #FFFFFF。

Raycast 使用什么字体?

标题字体: SF Pro Display, system-ui, sans-serif。正文字体: SF Pro Text, system-ui, sans-serif。基础字号: 14px。

如何在项目中使用 Raycast 设计系统?

点击上方 DESIGN.md 代码块中的复制按钮,将完整设计规范复制到你的项目中。AI Coding 工具(如 Cursor)可以直接读取 DESIGN.md 来生成符合 Raycast 风格的代码。

探索更多设计系统

发现 50+ 精选设计系统,为你的 AI Coding 项目提供设计灵感。

查看全部设计系统