极简与高效：Vercel Geist 设计系统规范解析
Vercel 的 Geist 设计系统是构建一致、以开发者为中心界面的核心。其设计理念强调极简、高对比度、充足的留白以及克制的色彩使用，旨在将可读性和无障碍体验放在首位。
以下是 Geist 设计规范（浅色主题）的关键要点整理：
🎨 色彩系统：语义化与宽色域
• 10 级灰度步长：从 100（默认背景）到 1000（主要文字），每一步都有明确的交互隐喻（如 200 用于悬停背景，400 用于默认边框）。
• P3 宽色域支持：除了标准 sRGB 外，为高分屏原生提供基于
• 功能性色彩：蓝色代表成功与链接、红色代表错误、黄色代表警告。
✍️ 字体与排版
• 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。
⚡ 动效与阴影
• 首选瞬时响应：大部分交互应为
• 微妙的投影：主要依赖背景色调与边框建立层级，阴影非常弱（仅用于气泡、悬浮卡片和对话框）。
🗣️ 文案与人机交互规范
• 操作明确：按钮命名使用「动词 + 名词」（如
• 状态与反馈：加载中状态使用现在分词加省略号（如
https://vercel.com/design.md
#设计系统 #UI设计 #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 #前端开发
