Open Props 设计令牌库：渐变阴影配色全有，只给你的 CSS 补变量

Open Props 不给你组件，也不给你一套类名，它只提供一串写好的 CSS 自定义属性：渐变、阴影、缓动曲线、尺寸、配色、字体、圆角，全部是设计令牌。你可以只挑其中一部分引入，不强迫你改写整个项目的写法，也不绑定任何框架或预处理器。

它解决什么问题

自己从零定义一整套设计变量很费时：命名、取值、明暗双主题，每一样都要拍脑袋，还容易前后不一致。

很多设计系统组件又重又绑框架，只想给裸 CSS 加点规范的人，根本用不上那些东西。

核心能力

适合谁、边界在哪

它适合本就想自己写 CSS、只是不想从零定义一整套设计变量的人。把常见取值交给定令牌，你能把精力放回布局与组件本身，又保持全站数值一致。

边界是文档偏简洁，而且它假设你已经懂 CSS 变量（custom properties）的基本用法：作用域、var() 引用、回退值。完全的新手需要先补一点 CSS 基础，否则会觉得「这怎么用不上」。

同类工具怎么选

谁适合用

• 想自己写 CSS，但不想手写整套设计变量的人
• 需要全站数值统一、又不想引入重组件库的项目
• 做明暗主题，需要现成令牌省去取值试错的人

怎么开始

1. 在站点复制你要用的变量片段，或整体引入 open-props 包。
2. 把变量贴到 :root 或主题作用域，作为设计令牌。
3. 在样式里用 var(–color-…) 之类引用，替代硬编码数值。
4. 切明暗主题时，切换对应的 light / dark 变量作用域。
5. 只保留用到的变量，删掉多余的，保持样式表精简。

常见问题

它和组件库有什么区别？
没有任何组件。它只给 CSS 变量（设计令牌），按钮、卡片这些仍要你自己写，只是取值更规范。

能用在 React / Vue 吗？
能。它是纯 CSS 变量，与框架无关，任何能写 CSS 的项目都能引用。

需要构建工具吗？
不需要。直接复制变量到样式表即可，也可以 npm 安装后按需引入。

授权与合规

Open Props 采用 MIT 协议发布，可自由用于个人与商业项目。它只提供 CSS 自定义属性（设计令牌），无付费墙与商用限制。 官网：open-props.style。