OpenDesign 设计系统 2.0 溯源审计实战以 design-systems/canva 的 Token 契约与证据链为例【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design本文围绕 OpenDesign 仓库中 design-systems/canva/source/evidence.md 这份溯源证据文档展开。它记录了一个 Design System 2.0 品牌包Canva 风格如何从捆绑夹具bundled fixture回填而来、如何把 56 个设计 Token 逐一声明行映射回 tokens.css以及哪些文件属于可审计证据、哪些属于必须再生成的派生产物。读完本文你将掌握 OpenDesign 设计系统包的目录契约、Token 分层模型、契约报告token-contract.report.json的评分机制以及在实际使用中如何区分手写源与派生产物以避免破坏跨品牌切换的一致性。1. 溯源边界这是一份证据文档不是上游爬取声明evidence.md 开篇就界定了自己的数据边界这个 Canva 设计系统包是Design System 2.0 backfill回填其内容派生自 OpenDesign 仓库自身携带的精选捆绑夹具curated bundled fixture而不是对上游 Canva 品牌仓库或官网的一次全新爬取fresh crawl。这一点在 manifest.json 中有对应的机器可读声明source: { type: bundled, origin: OpenDesign curated bundled fixture }从源码结构看这个声明同时承担着许可证与证据边界的双重职责包内所有素材的合法性都锚定在仓库内已收录的夹具上任何对上游原始品牌素材的声称都被显式排除。这与 USAGE.md 的 Avoid 清单相呼应——避免声称拥有原始上游来源证据this package is based on the curated bundled fixture。对 Agent 和 LLM 而言这条边界意味着引用该包时只能以仓库内文件为事实依据。2. 包结构与证据文件体系evidence.md 列出的核心夹具文件有三个而整个包的目录结构比这更完整路径角色DESIGN.md视觉意图、约束与反模式设计规范主体tokens.cssToken 绑定样式表56 个 CSS 自定义属性components.html参考组件夹具含完整style与 DOMsource/token-contract.report.jsonToken 契约审计报告证据source/tokens.source.json源 Token 数据证据design-tokens.json派生产物JSON 格式 Tokentailwind-v4.css派生产物Tailwind v4theme映射components.manifest.json组件清单选择器、类、Token 引用统计preview/视觉核对页colors / typography / spacingmanifest.json 通过files与sourceFiles两个字段把上述文件分为交付物与证据两类files: { design: DESIGN.md, tokens: tokens.css, designTokens: design-tokens.json, tailwind: tailwind-v4.css, components: components.html }, sourceFiles: { evidence: source/evidence.md, tokens: source/tokens.source.json, report: source/token-contract.report.json }从包结构可以推断source/目录是只读的审计证据层design-tokens.json与tailwind-v4.css是可由证据再生成的输出层任何跨品牌一致性风险都源于对这两层的直接手改。3. 设计规范主体DESIGN.md 承载的 Canva 视觉决策DESIGN.md 是该包真正的灵魂也是 evidence.md 所引用夹具中最重的一份文档。它把 Canva 的品牌气质归纳为一句话友好胜过专业friendly where Adobe looks intimidating——纯白画布#ffffff之上只有品牌色紫→青渐变#7d2ae8 → #00c4cc是唯一的彩色品牌时刻。3.1 色板与角色分组Token 语义色值品牌渐变Canva Purple / Cyan / Pink#7d2ae8/#00c4cc/#ff5757表面Canvas / Subtle / Inset / Cool#ffffff/#f4f5f7/#e8eaed/#eef0fc墨色四级Primary / Secondary / Muted / Faint#0e1318/#3c4043/#5f6368/#9aa0a6语义Success / Warning / Error / Info#00b894/#ffb020/#ff5757/#0d99ff分类标签Coral / Tangerine / Mint / Sky / Lavender#ff7059/#ff9633/#48c997/#3ea6ff/#9b87f5边框Default / Strong#e1e3e6/#c7cdd3值得注意的设计决策是Error 与品牌色 Canva Pink 复用了同一个#ff5757——破坏性反馈继承了 Magic Studio 的品牌温度这在 tokens.css 的注释中有明确记录。3.2 排版层级用字重对比而非字号对比驱动层级Canva 包是无衬线唯一的体系Canva Sans圆体几何无衬线贯穿 chrome 与 prose衬线字体只作为编辑器内用户可选的模板字体出现。其层级完全靠字重阶梯800→700→600→400承载角色字号字重行高字距Hero64px (4rem)8001.05-0.02emH136px (2.25rem)7001.15-0.01emH224px (1.5rem)7001.2-0.005emH318px (1.125rem)6001.3normalBody Large16px (1rem)4001.55normalBody14px (0.875rem)4001.5normalCaption12px (0.75rem)5001.40.005emButton14px (0.875rem)6001.2normalTag11px (0.6875rem)6001.20.04emDESIGN.md 特别强调紧凑行高1.15–1.2的意义卡片标题即使占 3 行也必须在 4:3 缩略图内可读——这是模板产品与文档产品排版哲学的分水岭。3.3 组件样式速查DESIGN.md 第 4 节给出了可直接复制的组件配方这里完整摘录关键参数主按钮渐变linear-gradient(135deg, #7d2ae8, #00c4cc)白字12px 20px 内边距8px 圆角静止阴影0 2px 8px rgba(125,42,232,0.2)悬停升级为0 4px 14px rgba(125,42,232,0.3)——用于 hero CTA 与 Try Canva Pro。主按钮纯紫#7d2ae8悬停#6815d4。次按钮白底、1px#e1e3e6描边悬停背景#f4f5f7、描边#c7cdd3。幽灵按钮Subtlergba(125,42,232,0.08)底 紫字悬停升至0.14透明度。卡片/模板瓦片白底 1px 描边12px 圆角静止阴影0 1px 3px rgba(0,0,0,0.04)悬停0 8px 24px rgba(0,0,0,0.08) 上浮 2px缩略图保持 1:1 / 4:3 / 9:16。输入框10px 14px 内边距、8px 圆角聚焦时描边#7d2ae8 3px 紫色光环rgba(125,42,232,0.16)。Chip/标签分类色柔化底 强色文字4px 10px9999px胶囊11px/600/大写。Pro 徽章linear-gradient(135deg, #7d2ae8, #ff5757)胶囊10px/700/大写。3.4 间距、动效与护栏间距以4px 为基准尺度为 4/8/12/16/24/32/48/64/96容器最大 1320px、桌面端 32px 沟槽卡片栅格移动端 16px、桌面端 24px 间距。动效三档hover 180ms、菜单打开 280ms、编辑器侧栏折叠 420ms缓动统一为 Material 风格cubic-bezier(0.4, 0, 0.2, 1)。四条护栏白画布必须保持主导、渐变只留给品牌/Pro/Magic/单一 CTA、分类色不得与主渐变抢戏、工具 UI 再密集也要保持亲和感。4. Token 化落地tokens.css 的四层结构与 56 个 Tokentokens.css 把 DESIGN.md 的所有决策落成:root下的 CSS 自定义属性。根据 token-contract.report.json 的layerCounts56 个 Token 被划分为四层分层数量代表性 Token语义A1-identity8--bg--surface--fg--muted--border--accent--font-display--font-body品牌身份锚点跨品牌切换时保持稳定B-slot4--surface-warm--fg-2--meta--border-soft槽位层指向其他 Token 或品牌未定义值的占位A226--accent-hover--success--warn--danger--font-mono--space-*--radius-*--elev-*--focus-ring--motion-*--ease-standard具体取值层随品牌变化A1-structure18--text-xs~--text-4xl--leading-*--tracking-display--section-y-*--container-*结构尺度承载排版与布局骨架报告中的关键统计是totalTokens: 56、declaredTokens: 56、sourceBackedTokens: 56即100% 的 Token 都有源声明支撑aliasTokens: 2对应--surface-warm: var(--surface)与--border-soft: var(--border)这两个别名——tokens.css 注释解释得很清楚DESIGN.md 并未规定 Canva 有暖色面层或更柔的边框层用别名满足 schema 而不虚构品牌不存在的层级。另有一个技术细节值得展开--accent-active的取值是color-mix(in oklab, var(--accent), black 14%)即在 oklab 色彩空间内混合 14% 黑色得到按下态。这是现代 CSS 色彩插值能力的应用避免了为按压缩手写一个独立 hex 值让按下态随品牌主色自动派生。类型尺度方面tokens.css 采用压缩型设计64px hero、36px H1之后以 24/18/16/14/12/11 递进Tag11px作为地板——保证大写分类 chip 在模板瓦片上依然可读。5. 契约审计机制token-contract.report.json 如何保证可追溯evidence.md 的核心贡献在于定义了一套审计协议source/token-contract.report.json把每一个 TOKEN_SCHEMA 绑定映射回已提交的tokens.css声明行。报告里每个 Token 条目都携带sources数组直接指向样式表行号例如{ name: --bg, layer: A1-identity, value: #ffffff, sources: [tokens.css:25] }, { name: --accent, layer: A1-identity, value: #7d2ae8, sources: [tokens.css:51] }, { name: --text-4xl, layer: A1-structure, value: 64px, sources: [tokens.css:81] }每一条还带有confidence: high与reason字段说明该绑定的来源性质本次回填基于捆绑夹具声明未做上游重爬。这种声明行号 置信度 理由的三元组让审计者能在几秒内定位任何一个 Token 的物理出处。报告的summary还给出了一个可机器判定的健康度评分score: 100, grade: excellent, recommendRebuild: falsesourceBackedA1: 26表示 26 个 A1 层 Token 全部有源支撑fallbackTokens: 26对应未单独取值、需要回退到别处的 Token包括 B-slot 别名与部分结构 token。当recommendRebuild变为true时即说明派生产物与源 Token 样式表发生了漂移需要重新生成——这是整个审计闭环的警报器。6. 派生产物规则为什么 design-tokens.json 和 tailwind-v4.css 不能手改evidence.md 给出了该包最重要的维护规则design-tokens.json和tailwind-v4.css是派生输出应当从报告与 Token 样式表重新生成而不是手工编辑。tailwind-v4.css 文件头部的注释直接印证了这一规则Derived from tokens.css. Keep tokens.css as the source of truth.。它的结构是把 tokens.css 的自定义属性桥接进 Tailwind v4 的theme块import tailwindcss; import ./tokens.css; theme { --color-accent: var(--accent); --color-accent-hover: var(--accent-hover); --font-display: var(--font-display); --text-4xl: var(--text-4xl); --spacing-4: var(--space-4); --radius-pill: var(--radius-pill); --shadow-raised: var(--elev-raised); --ease-standard: var(--ease-standard); /* ... */ }映射命名上有三个显式约定颜色--color-*、间距--spacing-*、阴影--shadow-*而--font-sans被桥接到--font-body保证 Tailwind 默认字体族与品牌体一致。这套单一事实源tokens.css→ 多格式派生的架构与第 5 节的契约报告共同构成一个可验证的流水线手改派生产物 破坏证据链改 tokens.css 后重新生成 合法演进。7. 组件清单components.manifest.json 的量化视角components.html 是一份 57 个选择器、32 个类、27 个元素的可运行参考夹具其:root块与 tokens.css 逐 Token 一致。配套的 components.manifest.json 用数据回答了这个品牌包到底覆盖了哪些组件能力fixture统计styleBlockCount 1、selectorCount 57、classCount 32、elementCount 27tokens.declared列出全部 56 个声明 Tokentokens.referenced列出夹具实际引用的 44 个unusedDeclared如--accent-active、--danger、--elev-*与undeclaredReferenced空即无未声明引用用于发现声明了但没用到与用了但没声明两类问题groups把组件归纳为 9 组buttons、inputs、cards、badges、links、keyboard、icons、typography、layout每组都附有selectors与tokenReferences。从源码结构看这份清单的价值在于USAGE.md 要求 Agent 在发明新控件之前先复用 components.manifest.json 中的组件组它充当了生成式工作流的允许清单。8. 实战使用按 USAGE.md 的读序消费该包USAGE.md 为 OpenDesign Agent 与评审者定义了标准消费流程先读 USAGE.md 理解包契约读 DESIGN.md 掌握视觉意图、约束与反模式把 tokens.css 粘贴到第一个 artifact 的style块最前面再写组件 CSS用 components.manifest.json 做快速组件盘点需要精确选择器或状态时打开 components.html需要视觉核对时查看 preview/ 下的 colors / typography / spacing 三页。其 Do 清单要求严格保留 schema Token 名称以保证跨品牌切换可靠这是 Design System 2.0 最核心的承诺、主操作一律走--accent、复用组件组而非自创控件、把source/视为回填的审计证据。Avoid 清单则禁止在:root块之外写裸 hex、脱离 tokens.css 单独重定义 Tailwind 或 design-token 值、声称原始上游证据、新增 components.html 与 DESIGN.md 未覆盖的组件配方。包级 manifest.json 还声明了 craft 建议color、accessibility-baseline对应仓库 craft/color.md 与 craft/accessibility-baseline.md意味着消费该包时还应接受色彩一致性与无障碍基线的工艺检查。9. 总结一份可审计的设计系统长什么样从 evidence.md 出发Canva 包展示了一条完整的、可被 Agent 与 LLM 机器化消费的证据链边界诚实bundled fixture 而非上游爬取→规范完整DESIGN.md 的色板、排版、组件、动效、护栏→Token 化落地tokens.css 的 56 个四层 Token→逐行可溯源token-contract.report.json 的sources行号与 100 分契约评分→派生受控design-tokens.json 与 tailwind-v4.css 只可再生成、不可手改→组件可盘点components.manifest.json 的 9 组件组与 57 选择器→消费有护栏USAGE.md 的读序与 Do/Avoid。对希望在 OpenDesign 中新增或审计其他品牌包airbnb、stripe、notion 等同样位于 design-systems/ 下的开发者而言这套证据文档 契约报告 派生规则的范式可以直接复用任何设计系统的质量都不取决于它宣称有多像原品牌而取决于它的每一个 Token 是否都能被一条tokens.css:行号的引用所证明。【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
