极简与高效：Vercel Geist 设计系统规范解析Vercel 的 Geist 设计系统是构建一致、以开发者为中心界面的核心

Thu, 18 Jun 2026 12:48:50 GMT

极简与高效：Vercel Geist 设计系统规范解析

Vercel 的 Geist 设计系统是构建一致、以开发者为中心界面的核心。其设计理念强调极简、高对比度、充足的留白以及克制的色彩使用，旨在将可读性和无障碍体验放在首位。

以下是 Geist 设计规范（浅色主题）的关键要点整理：

🎨 色彩系统：语义化与宽色域

• 10 级灰度步长：从 100（默认背景）到 1000（主要文字），每一步都有明确的交互隐喻（如 200 用于悬停背景，400 用于默认边框）。
• P3 宽色域支持：除了标准 sRGB 外，为高分屏原生提供基于 oklch() 的 P3 宽色域颜色。
• 功能性色彩：蓝色代表成功与链接、红色代表错误、黄色代表警告。

✍️ 字体与排版

• Geist 字体家族：使用 Geist Sans 渲染 UI 和正文，使用 Geist Mono 处理代码和数据表格。
• 规范化 Token：提供 Heading（标题）、Label（标签）、Copy（正文）和 Button（按钮）四类排版 Token，严格控制字号、字重与行高。

📏 布局与圆角

• 4px 网格：间距遵循 4px 基准（4, 8, 12, 16...），推荐使用“3 步节奏”：组内 8px，组间 16px，板块间 32-40px。
• 克制的圆角：常规控件 6px，菜单与模态框 12px，全屏容器 16px，药丸状或头像使用 9999px。

⚡ 动效与阴影

• 首选瞬时响应：大部分交互应为 0ms（即时），只有在必要时才使用 150-300ms 的物理缓动动效。
• 微妙的投影：主要依赖背景色调与边框建立层级，阴影非常弱（仅用于气泡、悬浮卡片和对话框）。

🗣️ 文案与人机交互规范

• 操作明确：按钮命名使用「动词 + 名词」（如 Deploy Project），避免使用模糊的 Confirm 或 OK。
• 状态与反馈：加载中状态使用现在分词加省略号（如 Deploying…）；Toast 提示需指明具体变更，不使用句号，并去掉像 "successfully" 这类冗余的词汇。

https://vercel.com/design.md

#设计系统 #UI设计 #Vercel #Geist #前端开发

Geist | 面条的草稿箱

极简与高效：Vercel Geist 设计系统规范解析Vercel 的 Geist 设计系统是构建一致、以开发者为中心界面的核心