Loading...
Loading...
浏览 150 套真实产品的设计系统,查看它们的配色、字体与间距,并把 token 复制进你自己的项目。
很多团队每次开新项目都在重复造同样的色阶、字号梯度和间距单位。这个浏览器收录了 150 套真实产品的设计系统,就是你在 Linear、Stripe、Notion 这类产品背后看到的那种,让你直接学习成熟团队到底是怎么组织 token 的。
选中任意一套,你就能看到它完整的调色板、它搭配使用的字体,以及它采用的间距节奏。所有数据都以静态形式打包进页面,浏览即时响应,你的访问也不会被发往任何地方。当你找到适合当前项目的系统时,把它的 tokens.css 一键复制,直接放进你的代码库即可。
覆盖 SaaS 仪表盘、营销站点和开发者工具的广泛库,每套都记录了真实可用的数值,而不是含糊的描述。
看到主色、中性色和语义色及其十六进制值,方便你在借用之前先判断对比度与协调度。
每套系统都列出它使用的标题字体与正文字体以及字重,让你一眼就能找到本就配合默契的组合。
查看一套系统所依赖的基础单位与梯度,这往往是区分精致界面与杂乱界面的那个安静细节。
一键复制一份现成的 CSS 自定义属性文件,粘贴进项目即可立刻基于它做主题。
同时打开多套系统,对比不同团队如何解决相同问题,这是快速培养自己审美的捷径。
不要整套照搬。挑出适合你产品的部分(通常是中性色阶和间距梯度),保留你自己的品牌色。
滚动或筛选这个库,找到气质与你要做的东西匹配的系统。
打开它,细看它的调色板、字体搭配和间距梯度。
把几个候选并排对比,决定哪种结构更适合你。
复制 tokens.css 粘贴进项目,再按需调整品牌数值。
借用一套经过验证的 token 结构作为基础,而不是对着数值瞎猜,直接跳过空白页难题。
把你现有的配色和间距放在成熟系统旁边,看看自己哪里显得不一致或太随意。
刚接触系统化界面的设计师和开发者,可以研究有经验的团队如何命名和组织 token。
向相关方展示具体的参考系统,为关于视觉方向的讨论锚定一个起点。
基于 React 与 TypeScript 构建,完全在客户端运行。150 套系统存放在一个打包好的 JSON 数据文件里,页面只加载一次,因此所有浏览、查看和复制都在本地完成,不涉及任何后端。
你在这里的所有操作都不会被追踪或传输。我们不统计你打开了哪些系统,也没有任何上传,因为这个工具根本没有可发送数据的服务器。
由于数据是静态且本地的,即便面对全部 150 套系统,搜索和筛选也即时响应,首屏加载之后切换选择不会有任何加载转圈。