适合你，如果……
- 使用 CSS、Tailwind 或 DTCG 的前端与设计系统团队
- 需要稳定 primitive token 命名与完整 JSON
- 愿意自行映射语义色并验证对比度
Chinese Color AtlasRESOURCE PACK
立即购买 · DIGITAL DOWNLOAD
前端工程师 · 设计系统构建者
前端工程师 · 设计系统构建者
CSS 与 Tailwind Token 包
同一套 161 色 clean-source 核心，以完全同步的 CSS、Tailwind、W3C DTCG、Figma Variables JSON 与 canonical JSON 格式交付。
你会得到
✓161 个与 MIT 来源名称和 HEX 精确匹配的 CSS 自定义属性
✓带稳定 token 命名的 Tailwind 主题片段
✓用于设计系统交付的 W3C DTCG 设计 Tokens
✓含 RGB、HSL、CMYK、可靠度与明确来源权利的 canonical JSON
✓使用相同已验证名称和 HEX 的 Figma Variables JSON
不适合你，如果……
- 需要可视化 Figma、ASE 或 Procreate 文件
- 只想找现成品牌方案而不做语义映射
代码结构预览
保留传统色名的 primitive tokens，再映射到产品语义
开发包不替你决定 brand、surface 或 text；它提供稳定基础值，让团队按自己的无障碍与品牌规范完成映射。
CSS
--cc-yanzhi: #9D2933;TAILWIND
colors: { 'cc-yanzhi': '#9D2933' }DTCG
"yanzhi": { "$type": "color", "$value": "#9D2933" }这里只展示一个公开示例 token；完整 161 色 clean-source CSS、Tailwind、DTCG、Figma Variables JSON 与 canonical JSON 仅在付费 ZIP 中。
文件清单
✓ 161 个与 MIT 来源名称和 HEX 精确匹配的 CSS 自定义属性
✓ 带稳定 token 命名的 Tailwind 主题片段
✓ 用于设计系统交付的 W3C DTCG 设计 Tokens
✓ 含 RGB、HSL、CMYK、可靠度与明确来源权利的 canonical JSON
✓ 使用相同已验证名称和 HEX 的 Figma Variables JSON
使用步骤
- 下载并解压开发者包，按技术栈选择 CSS、Tailwind、DTCG 或结构化 JSON。
- 先在测试分支导入，并把中国色 primitive tokens 映射到项目的语义角色，再进入生产环境。
- 检查对比度、命名和构建体积；团队交付时保留许可与来源说明。
交付与支持
购买后通过 Polar 交付 cathycolor-developer-token-pack.zip。如文件缺失、损坏或无法访问，请联系 support@chinesecoloratlas.com。
适合哪些工作流？
给 Tailwind 和 CSS 项目
把中国传统色转成稳定 token 名、CSS 自定义属性、Tailwind theme partial 和 DTCG JSON。
适合设计系统接入
先用 primitive tokens 保留色名，再映射到 brand、surface、text、border、accent 等语义角色。
比完整包更聚焦
如果你不需要 Figma、Procreate、ASE 或 AI prompts，只需要网页和产品 UI 交付，这个包更轻。
免费样包
使用多个工具？
完整包把 Figma、ASE、Procreate、CSS、Tailwind 和 AI 提示词放在一起。
如果你不只使用一个工具，完整包会比拆开购买更清晰：一次下载，覆盖设计、开发和 AI 创作交付。