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 或做技术感强的页面时翻出来对照。