適合你，如果……
- 使用 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 創作交付。