Cursor

version: alpha name: Cursor-design-analysis description: An AI-first code editor whose marketing site reads like a quietly-confident developer-tools brand with a warm-cream editorial canvas (#f7f7f4) instead of the typical dark IDE atmosphere. Near-black warm ink (#26251e) carries body and display alike — display sits at weight 400 with negative letter-spacing for a magazine feel rather than a bold tech voice. The single brand voltage is Cursor Orange (#f54e00) reserved for primary CTAs and the wordmark. A signature pastel timeline palette (peach, mint, blue, lavender, gold) marks AI-action stages (Thinking / Reading / Editing / Grepping / Done) — only inside in-product timeline visualizations. Cards use minimal hairlines, no shadows, generous 80px section rhythm. CursorGothic for display/body, JetBrains Mono on every code surface (which is roughly half the page).

colors: primary: "#f54e00" primary-active: "#d04200" ink: "#26251e" body: "#5a5852" body-strong: "#26251e" muted: "#807d72" muted-soft: "#a09c92" hairline: "#e6e5e0" hairline-soft: "#efeee8" hairline-strong: "#cfcdc4" canvas: "#f7f7f4" canvas-soft: "#fafaf7" surface-card: "#ffffff" surface-strong: "#e6e5e0" on-primary: "#ffffff" timeline-thinking: "#dfa88f" timeline-grep: "#9fc9a2" timeline-read: "#9fbbe0" timeline-edit: "#c0a8dd" timeline-done: "#c08532" semantic-error: "#cf2d56" semantic-success: "#1f8a65"

typography: display-mega: fontFamily: "'CursorGothic', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 72px fontWeight: 400 lineHeight: 1.1 letterSpacing: -2.16px display-lg: fontFamily: "'CursorGothic', sans-serif" fontSize: 36px fontWeight: 400 lineHeight: 1.2 letterSpacing: -0.72px display-md: fontFamily: "'CursorGothic', sans-serif" fontSize: 26px fontWeight: 400 lineHeight: 1.25 letterSpacing: -0.325px display-sm: fontFamily: "'CursorGothic', sans-serif" fontSize: 22px fontWeight: 400 lineHeight: 1.3 letterSpacing: -0.11px title-md: fontFamily: "'CursorGothic', sans-serif" fontSize: 18px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0 title-sm: fontFamily: "'CursorGothic', sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0 body-md: fontFamily: "'CursorGothic', sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-tracked: fontFamily: "'CursorGothic', sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.08px body-sm: fontFamily: "'CursorGothic', sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 caption: fontFamily: "'CursorGothic', sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0 caption-uppercase: fontFamily: "'CursorGothic', sans-serif" fontSize: 11px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.88px textTransform: uppercase code: fontFamily: "'JetBrains Mono', 'Fira Code', monospace" fontSize: 13px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 button: fontFamily: "'CursorGothic', sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0 nav-link: fontFamily: "'CursorGothic', sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0

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

spacing: xxs: 4px xs: 8px sm: 12px base: 16px md: 20px lg: 24px xl: 32px xxl: 48px section: 80px

components: top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" height: 64px button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 10px 18px height: 40px button-primary-active: backgroundColor: "{colors.primary-active}" textColor: "{colors.on-primary}" rounded: "{rounded.md}" button-secondary: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 9px 17px height: 40px button-tertiary-text: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.button}" button-download: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 12px 20px height: 44px hero-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-mega}" padding: 80px ide-mockup-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 0 ide-pane: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.body}" typography: "{typography.code}" rounded: "{rounded.md}" padding: 16px feature-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.title-md}" rounded: "{rounded.lg}" padding: 24px comparison-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 24px timeline-pill-thinking: backgroundColor: "{colors.timeline-thinking}" textColor: "{colors.ink}" typography: "{typography.caption-uppercase}" rounded: "{rounded.pill}" padding: 4px 10px timeline-pill-grep: backgroundColor: "{colors.timeline-grep}" textColor: "{colors.ink}" typography: "{typography.caption-uppercase}" rounded: "{rounded.pill}" padding: 4px 10px timeline-pill-read: backgroundColor: "{colors.timeline-read}" textColor: "{colors.ink}" typography: "{typography.caption-uppercase}" rounded: "{rounded.pill}" padding: 4px 10px timeline-pill-edit: backgroundColor: "{colors.timeline-edit}" textColor: "{colors.ink}" typography: "{typography.caption-uppercase}" rounded: "{rounded.pill}" padding: 4px 10px timeline-pill-done: backgroundColor: "{colors.timeline-done}" textColor: "{colors.on-primary}" typography: "{typography.caption-uppercase}" rounded: "{rounded.pill}" padding: 4px 10px code-block: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.code}" rounded: "{rounded.lg}" padding: 20px pricing-tier-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px pricing-tier-featured: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px text-input: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 12px 16px height: 44px badge-pill: backgroundColor: "{colors.surface-strong}" textColor: "{colors.ink}" typography: "{typography.caption-uppercase}" rounded: "{rounded.pill}" padding: 4px 10px cta-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-lg}" padding: 96px testimonial-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.body}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 24px footer: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-sm}" padding: 64px 48px footer-link: backgroundColor: transparent textColor: "{colors.body}" typography: "{typography.body-sm}"

＃＃ 概述

Cursor 的营销网站被解读为一个安静自信的开发者品牌，相信编辑的冷静能战胜 IDE 的黑暗。基础画布是温暖的奶油色（{colors.canvas} - #f7f7f4），为身体和显示器提供温暖的近乎黑色墨水（{colors.ink} - #26251e）。单一品牌电压是 Cursor Orange ({colors.primary} — #f54e00) 保留给主要 CTA 和文字标记 — 很少使用。

类型以单一 sans 系列形式运行 CursorGothic。显示器的重量为 400，字母间距为负——这是杂志社论的声音，而不是技术夸张的声音。 JetBrains Mono 包含每个代码表面（代码表面大约占页面的一半）。

该品牌最强烈的视觉特征是AI-时间线药丸调色板：五颗柔和的药丸（桃子{colors.timeline-thinking}、薄荷色{colors.timeline-grep}、蓝色{colors.timeline-read}、薰衣草色{colors.timeline-edit}、金色{colors.timeline-done}）标记产品内时间线内的AI-行动阶段可视化。仅用于产品 UI — 切勿用作系统操作颜色。

主要特征：

• 温暖的奶油色帆布，不是白色的。墨水是暖色（#26251e），不是纯黑色。
• 单一 CTA 颜色：{colors.primary} (Cursor Orange #f54e00)。很少用。
• 显示粗细保持在 400 — 从不粗体。杂志声音。
• AI 时间线粉彩：5 个用于产品内代理操作阶段的专用标记。
• 紧凑 8px CTA 半径 — 开发人员方言。
• 仅发际线深度；没有阴影。
• 80px 节律。

＃＃ 颜色

品牌与特色

• Cursor Orange（{colors.primary} — #f54e00）：主要 CTA 药丸、文字标记、英雄口音。很少用。
• Cursor Orange 活动 ({colors.primary-active} — #d04200)：按下状态。

＃＃＃ 表面

• 帆布 ({colors.canvas} — #f7f7f4)：温暖的奶油色页面地板。
• Canvas Soft（{colors.canvas-soft} — #fafaf7）：模型内的 IDE 窗格背景。
• 表面卡 ({colors.surface-card} — #ffffff)：纯白色卡表面 — 与奶油色画布形成轻微对比。
• 表面坚固 ({colors.surface-strong} — #e6e5e0)：徽章、标签药丸。

发际线

• 发际线 ({colors.hairline} — #e6e5e0)：1 像素分隔线。
• 发丝软 ({colors.hairline-soft} — #efeee8)：较轻的分隔器。
• 发丝线强（{colors.hairline-strong} — #cfcdc4）：更强的面板轮廓。

＃＃＃ 文本

• 墨水 ({colors.ink} — #26251e)：显示，主体强调。温暖近乎黑色。
• 正文 ({colors.body} — #5a5852)：默认运行文本。
• 身体强壮（{colors.body-strong} — #26251e）：与墨水相同。
• 静音 ({colors.muted} — #807d72)：字幕。
• 静音软 ({colors.muted-soft} — #a09c92)：禁用文本。
• 在主设备上 ({colors.on-primary} — #ffffff)：Cursor Orange 上的白色文本。

时间线（AI-动作签名）

• 思考（{colors.timeline-thinking} — #dfa88f）：桃子。仅在产品内代理时间线内使用。
• Grep ({colors.timeline-grep} — #9fc9a2)：完好。
• 读取 ({colors.timeline-read} — #9fbbe0)：淡蓝色。
• 编辑（{colors.timeline-edit} — #c0a8dd）：薰衣草。
• 完成 ({colors.timeline-done} — #c08532)：暖金色。

语义

• 成功 ({colors.semantic-success} — #1f8a65)：确认指示器。
• 错误（{colors.semantic-error} — #cf2d56）：验证错误。

版式

字体系列

CursorGothic 是经过许可的显示屏 + 机身系列。后备：system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif。代码表面切换到 JetBrains Mono。

＃＃＃ 等级制度

原则

• 显示权重保持在 400。 杂志声音，从不粗体。
• 仅显示负字母间距。 -0.11px 至 -2.16px 跟踪。
• 每个代码表面上都有 JetBrains Mono。

关于字体替换的注意事项

CursorGothic 已获得许可。开源替代品：Inter，字重 400，字母间距 -1.5%。或者 GT Sectra 以获得更多编辑感觉。

＃＃ 布局

间距系统

• 基本单位： 4px。
• 令牌： {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.base} 16px · {spacing.md} 20px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 48 像素 · {spacing.section} 80 像素。
• 部分填充： 80px。

网格和容器

• 最大内容宽度：~1200px。
• 编辑机构：12 列网格。
• 功能卡网格：在桌面上 2 合用于分割，3 合用于福利。
• 页脚：桌面上有 5 列。

空白哲学

宽松的编辑节奏——更像是一本印刷杂志而不是科技网站。奶油色帆布有足够的呼吸空间；带内的卡片靠得很近（间隔 16-24 像素）。

高程和深度

系统使用仅发际线深度。没有投影，没有高程层。卡片通过 1 像素的细线和轻微的白色奶油色对比漂浮在画布上方。

装饰深度

• IDE-模型卡是唯一的“提升”元素。奶油色画布上的白卡，内部窗格结构模仿实际的光标编辑器。
• 时间轴柔和的药丸增加色彩深度，而无需表面高程。

形状

边界半径比例

＃＃ 成分

顶部导航

top-nav — 背景 {colors.canvas}，文本 {colors.ink}，高度 64 像素。布局：光标文字标记位于左侧，主要水平菜单（定价/功能/企业/博客/论坛/职业），登录+下载主要 CTA 右侧。

按钮

button-primary — 签名 Cursor Orange CTA。背景 {colors.primary}，文本 {colors.on-primary}，类型 {typography.button} (14px / 500)，内边距 10px × 18px，高度 40px，圆角 {rounded.md} (8px)。

button-primary-active — 按下状态。背景{colors.primary-active}。

button-secondary — 奶油色画布上的白卡药丸。背景{colors.surface-card}，文本{colors.ink}，1px {colors.hairline-strong}边框。

button-tertiary-text — 内嵌墨迹文本链接。

button-download — 更大的墨水画布 CTA。背景 {colors.ink}，文本 {colors.canvas}，内边距 12px × 20px，高度 44px。用于“下载 macOS”类型 CTA。

英雄和 IDE 模型

hero-band — 背景 {colors.canvas}、{typography.display-mega} 中的全角显示标题 (72px / 400 / -2.16px)、{typography.body-md} 中的副标题、两个 CTA (button-download + button-tertiary-text) 和一个居中的IDE-英雄副本下方的样机卡。

ide-mockup-card — 一张白卡，包含多窗格 IDE 模型（侧边栏 + 主编辑器 + 聊天面板 + 终端）。背景 {colors.surface-card}、圆形 {rounded.lg} (12 像素)、1 像素 {colors.hairline} 边框、无填充（窗格从边到边填充卡片）。

ide-pane - 模型内的单独 IDE 窗格。背景 {colors.canvas-soft}，{typography.code} 中的文本 {colors.body} (JetBrains Mono 13px)，圆角 {rounded.md} (8px)，内边距 16px。

卡牌

feature-card — 背景 {colors.surface-card}，文本 {colors.ink}，类型 {typography.title-md}，圆角 {rounded.lg}，内边距 24 像素。 1px {colors.hairline} 边框。

comparison-card — 并排的“光标与其他工具”卡。相同的表面和倒圆角；内部分为 2 列。

testimonial-card — 报价卡。背景 {colors.surface-card}，文本 {colors.body}，圆角 {rounded.lg}，内边距 24px。

AI 时间线（签名）

timeline-pill-thinking — 桃丸。背景 {colors.timeline-thinking}，文本 {colors.ink}，类型 {typography.caption-uppercase}（11px / 600 / 0.88px 跟踪，大写），圆角 {rounded.pill}，内边距 4px × 10px。标志着产品时间线中的“思考”阶段。

timeline-pill-grep — 薄荷丸。形状相同，背景 {colors.timeline-grep}。标记“Grepping”阶段。

timeline-pill-read — 淡蓝色药丸。背景{colors.timeline-read}。标志着“阅读”阶段。

timeline-pill-edit — 薰衣草丸。背景{colors.timeline-edit}。标记“编辑”阶段。

timeline-pill-done — 金药丸。背景{colors.timeline-done}，文字{colors.on-primary}白色。标记“完成”阶段。

＃＃＃ 代码

code-block — 内联代码块。背景{colors.surface-card}，{typography.code}中的文本{colors.ink}，圆形{rounded.lg}，填充20px，1px {colors.hairline}边框。

定价

pricing-tier-card — 背景 {colors.surface-card}，圆形 {rounded.lg}，填充 32px，1px {colors.hairline} 边框。

pricing-tier-featured — 特色层反转为墨水。背景{colors.ink}，文字{colors.canvas}。形状相同，深色反转信号“突出显示”，没有彩色丝带。

表格和标签

text-input — 背景 {colors.surface-card}，文本 {colors.ink}，圆角 {rounded.md} (8px)，内边距 12px × 16px，高度 44px。

badge-pill — 小大写药丸。背景 {colors.surface-strong}，文本 {colors.ink}，类型 {typography.caption-uppercase}，圆角 {rounded.pill}，内边距 4px × 10px。

CTA /页脚

cta-band — 页脚前“立即尝试光标”带。背景{colors.canvas}，居中显示标题{typography.display-lg}，单个Cursor Orange CTA。 96 像素垂直内边距。

footer — 关闭页脚。背景{colors.canvas}，文字{colors.body}。 5 列链接列表。 64×48 像素内边距。

footer-link — 背景透明，文本 {colors.body}，类型 {typography.body-sm}。

该做和不该做的事情

＃＃＃ 做

• 为主 CTA 和品牌字标保留 {colors.primary} (Cursor Orange)。
• 将显示权重保持在 400。编辑声音取决于此。
• 使用奶油色 {colors.canvas} 页面地板 — 绝不是纯白色。
• 在 JetBrains Mono 中渲染每个代码表面（内联、块、IDE 窗格）。
• 仅在产品内代理可视化中使用时间线粉彩 - 切勿作为系统操作颜色。

＃＃＃ 不

• 不要引入次要品牌动作颜色。 Cursor Orange 是唯一的一个。
• 不要将显示降低到粗体粗细（700+）。杂志声音取决于400。
• 不要添加阴影。发际线+奶油色墨水对比带来了深度。
• 不要在非时间轴 UI 上使用时间轴粉彩。它们的范围仅限于代理时间线。
• 不要从第三方小部件中提取 CTA 颜色（cookie 同意、OneTrust）。该品牌的CTA是实际产品CTA上出现的。

响应行为

断点

触摸目标

• 主 CTA 高度为 40 像素 — 在 WCAG AA 处，为 AAA 填充。
• 以 44 像素下载 CTA — 在 AAA。

崩溃策略

• 顶部导航切换到低于 768 像素的汉堡。
• IDE 模型多窗格折叠为移动设备上的单个主窗格预览。
• 功能网格：3-up → 2-up → 1-up。

迭代指南

1. 一次专注于一个组件。
2. CTA 默认为 {rounded.md} (8px)。卡片使用 {rounded.lg} (12px)。
3. 变体作为 components: 内的单独条目存在。
4. 到处使用 {token.refs} — 切勿使用内联十六进制。
5. 悬停状态从未记录。
6. CursorGothic 400用于显示器，400/500/600用于本体。每个代码表面上都有 JetBrains Mono。
7. Cursor Orange 仍然稀缺。
8. 时间线粉彩的范围仅限于产品内代理可视化。

已知差距

• CursorGothic 是授权字体； Inter 是替代品。
• 动画计时（时间轴药丸入口、IDE 窗格显示）超出范围。
• 应用内界面（代码编辑器、聊天面板、代理时间线）仅通过营销 IDE 模型捕获部分内容。
• 表单验证状态超出焦点在捕获的表面上不可见。