Raycast

version: alpha name: Raycast-design-analysis 属于: A dark-canvas developer-tools system that treats the marketing page like an extended product screenshot — pure-near-black background, command-palette mockups as the hero, Inter typography with the ss03 stylistic set turned on, and a single white CTA pill that doesn't break the inky atmosphere. The chrome reads like Raycast's own command-palette UI scaled up to a marketing page: monochrome dark surfaces with a faint surface ladder (#07080a → #0d0d0d → #101111), tight 6–10px radius on cards, hairline 1px borders in #242728, and rare splashes of saturated accent (Hacker News yellow, Slack red, Mac green, info blue) reserved for product-tile category illustrations. The signature visual moment is a red gradient hero wordmark — three diagonal red stripes laid across the very top of the home page like a launch-banner — paired with full-bleed product UI screenshots that show Raycast's actual command palette, store, and AI chat surfaces. description: | Raycast's marketing system reads like an extended product screenshot. The chrome IS the in-product chrome at marketing scale: pure-near-black canvas, hairline 1px borders, command-palette-style cards, Inter typography with the ss03 stylistic set enabled site-wide, white CTA pill, and a small set of saturated category accent colors (yellow / red / green / blue) reserved for extension and feature illustrations. Section rhythm is generous (~96px) but the page never breaks tonal continuity — the whole site sits in one continuous dark mode.

colors: primary: "#ffffff" primary-pressed: "#e8e8e8" on-primary: "#000000" ink: "#f4f4f6" body: "#cdcdcd" charcoal: "#d3d3d4" mute: "#9c9c9d" ash: "#6a6b6c" stone: "#434345" on-dark: "#ffffff" on-dark-mute: "rgba(255,255,255,0.72)" canvas: "#07080a" surface: "#0d0d0d" surface-elevated: "#101111" surface-card: "#121212" button-fg: "#18191a" hairline: "#242728" hairline-soft: "rgba(255,255,255,0.08)" hairline-strong: "rgba(255,255,255,0.16)" accent-blue: "#57c1ff" accent-blue-soft: "rgba(87,193,255,0.15)" accent-red: "#ff6161" accent-red-soft: "rgba(255,97,97,0.15)" accent-green: "#59d499" accent-green-soft: "rgba(89,212,153,0.15)" accent-yellow: "#ffc533" accent-yellow-soft: "rgba(255,197,51,0.15)" hero-stripe-start: "#ff5757" hero-stripe-end: "#a1131a" key-bg-start: "#121212" key-bg-end: "#0d0d0d"

typography: display-xl: fontFamily: Inter fontSize: 64px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0 fontFeature: '"calt", "kern", "liga", "ss03"' display-lg: fontFamily: Inter fontSize: 56px fontWeight: 500 lineHeight: 1.17 letterSpacing: 0.2px fontFeature: '"calt", "kern", "liga", "ss03"' heading-xl: fontFamily: Inter fontSize: 24px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.2px fontFeature: '"calt", "kern", "liga", "ss03"' heading-lg: fontFamily: Inter fontSize: 22px fontWeight: 500 lineHeight: 1.15 letterSpacing: 0 fontFeature: '"calt", "kern", "liga", "ss03"' heading-md: fontFamily: Inter fontSize: 20px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.2px fontFeature: '"calt", "kern", "liga", "ss03"' heading-sm: fontFamily: Inter fontSize: 18px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.2px fontFeature: '"calt", "kern", "liga", "ss03"' body-lg: fontFamily: Inter fontSize: 18px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0 fontFeature: '"calt", "kern", "liga", "ss03"' body-md: fontFamily: Inter fontSize: 16px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0 fontFeature: '"calt", "kern", "liga", "ss03"' body-strong: fontFamily: Inter fontSize: 16px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.2px fontFeature: '"calt", "kern", "liga", "ss03"' body-sm: fontFamily: Inter fontSize: 14px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0 fontFeature: '"calt", "kern", "liga", "ss03"' body-sm-strong: fontFamily: Inter fontSize: 14px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.2px fontFeature: '"calt", "kern", "liga", "ss03"' caption-md: fontFamily: Inter fontSize: 13px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.1px fontFeature: '"calt", "kern", "liga", "ss03"' caption-sm: fontFamily: Inter fontSize: 12px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.4px fontFeature: '"calt", "kern", "liga", "ss03"' link-md: fontFamily: Inter fontSize: 16px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.3px fontFeature: '"calt", "kern", "liga", "ss03"' button-md: fontFamily: Inter fontSize: 14px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.2px fontFeature: '"calt", "kern", "liga", "ss03"'

rounded: none: 0px xs: 4px sm: 6px md: 8px lg: 10px xl: 16px full: 9999px

spacing: xxs: 2px xs: 4px sm: 8px md: 12px lg: 16px xl: 24px xxl: 32px section: 96px

components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 8px 16px height: 36px button-primary-pressed: backgroundColor: "{colors.primary-pressed}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" button-secondary: backgroundColor: "transparent" textColor: "{colors.on-dark}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 8px 16px height: 36px button-tertiary: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.on-dark}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 8px 16px height: 36px button-disabled: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.ash}" rounded: "{rounded.md}" install-button: backgroundColor: "transparent" textColor: "{colors.on-dark}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 6px 14px text-input: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 8px 12px height: 36px text-input-focused: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.on-dark}" rounded: "{rounded.md}" store-search-bar: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 10px 16px height: 44px command-palette-row: backgroundColor: "transparent" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 6px 10px command-palette-row-active: backgroundColor: "{colors.surface-card}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.sm}" pill-tab: backgroundColor: "transparent" textColor: "{colors.body}" typography: "{typography.body-sm}" rounded: "{rounded.full}" padding: 4px 10px pill-tab-active: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.on-dark}" typography: "{typography.body-sm}" rounded: "{rounded.full}" badge-pro: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.on-dark-mute}" typography: "{typography.caption-sm}" rounded: "{rounded.xs}" padding: 2px 6px badge-info-soft: backgroundColor: "{colors.accent-blue-soft}" textColor: "{colors.accent-blue}" typography: "{typography.caption-sm}" rounded: "{rounded.xs}" padding: 2px 8px keycap: backgroundColor: "{colors.surface-card}" textColor: "{colors.body}" typography: "{typography.caption-md}" rounded: "{rounded.xs}" padding: 1px 6px height: 20px command-palette-card: backgroundColor: "{colors.surface}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 0px feature-card-dark: backgroundColor: "{colors.surface}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 24px feature-card-elevated: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 24px store-extension-card: backgroundColor: "{colors.surface}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 16px pricing-tier-card: backgroundColor: "{colors.surface}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 24px pricing-tier-card-featured: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 24px hero-stripe-band: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.display-xl}" rounded: "{rounded.none}" padding: 96px 48px app-icon-tile: backgroundColor: "{colors.surface-card}" rounded: "{rounded.md}" size: 48px app-icon-tile-large: backgroundColor: "{colors.surface-card}" rounded: "{rounded.md}" size: 64px primary-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.body-sm-strong}" rounded: "{rounded.none}" height: 56px footer-section: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: 64px 48px link-inline: textColor: "{colors.on-dark}" typography: "{typography.link-md}"

概述

Raycast 的营销站点读起来就像一张放大的产品截图。chrome 就是营销尺度上的产品内 chrome：纯近黑画布（{colors.canvas} — #07080a），1px 发丝边框（{colors.hairline} — #242728），圆角在 6 到 16px 之间的命令面板风格卡片，全站启用 ss03 风格集的 Inter 字体（一个字符——替代的 g——赋予 Raycast 排版标志性的细微区别），一个白色 CTA 胶囊锚定每个主动作，以及保留给类别插图的小幅饱和点缀。

系统实际上只有一种表面模式——深色——靠一个微弱的三级表面阶梯（{colors.canvas} → {colors.surface} → {colors.surface-elevated} → {colors.surface-card}）承载卡片、卡片内面板和键帽字形背景。标志性的装饰时刻是位于首页首屏最顶部的红色对角条纹渐变带，用作标题后的发布横幅（饱和红色出现在 chrome 上的唯一时刻）。除此之外，chrome 上的颜色仅用于扩展和特性插图内的类别点缀：Hacker News 黄、Slack 红、Linear 绿、信息蓝。

设计哲学是"营销页面即产品"。section 节奏充裕（{spacing.section} 96px），但页面从不打破色调延续性——整个站点都坐落在一种连续的深色模式中，全幅产品 UI 截图展示 Raycast 真实的命令面板 / 商店 / AI 聊天表面，字体连字设置（ss03）从产品内 app 的文字渲染继承而来。

关键特征：

• 单一深色表面模式，4 级表面阶梯：{colors.canvas} (#07080a) → {colors.surface} (#0d0d0d) → {colors.surface-elevated} (#101111) → {colors.surface-card} (#121212)
• 白色 CTA 胶囊（{colors.primary} — #ffffff）是通用主动作；其余一切都是单色深色
• Inter 字体全站启用 font-feature-settings: "calt", "kern", "liga", "ss03"——ss03 替代的 g 是品牌之声的一部分
• 1px 发丝边框（{colors.hairline} — #242728）承载每个卡片边缘；系统中没有投影
• 多圆角卡片词表：{rounded.sm}（6px）用于键帽，{rounded.md}（8px）用于按钮和小型卡片，{rounded.lg}（10px）用于特性卡片，{rounded.xl}（16px）用于首屏命令面板拟图容器
• 饱和类别点缀（{colors.accent-yellow} 用于 Hacker News，{colors.accent-red} 用于 Slack/Apple，{colors.accent-green} 用于生产力工具，{colors.accent-blue} 用于信息）仅出现在扩展 tile 图像内——从不出现在 chrome 上
• 标志性的红色对角条纹渐变带位于首屏最顶部——{colors.hero-stripe-start} → {colors.hero-stripe-end} 的三条带斜线，每页最多使用一次

配色

来源页面： /（首页）、/store（扩展市场）、/core-features/ai（特性页）、/pricing（计划等级）、/thomas/hacker-news（单个扩展详情）。所有五个页面的 chrome 调色板完全相同——深色表面阶梯、发丝边框、白色 CTA 和启用 ss03 的字体在每个页面都一致。

品牌与点缀

• White（{colors.primary} — #ffffff）：通用主 CTA 胶囊背景。"Download" / "Install Extension" / "Get Pro"——每个主动作都承载它。
• White Pressed（{colors.primary-pressed} — #e8e8e8）：主胶囊的按下状态——暗一档。
• On Primary（{colors.on-primary} — #000000）：白色 CTA 上的纯黑文字——系统中黑色作为文字出现的唯一位置。

表面

• Canvas（{colors.canvas} — #07080a）：纯近黑页面背景。每个页面的主导表面。
• Surface（{colors.surface} — #0d0d0d）：卡片和抬升面板背景——比画布亮一档。
• Surface Elevated（{colors.surface-elevated} — #101111）：button-tertiary 填充、text-input 填充、store-search-bar 填充、pill-tab-active 填充。
• Surface Card（{colors.surface-card} — #121212)：app-icon-tile 背景、键帽填充、命令面板行悬停。
• Button FG (in-card)（{colors.button-fg} — #18191a）：在特性定价等级卡片背景内使用的罕见深卡变体。
• Hairline（{colors.hairline} — #242728）：通用 1px 卡片边框。承载每个页面的每个卡片边缘。
• Hairline Soft（{colors.hairline-soft} — rgba(255,255,255,0.08)）：在半透明覆盖图像上的更微弱的边框。
• Hairline Strong（{colors.hairline-strong} — rgba(255,255,255,0.16)）：在常规发丝过柔时的更强 1px 分隔线。

文字

• Ink（{colors.ink} — #f4f4f6）：深色画布上的主标题。为了与近黑背景色调一致而略带偏白。
• Body（{colors.body} — #cdcdcd）：默认段落文字和行内链接颜色。
• Charcoal（{colors.charcoal} — #d3d3d4）：在 ink 显得过柔时使用的稍亮正文。
• Mute（{colors.mute} — #9c9c9d）：元数据、页脚链接文字、次要说明。
• Ash（{colors.ash} — #6a6b6c）：禁用状态文字，最低强调度工具文字。
• Stone（{colors.stone} — #434345）：最低强调度说明文字和禁用图标色。
• On Dark（{colors.on-dark} — #ffffff）：交互状态主文字（按钮标签、聚焦 tab）。
• On Dark Mute（{colors.on-dark-mute} — rgba(255,255,255,0.72)）：深色表面上的半透明次要文字。

语义

• Accent Blue（{colors.accent-blue} — #57c1ff）+ Soft（{colors.accent-blue-soft} — rgba(87,193,255,0.15)）：信息与信息徽标——用于特性插图和罕见的 "New" 胶囊。
• Accent Red（{colors.accent-red} — #ff6161）+ Soft（{colors.accent-red-soft} — rgba(255,97,97,0.15)）：破坏/错误指示 + 扩展插图中的 Slack/Apple 类别点缀。
• Accent Green（{colors.accent-green} — #59d499）+ Soft（{colors.accent-green-soft} — rgba(89,212,153,0.15)）：成功状态 + 扩展插图中的生产力类别点缀。
• Accent Yellow（{colors.accent-yellow} — #ffc533）+ Soft（{colors.accent-yellow-soft} — rgba(255,197,51,0.15)）："warning" 语义 + 出现在首页首屏上的最显著 Hacker News 橙黄色点缀插图。

品牌渐变

• Hero Stripe Gradient——首页首屏最顶部贯穿的三条红色对角条纹，从 {colors.hero-stripe-start}（#ff5757）渐变到 {colors.hero-stripe-end}（#a1131a）。系统在 chrome 上唯一的彩色渐变——每页最多使用一次，保留给首屏发布横幅时刻。
• Keycap Gradient——小型键字形背景使用从 {colors.key-bg-start}（#121212）到 {colors.key-bg-end}（#0d0d0d）的微妙线性渐变，赋予 Raycast 键帽 UI 轻微的 3D 键感。

字体排版

字体族

Inter 是系统的主字体，加载时使用 Inter Fallback 系统回退变体。关键在于，Raycast 全站启用 font-feature-settings: "calt", "kern", "liga", "ss03"——ss03 风格集换入 Inter 的替代 g 字形（单层开放 g），这是品牌的标志性排版细节。标准连字（liga）、字距（kern）和上下文替换（calt）同样启用。展示级额外启用 ss02 和 ss08 并禁用标准 liga，以渲染首屏 "Raycast Pro" 字标，呈现其标志性的几何构造。

除文档中的行内 <code> 芯片外，没有使用 monospace 字体；营销页所有内容都使用 Inter。

层级

原则

层级使用 1.6 行高阶梯处理正文，使用 1.1–1.4 阶梯处理展示/标题。字距始终为正值（0.1–0.4px）——稍微打开字距——在深色画布上即便在正文尺寸下也赋予 Raycast 的 chrome 一种轻盈感。ss03 风格集是品牌最具辨识度的排版细节；没有它，正文字面渲染完全等同于普通 Inter，会失去 Raycast 标志性的渲染风格。

关于字体替代

Inter 是开源且由 Google Fonts 提供托管；直接加载。要保留品牌的标志性外观，必须在 body 元素上启用 font-feature-settings: "calt", "kern", "liga", "ss03"。没有 ss03，排版明显是"Inter 默认"而非"Raycast"。在无法加载 Inter 的系统上，文档化的回退是 Inter Fallback（自托管变体）→ system-ui。在需要时，JetBrains Mono 或 Geist Mono 是行内代码芯片的可接受替代，尽管 Raycast 的营销 chrome 很少使用代码样式文字。

布局

间距系统

• 基础单位： 8px（紧凑行内间隙使用 2/4/12px 步长）。
• Token（frontmatter）： {spacing.xxs}（2px）· {spacing.xs}（4px）· {spacing.sm}（8px）· {spacing.md}（12px）· {spacing.lg}（16px）· {spacing.xl}（24px）· {spacing.xxl}（32px）· {spacing.section}（96px）。
• 通用 section 节奏： 这一组中每个页面使用 {spacing.section}（96px）作为主要内容块之间的纵向间距。卡片网格使用 {spacing.lg}（16px）间隔；卡片内 padding 在特性卡片上为 {spacing.xl}（24px），在商店扩展卡片上为 {spacing.lg}（16px）。

网格与容器

• 最大宽度： 桌面正文内容区约 1240px，24px 间隔（约 48px at ultrawide）。首屏命令面板拟图更宽（约 1080px），页面背景延伸到全幅。
• 商店扩展网格： 桌面 2 列，每行 2 张卡片堆叠，平板降为 1 列。每张卡片都是水平布局，左侧是大尺寸方形应用图标，右侧是文案 + Install 按钮。
• 定价等级网格： 桌面 3 列（Free / Pro / Pro+Advanced AI），移动端降为 1 列堆叠。
• 特性扩展卡片网格： 商店页顶 "Featured" 行的桌面 3 列。
• 对比表： 定价页等级卡片下方的全宽表——5 列表（Free / Pro / Advanced AI / Custom for Teams / Enterprise）配特性行。
• 页脚： 桌面 6 列水平链接网格，平板降为 2 列，移动端 1 列。

留白哲学

留白充裕，画布不间断。各 section 间隔 96px，section 之间没有装饰性分隔——深色画布从首屏到页脚边到边延续。section 内部，内容左对齐于紧凑栏中，命令面板拟图图像占据首页特性行右 50–60%。标志性装饰元素——红色对角条纹渐变带——仅出现在第一个首屏带；自第二个 section 以下，页面是单色深色。

层次与深度

系统完全没有投影层级。深度完全由表面色阶梯构建：在深色刻度上每亮一档就读作向观察者靠近一步。

装饰性深度

深度来自产品图像和单条条纹渐变带：

• 首屏条纹渐变——{colors.hero-stripe-start} → {colors.hero-stripe-end} 的三条红色对角条纹层叠在首页首屏带之上，唤起发布横幅 / 运动模糊效果。系统的标志性装饰时刻。
• 命令面板拟图——首页首屏和特性行内嵌入全保真度的 Raycast 产品内 UI 截图（实际的 Spotlight 风格覆盖层，带圆角键帽、命令行和点缀色字形）。这些就是品牌装饰。
• 应用图标 tile——小 48–64px 圆角方形 tile，展示真实应用图标（Slack、Spotify、Figma、Notion、Linear、Hacker News）位于商店和特性插图内。
• 键帽字形——微妙渐变填充的圆角键帽字形用于行内指示键盘快捷键（如 ⌘ K），配上 {colors.key-bg-start} → {colors.key-bg-end} 的轻微线性渐变，暗示物理键面。

形状

圆角刻度

圆角词表紧密聚集在 4 到 16px 之间，大多数 chrome 位于 6–10px。系统从不在卡片上保持平直（0px），也从不超出 16px，除了全圆角胶囊。

摄影几何

没有传统摄影。视觉元素限于：

• 命令面板拟图——全保真度 Raycast UI 截图在 {rounded.xl}（16px）容器内 16:9 或 4:3 比例。
• 应用图标 tile——48–64px 方形，{rounded.md}（8px），展示真实应用图标。
• 头像圆形——32–40px，{rounded.full}，用于扩展内作者署名。
• 首屏条纹渐变——全幅铺展，无比例。

组件

未记录 hover 状态，遵循系统策略。每个规范仅涵盖 Default 和 Active/Pressed。

按钮

button-primary——通用 Raycast CTA

• 背景 {colors.primary}（白色），文字 {colors.on-primary}（黑色），字号 {typography.button-md}，padding 8px 16px，高约 36px，圆角 {rounded.md}。
• 用于 "Download"（粘性顶部导航 CTA）、"Get Pro"、"Install"——每个表面的每个主动作。
• 按下状态位于 button-primary-pressed——背景暗为 {colors.primary-pressed}。

button-secondary——透明文本按钮

• 背景透明，文字 {colors.on-dark}，字号 {typography.button-md}，padding 8px 16px，高约 36px，圆角 {rounded.md}。
• 较低强调度动作："Sign in"（顶部导航）、"Learn more →"、"View on GitHub"。

button-tertiary——柔和表面按钮

• 背景 {colors.surface-elevated}，文字 {colors.on-dark}，字号 {typography.button-md}，padding 8px 16px，高约 36px，圆角 {rounded.md}。
• 中等强调度：卡片内的 "Watch demo"、"View extension"、"Manage" 按钮。

button-disabled

• 背景 {colors.surface-elevated}，文字 {colors.ash}——暗的工具状态。

install-button——商店页安装胶囊

• 背景透明配 1px 实线 {colors.hairline-strong} 边框，文字 {colors.on-dark}，字号 {typography.button-md}，padding 6px 14px，圆角 {rounded.md}。
• 位于每个商店扩展卡片右边缘，标签为 "Install Extension"。

筛选与 Tab 芯片

pill-tab + pill-tab-active——小型筛选芯片条

• 默认：背景透明，文字 {colors.body}，字号 {typography.body-sm}，padding 4px 10px，圆角 {rounded.full}。
• 激活：背景翻转为 {colors.surface-elevated}，文字 {colors.on-dark}——芯片"抬起"一档表面。
• 用于商店筛选行（"All Extensions"、"Recently Added"、"Most Popular"）和类似分段控件。

badge-pro——小型 Pro/Plan 标签

• 背景 {colors.surface-elevated}，文字 {colors.on-dark-mute}，字号 {typography.caption-sm}，padding 2px 6px，圆角 {rounded.xs}。
• 定价等级卡片上的行内 "Pro" / "Pro+" / "Free" 等级指示器。

badge-info-soft——半透明信息芯片

• 背景 {colors.accent-blue-soft}，文字 {colors.accent-blue}，字号 {typography.caption-sm}，padding 2px 8px，圆角 {rounded.xs}。
• 罕见的 "New" / "Beta" 行内标签。

输入与表单

text-input + text-input-focused

• 默认：背景 {colors.surface-elevated}，文字 {colors.on-dark}，1px 实线 {colors.hairline}，字号 {typography.body-md}，padding 8px 12px，高约 36px，圆角 {rounded.md}。
• 聚焦：相同表面；1px 边框变为 {colors.hairline-strong}——是轻微提亮而非彩色环。

store-search-bar——商店页搜索字段

• 背景 {colors.surface-elevated}，文字 {colors.on-dark}，字号 {typography.body-md}，padding 10px 16px，高约 44px，圆角 {rounded.md}。
• 位于商店页首屏顶部，左侧带放大镜图标，placeholder 为 "Search the store..."。比标准 text-input 略高。

卡片与容器

command-palette-card——首页首屏命令面板拟图

• 容器：背景 {colors.surface}，1px 实线 {colors.hairline}，padding 0（拟图内容填满卡片），圆角 {rounded.lg} 或 {rounded.xl}，取决于首屏尺寸。
• 布局：顶部标题条带 macOS 红黄绿圆点 + 搜索输入行，正文为 {component.command-palette-row} 项的垂直堆叠，右下角键帽提示簇。

command-palette-row + command-palette-row-active——命令面板内的单行

• 默认：背景透明，文字 {colors.on-dark} 在 {typography.body-md}，padding 6px 10px，圆角 {rounded.sm}。
• 激活：背景 {colors.surface-card}（比周围面板卡片亮一档）——选中状态。
• 每行包含一个小型应用图标 tile + 标签 + 右边缘可选键帽快捷键。

feature-card-dark——标准产品特性卡片

• 容器：背景 {colors.surface}，1px 实线 {colors.hairline}，padding {spacing.xl}（24px），圆角 {rounded.lg}。
• 用于首页和特性页的 2 列或 3 列网格——配小型产品拟图或应用图标行 + 正文文案 + "Learn more →" {component.button-secondary}。

feature-card-elevated——稍抬升变体

• 与 feature-card-dark 相同的 chrome，但背景翻转为 {colors.surface-elevated}——用于打破交替特性行的视觉节奏。

store-extension-card——商店页扩展卡片

• 容器：背景 {colors.surface}，1px 实线 {colors.hairline}，padding {spacing.lg}（16px），圆角 {rounded.md}。
• 布局：左侧 48px {component.app-icon-tile}，居中名称 + 作者元数据 + 1 行描述的垂直堆叠，右边缘为 {component.install-button}。

pricing-tier-card——定价计划卡片（默认等级）

• 容器：背景 {colors.surface}，1px 实线 {colors.hairline}，padding {spacing.xl}（24px），圆角 {rounded.lg}。
• 布局：等级名 {typography.heading-xl}（24px），价格更大数字 {typography.display-lg}，正文描述 {typography.body-lg}，CTA {component.button-primary}（Free 等级为 {component.button-secondary}），特性清单带 ✓ 字形。

pricing-tier-card-featured——中部 "Pro" 特性等级

• 相同的 chrome，但背景翻转为 {colors.surface-elevated}（亮一档）——区分特性等级与周围卡片的唯一视觉提示。

hero-stripe-band——带红色条纹渐变的首屏

• 背景 {colors.canvas}，顶部覆盖三条红色对角条纹（{colors.hero-stripe-start} → {colors.hero-stripe-end}）。
• Padding {spacing.section} 96px 纵向 / 48px 横向，圆角 {rounded.none}。
• 在 {typography.display-xl} 承载首屏标题，单个 {component.button-primary} "Download" CTA。

装饰

app-icon-tile——小型 48px 方形应用图标

• 背景 {colors.surface-card}，padding 0（图标填满 tile），圆角 {rounded.md}，尺寸 48×48。
• 用于命令面板行和商店扩展卡片。

app-icon-tile-large——64px 特性变体

• 同样但为 64×64。用于特性商店卡片和首页首屏插图行。

keycap——键盘快捷键字形

• 背景 {colors.surface-card} 带柔和线性渐变 {colors.key-bg-start} → {colors.key-bg-end}，文字 {colors.body} 在 {typography.caption-md}，padding 1px 6px，高约 20px，圆角 {rounded.xs}。
• 渲染行内命令面板快捷键提示如 ⌘ K、⏎、Esc。在扁平深色画布上的标志性"物理键"感。

导航

primary-nav

• 背景 {colors.canvas}，文字 {colors.on-dark}，高约 56px，字号 {typography.body-sm-strong}，圆角 {rounded.none}，底部 1px {colors.hairline} 细线。
• 布局（桌面）：左侧 Raycast 字标，居中导航簇（"Pro · AI · Store · Manual · Changelog · Blog · Pricing"），右侧簇（Sign in 链接 + 始终白色的 {component.button-primary} "Download" CTA 胶囊）。

顶部导航（移动端）

• 左侧汉堡菜单图标，居中 Raycast 字标，右侧白色 "Download" CTA 胶囊。主导航折叠为从左侧滑入的全屏抽屉。

页脚

footer-section

• 背景 {colors.canvas}，文字 {colors.body} 在 {typography.body-sm}，padding 64px 48px，顶部 1px {colors.hairline} 细线。
• 布局：6 列水平链接网格（Product · Core Features · Top Extensions · Company · Community · By Raycast），列标题在 {typography.body-sm-strong} {colors.on-dark}，链接列表在 {typography.body-sm} {colors.body}。
• 底部行：小型 Raycast 字标 + 订阅 newsletter 输入字段，右侧为 {component.button-primary} "Subscribe"。
• 页脚带的顶部有一道微弱的红色条纹渐变回响——首屏对角条纹图案的较小回声。

行内

link-inline——正文段落锚链接

• {colors.on-dark} 文字，默认无下划线；聚焦时出现下划线。行内正文链接是完全白色而非染色点缀色，这保持了深色画布的色调纯净。

推荐与避免

推荐

• 整个站点渲染为一种连续的深色模式。系统中没有浅色变体。
• 每个主 CTA 使用 {colors.primary}（白色胶囊）。没有第二种主色——白色就是品牌动作。
• 由表面色阶梯构建层级（{colors.canvas} → {colors.surface} → {colors.surface-elevated} → {colors.surface-card}），而非投影。
• 在 body 元素上启用 font-feature-settings: "calt", "kern", "liga", "ss03"。ss03 替代的 g 是品牌身份的一部分。
• 锚定 {component.command-palette-card} 拟图作为首屏的承重视觉。真实的 Raycast UI 就是品牌。
• 使用 {component.keycap} 字形行内指示键盘快捷键。柔和 key-bg 渐变（{colors.key-bg-start} → {colors.key-bg-end}）是品牌唯一的"深度"装饰。
• 将 {colors.hero-stripe-start} → {colors.hero-stripe-end} 红色渐变每页仅保留给首屏带一次。绝不在页面更深处重复条纹渐变。
• 仅在扩展和特性插图内使用饱和类别点缀（{colors.accent-yellow}、{colors.accent-red}、{colors.accent-green}、{colors.accent-blue}）——绝不在 chrome 按钮或文字上。

避免

• 不要引入浅色模式。系统设计上仅深色。
• 不要在卡片上加投影。层级由表面阶梯构建，而非阴影。
• 不要用染色点缀替换 {colors.primary}（白色）作为主 CTA。纯白是品牌动作色。
• 不要在文字、按钮或 chrome 表面上使用饱和点缀色（{colors.accent-yellow}、{colors.accent-red}、{colors.accent-green}、{colors.accent-blue}）。它们属于扩展插图内。
• 不要在顶部首屏带之外重复首屏条纹渐变。一带规则就是系统的克制。
• 不要使用未启用 ss03 风格标志的 Inter。chrome 会失去其标志性之声。
• 不要在所有边对卡片使用 32px+ padding。系统在卡片内 padding 上保持在 16–24px 的紧凑度。

响应式行为

断点

触控目标

所有交互元素均满足 WCAG AA 在 36px+。{component.button-primary} 和 {component.button-tertiary} 高 36px，padding 16px。{component.text-input} 高 36px。{component.store-search-bar} 高 44px（AAA 之上）。{component.pill-tab} 高约 24–28px，padding 10px 通过内联 padding 扩展至 36–40px 可点击（AA 之上但 AAA 之下——故意保持紧凑）。{component.install-button} 高约 32px，padding 14px。

折叠策略

• 主导航： 桌面水平簇 → 768px 时平板汉堡抽屉。白色 "Download" CTA 在每个断点都保持可见。
• 首屏命令面板拟图： 桌面全保真度 2 列，文案在左 + 拟图在右 → 平板垂直堆叠，拟图在文案下 → 移动端拟图缩放至约 80% 宽度。
• 商店扩展网格： 2 列 → 1 列，在平板。
• 定价等级网格： 3 列 → 2+1 在 desktop-small → 1 列堆叠在平板。
• 对比表： 桌面完整 5 列 → 平板水平滚动 → 移动端垂直卡片堆叠，每张卡片一个等级。
• 页脚： 6 列链接列 → 平板 3 列 → 移动端横屏 2 列 → 移动端 1 列。
• Section padding： {spacing.section}（96px）桌面 → 64px 平板 → 48px 移动端。
• 首屏标题： {typography.display-xl}（64px）桌面，沿断点阶梯缩放至 56px / 44px / 36px。

图像行为

系统中唯一的"图像"是产品内 Raycast UI 截图和小应用图标资源：

• 命令面板拟图随容器流式缩放；产品内 UI 本身响应式，并为每个断点重新渲染。
• 应用图标 tile 在每个断点保持 48–64px 固定尺寸；它们以灵活行平铺，在更窄宽度处换行。
• 首屏条纹渐变在每个断点都停留在首屏带顶部，条纹角度保留。

迭代指南

1. 一次专注于一个组件。提取其 YAML 条目并验证每个属性都能解析。
2. 直接引用组件名和 token（{colors.primary}、{component.button-primary-pressed}、{rounded.md}）——不要转述。
3. 编辑后运行 npx @google/design.md lint DESIGN.md——broken-ref、contrast-ratio 和 orphaned-tokens 警告会自动标记问题。
4. 添加新变体作为单独的组件条目（-pressed、-disabled、-active）——不要将它们埋在正文里。
5. 默认正文为 {typography.body-md}（16px / 400 / 1.6）；将 {typography.body-strong} 用于强调；将 {typography.display-xl} 严格保留给首屏带。
6. 让 {colors.primary}（白色 CTA 胶囊）在每个视口都稀缺——每屏最多一个纯白胶囊。
7. 引入新组件时，问自己它是否能用现有的表面阶梯 + 8px 圆角 + ss03-Inter 词汇表达，再添加新 token。系统的强项在于几乎从不需要新 token。

已知缺口

• 未捕获移动端截图——响应式行为综合了 Raycast 已知的移动端模式（汉堡抽屉、单列网格、首屏缩小），依据是桌面证据和断点阶梯。
• hover 状态 按系统策略未记录。Raycast 产品内 app 在命令面板行上有丰富的悬停行为，本文档未捕获。
• 产品内应用 chrome（macOS 上运行的实际 Raycast 启动器）在营销截图中引用，但此处未作为单独的 UI 系统记录。营销站点有记录；产品内应用表面是其自己的设计系统。
• 深色模式是唯一模式——已捕获表面中没有浅色变体。
• 聚焦输入边框处理之外的表单验证状态不在已捕获的表面内。
• 认证 chrome（账户仪表板、计费设置、团队管理）不在捕获页面内。