Vercel 网站预览
Vercel 网站预览

Vercel

黑白配色、细线边框与紧凑排版。

以近白色背景、黑色文字和细线边框组织页面,主要依靠字体、留白和明暗对比区分层级。Geist Sans 用于标题与正文,Geist Mono 用于代码和技术标签。适合参考的场景:开发者工具、API 服务或 SaaS 产品的介绍页,突出功能与技术信息。

查看原始网站

使用规范

建议采用

  • 所有主要文字和实心按钮使用 #171717;文字不要使用纯 #000000,深色表面不要使用 #ffffff。
  • 卡片、按钮和带边框的容器统一使用 6px 圆角(--geist-radius);仅胶囊形导航操作使用 9999px。
  • 56-64px 标题使用 400-450 字重和 -0.06em 字间距;标题不要使用超过 700 的粗体字重。
  • 眉题、标签和元数据标记统一使用 11-12px、大写的 Geist Mono,字间距 0.071em。
  • 通过叠加 box-shadow 形成细线边框(0 0 0 1px rgba(0,0,0,0.08), 0 0 0 2px #fafafa),不要使用投影。
  • 区块之间保留 96-128px 的垂直间距,不通过改变背景或增加分隔线划分区域。
  • CLI 命令以 ▲ 开头,确认信息以 #297a3a 的 ✓ 开头;终端模式本身就是产品演示。

建议避免

  • 除 Terminal Green(#297a3a)成功提示和光谱渐变外,不要引入其他有彩色;规则是 0% 色彩丰富度。
  • 卡片和矩形按钮不要使用超过 6px 的圆角;锐利感正是设计重点。
  • 正文和标题文字只能使用 #171717 / #4d4d4d / #666666 这一色阶。
  • 不要通过投影表现层级;只能使用细线环形描边,或完全不表现纵深。
  • 标题不要使用细体或半粗体(300 或 600-700);系统的标题字重最高保持在 400-450。
  • 56-64px 展示文字的行高不要超过 1.0;紧凑行距赋予文字建筑般的结构感。
  • 标签、元数据或代码不要使用 Geist Sans,这些位置只使用 Geist Mono。