Mengke Wang (@MengkePM) “好消息，Vercel 把他们的设计系统直接开源了，两个地址： https://t.co/7K9y2Wn1rA ht” — TopicDigg

好消息，Vercel 把他们的设计系统直接开源了，两个地址： 里面写着颜色 token、字体规格、间距、圆角、组件、动效、甚至文案规范，全部写死了具体数值。 先说这套设计系统的核心逻辑是什么。 它的美学只有一个原则：颜色是用来传达信息的，而非装饰。整套色板有灰、蓝、红、绿、紫……但强调色只在两种情况下出现：状态（成功、错误、警告）和当前页面最重要的那一个操作。其他地方全部是灰。 字体用 Geist Sans 和 Geist Mono，两个都开源。所有标题的 letter-spacing 都是负值，越大越紧。我个人感受，这让标题看起来沉，不飘。 圆角只有三档：6px 日常控件，12px 弹窗菜单，16px 全屏大块面。整个产品里只选一种，不混用。 动效的原则我觉得是整个文档里最有意思的一句话：0ms 往往是最好的选择。能不动就不动，要动就短，要快。 然后说说我怎么看「学优秀设计」这件事。 直接照搬 Geist 的问题，文档自己也说了：这套美学辨识度太强，拿来就用，别人看到一眼就是这是用 Geist 做的，而不是这是你的品牌。 更大的问题是：Geist 是为开发者工具设计的，它的克制是因为它要承载 dashboard、日志、代码。用在消费者产品或者偏人文的场景里，会显得比较冷。 所以我自己用的方式是：学逻辑，不学样子。 我的业务所需要的视觉感受是：温暖的编辑部，冷静的产品工具。 所以，在颜色分工上：我的产品不需要是黑白灰，但强调色只有一个主角，这个原则是通用的。好事发生App是有自己的品牌色的，我们的小红书业务也有墨色 + 好事朱的视觉规范。再比如圆角只选一档、不混用，这不是 Geist 的风格，这是做决策时减少噪音的思路。 在字体层级上：正文 copy-14/16，辅助信息 label 系列，用 Mono 处理需要对齐的数字……这些在 SwiftUI 写 App 的时候完全可以翻译成同一套思维。 风格不是一套模板，是一套用来解决问题的方式。 Geist 解决的是：信息密度极高的工具界面，怎么保持清晰、不混乱。 你要解决的问题未必一样，但那个「先搞清楚自己要解决什么问题」的步骤，是一样的。 你也可以试试，让你的AI工具全面了解你的业务，读取开头的两个地址，去完善自己业务的品牌设计系统。 在创造的过程里，成为你自己，而不是照猫画虎。