Geist Design System

Vercel 官方设计系统,含 Colors / Typography / Materials 三块基础规范、Geist Sans 与 Geist Mono 自带字体,以及 Icons 和 React 组件。

Vercel 自己那套视觉的源头。结构很清楚:Foundations(Colors、Typography、Materials)+ Brands(Vercel、Next.js、Turbo、v0、Eve 各自的品牌资产与用法)+ Icons(面向开发者工具的图标集)+ Components(React 组件的搭建积木)。

值得存的地方:

  • 配色是「高对比、可访问」的取向,跟 sign.red 现在这套「只留一个红强调色」的思路是同一条路数,做暗色时可以直接对着它的层级抄。
  • Materials 一节讲的是毛玻璃 / 半透模糊那类材质,正好对着我们吸顶元素 backdrop-filter: blur(14px) saturate(1.8) 的用法,可以拿来校准参数。
  • Geist Sans / Geist Mono 是 Vercel 专为开发者做的字体,站内就能加载体验,做技术类页面时可以对比一下现在的字体栈。
  • 它是设计系统 + 可安装的组件库(npx create-next-app 那条线),不只是文档站,想落地时能直接拿代码。

以后要重构 sign.red 的 token 或做技术感强的页面时翻出来对照。

打开原文