Design System Inspired by Vercel

Category: 开发者工具 前端部署。黑白精准，Geist 字体。

1. Visual Theme & Atmosphere

Vercel 的网站是开发者基础设施”隐于无形”这一命题的视觉论文——一套克制到近乎哲学境界的设计体系。页面以大面积白色（#ffffff）配近黑色（#171717）文字为主调，营造出画廊般的空旷感，每一个元素都以像素为代价争得一席之地。这不是装饰性的极简主义，而是工程原则意义上的极简主义。Geist 设计体系对待界面的方式，如同编译器对待代码——剔除所有多余的标记，直到只剩结构。

定制字体家族 Geist 是整套体系的王冠。Geist Sans 在展示尺寸下采用极强的负字间距（-2.4px 至 -2.88px），所呈现的标题感觉紧凑、急迫、充满工程感——仿佛经过压缩优化的生产代码。在正文尺寸下，字间距有所放松，但几何精准感依然贯穿始终。Geist Mono 作为等宽配套字体，专为代码、终端输出和技术标签而生。两款字体均在全局启用 OpenType "liga"（连字），为排版增添了一层经得起细读的精致感。

Vercel 区别于其他单色设计体系的关键，在于其”阴影即边框”的理念。它并不使用传统 CSS 边框，而是采用 box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.08)——零偏移、零模糊、1px 扩散的阴影，在不影响盒模型的前提下实现类边框效果。这一技术让边框存在于阴影层，从而实现更平滑的过渡、不会被裁剪的圆角，以及比传统边框更轻盈的视觉重量。整个深度体系建立在多值阴影叠加上，每一层各司其职：一层作边框，一层提供柔和的层次感，一层营造环境深度。

关键特征：

• Geist Sans 在展示尺寸下使用极强负字间距（-2.4px 至 -2.88px）——文字即压缩后的基础设施
• Geist Mono 用于代码和技术标签，全局启用 OpenType "liga"
• 阴影即边框技术：box-shadow 0px 0px 0px 1px 取代全局传统边框
• 多层阴影叠加实现细腻深度（单次声明包含边框 + 层次 + 环境三层）
• 近纯白画布搭配 #171717 文字——并非纯黑，形成微妙的对比柔和感
• 工作流专属强调色：Ship 红（#ff5b4f）、Preview 粉（#de1d8d）、Develop 蓝（#0a72ef）
• 焦点环系统使用 hsla(212, 100%, 48%, 1)——饱和蓝色，确保无障碍可访问性
• 胶囊徽章（9999px 圆角）配色调背景，用于状态指示

2. Color Palette & Roles

Primary

• Vercel 黑（#171717）：主要文字、标题、深色表面背景。并非纯黑——微微的暖调防止视觉刺激。
• 纯白（#ffffff）：页面背景、卡片表面、深色背景上的按钮文字。
• 真黑（#000000）：次要用途，--geist-console-text-color-default，用于特定控制台/代码场景。

Workflow Accent Colors

• Ship 红（#ff5b4f）：--ship-text，“发布到生产”工作流步骤——温暖、紧迫的珊瑚红。
• Preview 粉（#de1d8d）：--preview-text，预览部署工作流——鲜艳的洋红粉。
• Develop 蓝（#0a72ef）：--develop-text，开发工作流——明亮、聚焦的蓝色。

Console / Code Colors

• 控制台蓝（#0070f3）：--geist-console-text-color-blue，语法高亮蓝色。
• 控制台紫（#7928ca）：--geist-console-text-color-purple，语法高亮紫色。
• 控制台粉（#eb367f）：--geist-console-text-color-pink，语法高亮粉色。

Interactive

• 链接蓝（#0072f5）：主要链接颜色，带下划线装饰。
• 焦点蓝（hsla(212, 100%, 48%, 1)）：--ds-focus-color，交互元素焦点环。
• 环蓝（rgba(147, 197, 253, 0.5)）：--tw-ring-color，Tailwind 环工具类。

Neutral Scale

• 灰 900（#171717）：主要文字、标题、导航文字。
• 灰 600（#4d4d4d）：次要文字、说明文案。
• 灰 500（#666666）：三级文字、静音链接。
• 灰 400（#808080）：占位符文字、禁用状态。
• 灰 100（#ebebeb）：边框、卡片轮廓、分隔线。
• 灰 50（#fafafa）：微妙表面色调、内阴影高光。

Surface & Overlay

• 遮罩背景（hsla(0, 0%, 98%, 1)）：--ds-overlay-backdrop-color，模态框/对话框背景。
• 选中文字（hsla(0, 0%, 95%, 1)）：--geist-selection-text-color，文字选中高亮。
• 徽章蓝背景（#ebf5ff）：胶囊徽章背景，带色调的蓝色表面。
• 徽章蓝文字（#0068d6）：胶囊徽章文字，更深的蓝色以保证可读性。

Shadows & Depth

• 边框阴影（rgba(0, 0, 0, 0.08) 0px 0px 0px 1px）：标志性技法——取代传统边框。
• 微浮层（rgba(0, 0, 0, 0.04) 0px 2px 2px）：卡片的最小悬浮感。
• 卡片叠层（rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, rgba(0,0,0,0.04) 0px 8px 8px -8px, #fafafa 0px 0px 0px 1px）：完整多层卡片阴影。
• 环形边框（rgb(235, 235, 235) 0px 0px 0px 1px）：标签页和图片的浅灰环形边框。

3. Typography Rules

Font Family

• 主字体：Geist，备用字体：Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
• 等宽字体：Geist Mono，备用字体：ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New
• OpenType 特性：所有 Geist 文字全局启用 "liga"；特定说明文字启用 "tnum" 以对齐数字。

Hierarchy

Principles

• 压缩即身份：Geist Sans 在展示尺寸下使用 -2.4px 至 -2.88px 的字间距——是所有主流设计体系中负字间距最激进的。这使文字呈现出_压缩_感，仿佛为生产环境优化过的代码。字间距随字号减小而逐渐放松：32px 时 -1.28px，24px 时 -0.96px，16px 时 -0.32px，14px 时恢复正常。
• 连字无处不在：每一处 Geist 文字均启用 OpenType "liga"。连字并非装饰——它是结构性的，创造出更紧密、更高效的字形组合。
• 三种字重，严格分工：400（正文/阅读）、500（UI/交互）、600（标题/强调）。除极小徽章外不使用粗体（700）。这种窄字重范围通过字号和字间距构建层次感，而非依赖字重。
• 等宽即身份：大写的 Geist Mono 搭配 "tnum" 或 "liga"，充当”开发者控制台”的声音——紧凑的技术标签将营销站与产品连接起来。

4. Component Stylings

Buttons

主要白色按钮（阴影边框）

• Background: #ffffff
• Text: #171717
• Padding: 0px 6px（极小——由内容决定宽度）
• Radius: 6px（轻微圆角）
• Shadow: rgb(235, 235, 235) 0px 0px 0px 1px（环形边框）
• Hover: 背景切换为 var(--ds-gray-1000)（深色）
• Focus: 2px solid var(--ds-focus-color) 外轮廓 + var(--ds-focus-ring) 阴影
• 用途：标准次要按钮

主要深色按钮（源自 Geist 体系推断）

• Background: #171717
• Text: #ffffff
• Padding: 8px 16px
• Radius: 6px
• 用途：主要行动按钮（“Start Deploying”、“Get Started”）

胶囊按钮/徽章

• Background: #ebf5ff（带色调的蓝色）
• Text: #0068d6
• Padding: 0px 10px
• Radius: 9999px（完整胶囊）
• Font: 12px 字重 500
• 用途：状态徽章、标签、功能标注

大号胶囊（导航）

• Background: 透明或 #171717
• Radius: 64px–100px
• 用途：标签页导航、区块选择器

Cards & Containers

• Background: #ffffff
• 边框：通过阴影实现——rgba(0, 0, 0, 0.08) 0px 0px 0px 1px
• Radius: 8px（标准），12px（特色/图片卡片）
• 阴影叠层：rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px
• 图片卡片：1px solid #ebebeb，顶部 12px 圆角
• Hover：阴影轻微加深

Inputs & Forms

• 单选框：标准样式，焦点时 var(--ds-gray-200) 背景
• 焦点阴影：1px 0 0 0 var(--ds-gray-alpha-600)
• 焦点外轮廓：2px solid var(--ds-focus-color)——统一的蓝色焦点环
• 边框：通过阴影技术实现，而非传统边框

Navigation

• 白色背景上的简洁水平导航，吸顶固定
• Vercel 字标左对齐，262x52px
• 链接：Geist 14px 字重 500，#171717 文字
• 激活状态：字重 600 或下划线
• 行动按钮：深色胶囊按钮（“Start Deploying”、“Contact Sales”）
• 移动端：汉堡菜单折叠
• 产品下拉菜单支持多级展开

Image Treatment

• 产品截图带 1px solid #ebebeb 边框
• 顶部圆角图片：12px 12px 0px 0px 圆角
• 仪表板/代码预览截图主导功能区块
• 英雄图片后方带柔和渐变背景（多色粉彩）

Distinctive Components

工作流管线

• 三步水平管线：Develop（开发）→ Preview（预览）→ Ship（发布）
• 每个步骤有专属强调色：蓝色 → 粉色 → 红色
• 通过线条/箭头连接
• Vercel 核心价值主张的视觉隐喻

信任栏/Logo 网格

• 合作公司 Logo（Perplexity、ChatGPT、Cursor 等）以灰度展示
• 横向滚动或网格布局
• 用 #ebebeb 边框轻微分隔

指标卡片

• 大号数字展示（如”10x faster”）
• Geist 48px 字重 600 展示指标
• 下方配灰色正文描述
• 阴影边框卡片容器

5. Layout Principles

Spacing System

• 基础单位：8px
• 刻度：1px、2px、3px、4px、5px、6px、8px、10px、12px、14px、16px、32px、36px、40px
• 显著跳跃：从 16px 直接跳到 32px——主刻度中没有 20px 或 24px

Grid & Container

• 内容最大宽度：约 1200px
• 英雄区：居中单列，顶部留有充足 padding
• 功能区：卡片采用 2–3 列网格
• 全宽分隔线使用 border-bottom: 1px solid #171717
• 代码/仪表板截图以全宽或带边框的方式展示

Whitespace Philosophy

• 画廊式空旷感：区块间有大量垂直留白（80px–120px+）。留白本身即设计——它传达出 Vercel 无需证明、无需掩饰的从容。
• 文字紧凑，空间宽阔：标题上极强的负字间距与周围充裕的留白形成对位关系。文字密集，而环绕的空间辽阔。
• 区块节奏：白色区块与白色区块交替——区块间没有颜色变化。分隔依靠边框（阴影边框）和间距来实现。

Border Radius Scale

• 微型（2px）：行内代码片段、小号标签
• 细微（4px）：小型容器
• 标准（6px）：按钮、链接、功能元素
• 舒适（8px）：卡片、列表项
• 图片（12px）：特色卡片、图片容器（顶部圆角）
• 大号（64px）：标签页导航胶囊
• 超大（100px）：大号导航链接
• 完整胶囊（9999px）：徽章、状态胶囊、标签
• 圆形（50%）：菜单切换按钮、头像容器

6. Depth & Elevation

阴影哲学：Vercel 拥有现代 Web 设计中可以说是最精妙的阴影体系。它并非以 Material Design 的传统方式用阴影表达高度，而是通过多值阴影叠加，让每一层承担独特的架构职能：一层制造”边框”（0px 扩散，1px），一层添加环境柔和感（2px 模糊），一层处理远距深度（8px 模糊带负扩散），还有一层内层环（#fafafa）形成微妙的高光，让卡片”由内而外地发光”。这种层叠方式使卡片呈现出被精心构建的质感，而非漂浮感。

Decorative Depth

• 英雄渐变：英雄内容后方柔和的多色粉彩渐变（几乎不可见，营造氛围）
• 区块边框：主要区块之间用 1px solid #171717（完整深色线）分隔
• 无背景色变化——深度完全来自阴影叠加与边框对比

7. Do’s and Don’ts

Do

• 在展示尺寸使用带强负字间距的 Geist Sans（48px 时 -2.4px 至 -2.88px）
• 使用阴影即边框（0px 0px 0px 1px rgba(0,0,0,0.08)）而非传统 CSS 边框
• 在所有 Geist 文字上启用 "liga"——连字是结构性的，不可省略
• 使用三字重体系：400（正文）、500（UI）、600（标题）
• 仅在对应的工作流场景中使用工作流强调色（红/粉/蓝）
• 为卡片使用多层阴影叠加（边框 + 层次 + 环境 + 内层高光）
• 保持色板的消色差调——从 #171717 到 #ffffff 的灰色系就是整个体系
• 主要文字用 #171717 而非 #000000——微弱的暖调至关重要

Don’t

• 不要在 Geist Sans 上使用正字间距——永远是负值或零
• 不要在正文使用字重 700（粗体）——600 是上限，仅用于标题
• 不要在卡片上使用传统 CSS border——使用阴影边框技术
• 不要在 UI 主体中引入暖色（橙色、黄色、绿色）
• 不要将工作流强调色（Ship 红、Preview 粉、Develop 蓝）用于装饰目的
• 不要使用过重的阴影（不透明度 > 0.1）——该阴影体系的基调是耳语级别
• 不要增大正文字间距——Geist 本就设计为紧排
• 不要在主要行动按钮上使用胶囊圆角（9999px）——胶囊只用于徽章/标签
• 不要省略卡片阴影中的内层 #fafafa 环——正是它造就了整套体系的内发光效果

8. Responsive Behavior

Breakpoints

Touch Targets

• 按钮使用舒适的 padding（垂直 8px–16px）
• 导航链接 14px，间距充足
• 胶囊徽章水平 padding 10px，满足点击目标需求
• 移动端菜单切换按钮使用 50% 圆角圆形按钮

Collapsing Strategy

• 英雄区：展示字号 48px → 按比例缩小，负字间距等比保持
• 导航：水平链接 + 行动按钮 → 汉堡菜单
• 功能卡片：三列 → 两列 → 单列堆叠
• 代码截图：保持宽高比，可能出现横向滚动
• 信任栏 Logo：网格 → 横向滚动
• 页脚：多列 → 单列堆叠
• 区块间距：80px+ → 移动端缩减至 48px

Image Behavior

• 仪表板截图在各尺寸下保持边框处理
• 英雄渐变在移动端变得更柔和/简化
• 产品截图使用响应式图片，保持一致圆角
• 全宽区块在各端保持边到边的处理方式

9. Agent Prompt Guide

Quick Color Reference

• 主要行动按钮：Vercel 黑（#171717）
• 背景：纯白（#ffffff）
• 标题文字：Vercel 黑（#171717）
• 正文：灰 600（#4d4d4d）
• 边框（阴影）：rgba(0, 0, 0, 0.08) 0px 0px 0px 1px
• 链接：链接蓝（#0072f5）
• 焦点环：焦点蓝（hsla(212, 100%, 48%, 1)）

Example Component Prompts

• “在白色背景上创建英雄区。标题 48px Geist 字重 600，行高 1.00，字间距 -2.4px，颜色 #171717。副标题 20px Geist 字重 400，行高 1.80，颜色 #4d4d4d。深色行动按钮（#171717，6px 圆角，8px 16px padding）和幽灵按钮（白色，阴影边框 rgba(0,0,0,0.08) 0px 0px 0px 1px，6px 圆角）。”
• “设计一张卡片：白色背景，不使用 CSS border。使用阴影叠层：rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px。圆角 8px。标题 24px Geist 字重 600，字间距 -0.96px。正文 16px 字重 400，#4d4d4d。”
• “创建胶囊徽章：#ebf5ff 背景，#0068d6 文字，9999px 圆角，0px 10px padding，12px Geist 字重 500。”
• “创建导航：白色吸顶头部。Geist 14px 字重 500 的链接，#171717 文字。右对齐深色胶囊行动按钮 ‘Start Deploying’。底部阴影边框：rgba(0,0,0,0.08) 0px 0px 0px 1px。”
• “设计一个展示三步骤的工作流区块：Develop（文字颜色 #0a72ef）、Preview（#de1d8d）、Ship（#ff5b4f）。每个步骤：14px Geist Mono 大写标签 + 24px Geist 字重 600 标题 + 16px 字重 400 描述，颜色 #4d4d4d。“

Iteration Guide

1. 始终用阴影即边框代替 CSS border——0px 0px 0px 1px rgba(0,0,0,0.08) 是基础
2. 字间距随字号变化：48px 时 -2.4px，32px 时 -1.28px，24px 时 -0.96px，14px 时恢复正常
3. 仅使用三种字重：400（阅读）、500（交互）、600（强调）
4. 颜色是功能性的，非装饰性的——工作流颜色（红/粉/蓝）仅标记管线阶段
5. 卡片阴影中的内层 #fafafa 环是赋予 Vercel 卡片微妙内发光的关键
6. 技术标签用 Geist Mono 大写，其余一律用 Geist Sans