Vercel 近日将其内部设计系统 Geist 完整开源，以两个 Markdown 文档（design.md 与 design.dark.md）的形式公开了从颜色 token、字体规格、间距、圆角到组件、动效乃至文案规范的全部设计决策。
核心设计逻辑：信息优先，装饰让位
Geist 的美学原则可以概括为一句话：颜色是用来传达信息的，而非装饰。
整套色板涵盖灰、蓝、红、绿、紫等基础色系，但强调色（如蓝色、红色）仅在两种场景出现：
- 状态反馈：成功、错误、警告等需要用户立即注意的系统状态
- 核心操作：当前页面最重要的那一个操作按钮
其余所有界面元素一律使用灰色系。这种克制的配色策略确保了高信息密度工具界面中的视觉清晰度和层级分明。
字体与排版：沉下去，不飘
Geist 采用 Geist Sans 和 Geist Mono 两款开源字体。一个值得注意的细节是：所有标题的 letter-spacing 均为负值，字号越大，字间距越紧。这种处理方式让标题在视觉上更具重量感，避免了过度松散带来的轻浮感。
圆角与动效：极简的纪律
圆角系统只有三档，且全产品统一不混用：
- 6px：日常控件（按钮、输入框等）
- 12px：弹窗、菜单等浮层
- 16px：全屏大块面、模态框
动效原则或许是整份文档中最具辨识度的一句话："0ms 往往是最好的选择"。能不动就不动，要动就短、要快。在动效内卷的行业趋势下，Vercel 为工具型产品划定了一条清晰的交互底线——不打扰用户完成核心任务。
设计系统的本质：解决问题的方式
Geist 并非一套可直接套用的模板，而是一套解决特定问题的思维方式。它所面对的是信息密度极高的工具界面如何保持清晰、不混乱这一命题。
正如文档所强调的：不同产品面临的问题未必相同，但「先搞清楚自己要解决什么问题」这一步骤是通用的。Vercel 将自身的设计决策逻辑透明化，为其他团队构建品牌设计系统提供了可参照的决策框架，而非现成的答案。
原文由 Mengke Wang (@MengkePM) 整理发布于 X。