OpenDesign 中的 Cohere 风格企业级 AI 设计系统22px 签名圆角、双字体体系与 Agent 可消费的设计规范全解【免费下载链接】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/cohere设计系统包DESIGN.md法语版见 DESIGN-fr.md为骨架展开。该包是一套面向「企业级 AI 平台」的完整视觉语言亮白画布、22px 签名圆角卡片、CohereText 衬线标题 Unica77 无衬线正文的双字体体系以及严格的黑白冷灰配色。读完本文你将掌握这套系统的全部颜色令牌、排版层级、组件样式、响应式策略与做/不做清单并学会如何把它作为 Agent 可消费的设计上下文DESIGN.mdtokens.css直接用于 AI 生成企业级产品界面。OpenDesign 的设计系统目录design-systems/README.md内置了 151 个可移植设计系统包每个包都遵循统一的最小机器可读结构manifest.json发现元数据、DESIGN.md面向 Agent 的规范正文、tokens.css编译后的语义令牌样式表。cohere包正是其中的代表——它面向 CTO 与企业架构师把「AI 是严肃基础设施」的信念编码为可复制的视觉与令牌规范。1. 包结构Agent 如何消费这套设计系统在 OpenDesign 中一个设计系统包不是孤立的 Markdown 文档而是一组严格契约化的文件。manifest.json 声明了该包的完整文件布局files.design→DESIGN.mdAgent 阅读的规范正文files.tokens→tokens.css语义令牌的单一事实来源source of truthdesignTokens→design-tokens.json、tailwind→tailwind-v4.css、components→components.html派生文件usage→USAGE.md面向 Agent 与评审者的阅读顺序与使用纪律previewcolors.html、typography.html、spacing.html三个可视化预览页sourceFilesevidence.md、tokens.source.json、token-contract.report.json审计证据。USAGE.md 规定了严格的使用流程先读 USAGE 理解包契约 → 再读 DESIGN.md 理解视觉意图与反模式 → 把tokens.css粘进首个 artifact 的style块 → 用components.manifest.json做组件清单 → 必要时打开preview/页面做视觉校验。它还强调两条纪律保留 schema 令牌名以保证跨品牌切换可靠、不要在复制的:root令牌块之外使用裸十六进制值。2. 视觉主题与氛围企业级「指挥台」美学Cohere 的界面被描述为一座精致的企业指挥台——自信、干净让 AI 呈现「严肃基础设施」而非消费级玩具的气质。核心体验建立在一片明亮的白色画布上内容被组织进慷慨圆角22px的卡片中形成一种有机、云朵般的 containment 语言。整个站点面向 CTO 与企业架构师专业而不冷漠精致而不令人生畏。这套语言的关键特征亮白画布 冷灰 containment 边框#d9d9dd、#e5e7eb22px 签名圆角——「Cohere 卡片」的独特圆润感双自定义字体CohereText展示衬线 Unica77正文无衬线企业级色彩克制黑、白、冷灰、极少量紫蓝点缀深紫/紫罗兰 hero 区块制造戏剧性对比幽灵/透明按钮悬停时转为蓝色CohereMono 用于代码与技术标签大写转换。双字体体系的本质CohereText 是定制展示衬线、字距紧凑让标题拥有「技术宣言」般的庄重感Unica77 Cohere Web 以瑞士几何精度处理所有正文与 UI 文本。衬线/无衬线的组合塑造了「自信权威遇见工程清晰」的人格——这恰好映射企业 AI 平台的双重身份既是思想领袖又是可靠基础设施。色彩的极度克制界面几乎全黑白只有交互蓝#1863dc在悬停/聚焦时出现。正因如此当颜色真正出现时——产品截图、企业摄影、深紫区块——它承载了最大的视觉权重。克制即力量这是本系统最重要的色彩哲学。3. 颜色系统完整令牌表与角色分工主色Primary令牌名色值角色Cohere Black#000000主标题文本、最大强调元素Near Black#212121标准正文链接色——比纯黑稍柔和Deep Dark#17171c带蓝调的近黑用于导航与深色区块文本次级与强调色Secondary Accent令牌名色值角色Interaction Blue#1863dc主要交互强调——按钮悬停、聚焦态、激活链接唯一的彩色动作色Ring Blue#4c6ee650% 透明度Tailwind ring 色键盘聚焦指示Focus Purple#9b60aa输入框聚焦边框色——柔和的紫罗兰表面与背景Surface Background令牌名色值角色Pure White#ffffff主页面背景与卡片表面Snow#fafafa轻微抬升的表面、浅色区块背景Lightest Gray#f2f2f2卡片边框与最柔和的 containment 线中性色与文本Neutrals Text令牌名色值角色Muted Slate#93939f弱化的页脚链接与三级文本——冷调灰带轻微蓝紫Border Cool#d9d9dd标准区块与列表项边框——冷调、略带紫的灰Border Light#e5e7eb更浅的边框变体——即 Tailwind 标准 gray-200渐变系统Gradient System紫罗兰 hero 带深紫渐变区块与白色画布形成戏剧对比以全宽带形式承载产品截图与关键信息深色页脚渐变页面经由深紫/炭黑过渡到黑色页脚制造「黄昏」效果。源码级实现令牌如何被固化design-systems/cohere/tokens.css 把上述角色逐一固化为 CSS 自定义属性并补充了 DESIGN.md 未展开的实现细节:root { /* Surface */ --bg: #ffffff; --surface: #fafafa; /* Snow */ --surface-warm: var(--surface); /* 无暖色层级——严格冷调 */ /* Foreground */ --fg: #000000; /* Cohere Black */ --fg-2: #212121; /* Near Black */ --muted: #93939f; /* Muted Slate */ --meta: var(--muted); /* Border */ --border: #d9d9dd; /* Border Cool */ --border-soft: #f2f2f2; /* Lightest Gray */ /* Accent — 仅悬停/聚焦时出现 */ --accent: #1863dc; --accent-on: #ffffff; --accent-hover: color-mix(in oklab, var(--accent), black 8%); --accent-active: color-mix(in oklab, var(--accent), black 16%); /* Semantic — 仅用于状态不做装饰 */ --success: #16a34a; --warn: #eab308; --danger: #ef4444; }值得注意的实现细节--accent-hover/--accent-active使用 CSScolor-mix(in oklab, …)在 OKLab 色彩空间对 Interaction Blue 做 8%/16% 的黑混合获得比手工选色更一致的悬停/按下深色变体--surface-warm被显式别名为--surface在令牌层面硬性保证「本系统没有暖色层级」。design-tokens.json 是令牌契约的审计产物共56 个令牌分层为A1-identity8 个品牌身份令牌、A1-structure18 个结构令牌、B-slot4 个槽位令牌、A226 个派生令牌契约得分100 / grade: excellent且recommendRebuild: false——即当前令牌与组件夹具完全一致无需重建。从源码结构可以推断OpenDesign 的令牌契约体系要求design-tokens.json与tokens.css严格对齐任何偏移都会触发质量门禁。4. 排版规则衬线宣言 无衬线实用主义字体族Font Family用途字体栈展示DisplayCohereText回退Space Grotesk, Inter, ui-sans-serif, system-ui正文 / UIUnica77 Cohere Web回退Inter, Arial, ui-sans-serif, system-ui代码CodeCohereMono回退Arial, ui-sans-serif, system-ui图标CohereIconDefault自定义图标字体tokens.css 中的实际字体令牌为--font-display/--font-body/--font-mono其中 mono 栈额外加入了JetBrains Mono, ui-monospace, monospace作为更现代的等宽回退。完整排版层级表Hierarchy角色字体字号字重行高字距备注Display / HeroCohereText72px (4.5rem)4001.00紧凑-1.44px最大冲击力衬线权威Display SecondaryCohereText60px (3.75rem)4001.00紧凑-1.2px大型区块标题Section HeadingUnica7748px (3rem)4001.20紧凑-0.48px功能区块标题Sub-headingUnica7732px (2rem)4001.20紧凑-0.32px卡片标题、功能名Feature TitleUnica7724px (1.5rem)4001.30normal更小的区块标题Body LargeUnica7718px (1.13rem)4001.40normal引言段落Body / ButtonUnica7716px (1rem)4001.50normal标准正文、按钮文本Button MediumUnica7714px (0.88rem)5001.71放松normal小按钮、强调标签CaptionUnica7714px (0.88rem)4001.40normal元数据、描述Uppercase LabelUnica77 / CohereMono14px (0.88rem)4001.400.28px大写区块标签SmallUnica7712px (0.75rem)4001.40normal最小文本、页脚链接Code MicroCohereMono8px (0.5rem)4001.400.16px微型大写代码标签排版原则衬线用于宣言无衬线用于功能CohereText 在展示尺度上承载品牌声音其衬线终端让标题拥有「已发表研究」般的权威Unica77 以瑞士几何中性处理一切功能性内容。大尺度的负字距CohereText 在 60–72px 使用 -1.2px 至 -1.44px 字距形成密集、有冲击力的文本块。tokens.css 将其编码为--tracking-display: -0.02em约等于 72px 下的 -1.44px并配套--leading-tight: 1.0。单一正文字重Unica77 几乎全部使用 400500 只出现在小按钮强调上。系统靠字号与间距而非字重对比建立层级。大写代码标签CohereMono 使用大写 正字距0.16–0.28px标注技术标签与区块标记构建「技术、结构化」的信息层级。tokens.css 的字号令牌--text-xs: 12px…--text-4xl: 72px与 DESIGN.md 的层级表一一对应其中 48px 区块标题在令牌层没有单独条目而是由 60px/72px 两个展示级 32px 副标题级夹逼——从源码结构看这套尺度刻意压缩了中间档位强化「跳级式」的对比节奏。5. 组件样式按钮Buttons——三态体系幽灵/透明按钮Ghost / Transparent——主按钮样式背景透明rgba(255, 255, 255, 0)文本Cohere Black#000000无可见边框悬停文本转为 Interaction Blue#1863dc不透明度 0.8聚焦2px 实心 Interaction Blue 轮廓设计意图不交互时近乎不可见交互时才显现——这是克制美学的直接体现。深色实心按钮Dark Solid深色/黑色背景 Pure White 文本用于浅色表面上的 CTA药丸形或标准圆角。描边按钮Outlined基于边框的 containment用于次级操作。从 components.manifest.json 的组件组可见按钮组buttons由.btn、.btn-primary、.btn-secondary及:hover/:focus-visible状态构成引用令牌--accent、--fg-2、--focus-ring整体夹具包含 48 个选择器、25 个类、25 个元素。--focus-ring: 0 0 0 2px var(--accent)即「2px 实心 Interaction Blue 轮廓」的标准化实现。卡片与容器Cards Containers背景Pure White#ffffff边框细实线 Lightest Gray1px solid #f2f2f2用于低调卡片Border Cool#d9d9dd用于强调卡片圆角22px——主卡片、图片、对话容器的签名圆角小元素用 4px、8px、16px、20px阴影极少——Cohere 依赖背景色与边框而非阴影特殊区块容器使用0px 0px 22px 22px仅底部圆角对话框模态/对话框用 8px 圆角。tokens.css 对圆角体系做了清晰的令牌分层--radius-sm: 8px对话框、导航项、次级元素、--radius-md: 22px主签名圆角每张主卡片和容器、--radius-lg: 22px大型展示容器沿用 22px、--radius-pill: 9999px按钮、状态标签。输入框与表单Inputs Forms文本深色输入上为白色浅色输入上为黑色聚焦边框Focus Purple#9b60aa1px solid聚焦阴影红色 ringrgb(179, 0, 0) 0px 0px 0px 2px——推测用于错误状态指示聚焦轮廓2px 实心 Interaction Blue。从组件清单看表单组inputs包含.field、.field label、.field input、.field input::placeholder、.field input:focus-visible、.field-help等选择器引用令牌--focus-ring、--muted、--text-sm、--text-xs说明帮助文本与占位符刻意采用弱化灰阶。导航Navigation白底或深底上的简洁水平导航LogoCohere wordmark自定义 SVG链接16px Unica77 深色文本CTA深色实心按钮移动端折叠为汉堡菜单。图片处理Image Treatment覆盖多元主题与场景的企业摄影紫色调 hero 摄影用于戏剧性区块深色表面上的产品 UI 截图图片沿用 22px 圆角与卡片系统一致全出血紫色渐变区块。标志性组件Distinctive Components22px 卡片系统22px 圆角是 Cohere 的视觉签名所有主卡片、图片、容器都用它形成云朵般有机柔和的质感——与常规的 8–12px 圆角形成鲜明区分。企业信任条Enterprise Trust Bar公司 Logo 以水平条带展示简洁单色处理佐证企业级采用。紫色 hero 带Purple Hero Bands全宽深紫区块承载产品展示在白色页面流中制造戏剧性视觉断裂产品截图「悬浮」于紫色环境中。大写代码标签Uppercase Code TagsCohereMono 大写 字距用作区块标记与分类标签构建技术化、结构化的信息层级。6. 布局原则间距系统Spacing System基础单位8px尺度2px, 6px, 8px, 10px, 12px, 16px, 20px, 22px, 24px, 28px, 32px, 36px, 40px, 56px, 60px按钮内边距随变体变化卡片内边距约 24–32px区块垂直间距慷慨区块间 56–60px。tokens.css 将间距固化为--space-14px到--space-1248px的离散刻度并把区块节奏建模为响应式变量--section-y-desktop: 60px、--section-y-tablet: 48px、--section-y-phone: 32px——桌面端 60px 的慷慨节奏在手机端压缩到 32px但仍守住「企业布局需要呼吸空间」的下限Do/Dont 中明确禁止低于 40px 的桌面间距。网格与容器Grid Container容器最大宽度最高 2560px非常宽 响应式缩放Hero居中 戏剧性排版功能区块多列卡片网格企业区块全宽紫色带检测到 26 个断点——极度细粒度的响应式系统。tokens.css 将容器建模为--container-max: 1440px面向企业大屏的实用宽度并配套三档 gutter桌面 32px、平板 24px、手机 16px。从源码结构可以推断DESIGN.md 提到的 2560px 极宽上限与 26 断点主要由组件侧媒体查询处理令牌层只负责定义容器与 gutter 基线。留白哲学Whitespace Philosophy企业清晰度每个区块只表达一个明确主张区块之间留有呼吸空间摄影即 hero大尺寸摄影区块提供视觉趣味无需装饰性设计元素卡片分组相关内容被组织进 22px 圆角卡片形成自然的信息簇。圆角尺度Border Radius Scale档位数值用途Sharp锐利4px导航元素、小标签、分页Comfortable舒适8px对话框、次级容器、小卡片Generous慷慨16px重点容器、中等卡片Large大20px大型功能卡片Signature签名22px主卡片、hero 图片、主容器——THE Cohere 圆角Pill药丸9999px按钮、标签、状态指示器7. 深度与层级Depth Elevation层级处理方式用途平面Level 0无阴影、无边框页面背景、文本块描边Level 11px solid #f2f2f2或#d9d9dd标准卡片、列表分隔紫色带Level 2全宽深紫背景Hero 区块、功能展示阴影哲学Cohere 几乎是零阴影系统。深度通过三种手段传达——背景色对比紫带上的白卡、snow 上的白色表面、边框 containment冷灰边框、明暗区块的戏剧性交替。元素需要抬升时靠「白在深上」而非投影实现。tokens.css 的实现进一步印证--elev-flat: none、--elev-ring: 0 0 0 1px var(--border-soft)1px 白上描边环、--elev-raised: 0 4px 16px rgba(0, 0, 0, 0.06)唯一一处极轻的悬停阴影透明度仅 6%。运动规范同样克制--motion-fast: 150ms、--motion-base: 200ms缓动使用cubic-bezier(0.2, 0, 0, 1)——注释明确写道「企业界面感觉沉稳而非弹跳」。8. 做与不做Dos and Donts要做Do所有主卡片与容器使用22px 圆角——这是视觉签名展示标题72px、60px用 CohereText 负字距所有正文与 UI 文本用 Unica77字重 400保持黑白调色板 冷灰边框Interaction Blue#1863dc只用于悬停/聚焦交互状态用深紫区块制造戏剧性视觉断裂与产品展示CohereMono 应用大写 字距做区块标签保持企业级摄影与多元主体。不要做Dont主卡片不要用 22px 以外的圆角——签名圆角很重要不要引入暖色——调色板严格冷调不要使用厚重阴影——深度来自色彩对比与边框不要在正文使用粗体700——400–500 是基准区间不要跳过衬线/无衬线层级——标题用 CohereText正文用 Unica77不要把紫色用作卡片表面色——紫色保留给全宽区块不要把区块间距压缩到 40px 以下——企业布局需要呼吸空间不要给默认按钮加装饰——幽灵/透明是基础态。9. 响应式行为Responsive Behavior断点Breakpoints名称宽度关键变化小手机425px紧凑布局、最小间距手机425–640px单列、卡片堆叠大手机640–768px微调间距平板768–1024px2 列网格开始桌面1024–1440px完整多列布局大桌面1440–2560px容器最大宽度数据集中检测到 26 个断点——颗粒度最细的响应式站点之一。触控目标Touch Targets按钮尺寸满足触控交互导航链接间距舒适卡片表面本身即触控目标。折叠策略Collapsing Strategy导航完整导航折叠为汉堡菜单功能网格多列 → 2 列 → 单列Hero 文本72px → 48px → 32px 渐进缩放紫色区块保持全宽内容堆叠卡片网格3 → 2 → 1 列。图片行为Image Behavior摄影在 22px 圆角容器内等比缩放产品截图保持宽高比紫色区块背景按比例缩放。10. Agent 提示词指南把规范翻译成可执行的指令快速颜色参考Quick Color Reference主文本「Cohere Black (#000000)」页面背景「Pure White (#ffffff)」次级文本「Near Black (#212121)」悬停强调「Interaction Blue (#1863dc)」弱化文本「Muted Slate (#93939f)」卡片边框「Lightest Gray (#f2f2f2)」区块边框「Border Cool (#d9d9dd)」组件提示词示例可直接复制使用「在 Pure White (#ffffff) 上创建 hero 区块CohereText 72px 字重 400行高 1.0字距 -1.44px。Cohere Black 文本。副标题用 Unica77 18px 字重 400行高 1.4。」「设计一张功能卡片22px 圆角白底上 1px solid Lightest Gray (#f2f2f2) 边框。标题用 Unica77 32px字距 -0.32px。正文用 Unica77 16pxMuted Slate (#93939f)。」「构建幽灵按钮透明背景Unica77 16px Cohere Black 文本。悬停时文本转为 Interaction Blue (#1863dc)不透明度 0.8。聚焦2px 实心 Interaction Blue 轮廓。」「创建一个深紫全宽区块白色文本。标题用 CohereText 60px。产品截图以 22px 圆角悬浮其中。」「用 CohereMono 14px 设计区块标签大写字距 0.28px。Muted Slate (#93939f) 文本。」迭代指南Iteration Guide一次只聚焦一个组件主卡片始终用 22px 圆角——「Cohere 卡片圆润感」指定字体——标题 CohereText正文 Unica77标签 CohereMono交互元素只在悬停时用 Interaction Blue#1863dc保持白色表面 冷灰边框——无暖色调紫色只用于全宽区块绝不用作卡片背景。11. 工程质量从文档到可验证的令牌契约这套设计系统之所以能稳定驱动 Agent 生成一致的界面靠的是 OpenDesign 的契约化质量体系令牌单一事实来源tokens.css是唯一真相tailwind-v4.css 由它派生import ./tokens.css后通过theme将每个令牌映射为 Tailwind v4 的--color-*、--text-*、--radius-*、--shadow-*命名空间文件头明确标注「Derived from tokens.css. Keep tokens.css as the source of truth.」派生文件对齐门禁design-tokens.json的契约得分 100 分、56 个令牌全部有源码背书sourceBackedTokens: 56说明components.html夹具、令牌契约与 CSS 三者严格一致components.manifest.json的undeclaredReferenced: []也证明夹具中不存在未声明的令牌引用craft 绑定manifest.json 的craft字段建议该包与color、accessibility-baseline两条 craft 规范见 craft/color.md、craft/accessibility-baseline.md配合使用——冷调黑白 强焦点指示的视觉语言天然适合可访问性基线审查包质量守卫按照 design-systems/README.md 的约定迁移包至少需要 7 个实质性 H2 章节且DESIGN.md的决策必须与tokens.css同步完整编写规范见 docs/design-systems.md。对使用这套系统的 Agent 而言最关键的纪律是先在style中粘贴tokens.css的:root令牌块再基于语义令牌名而非裸色值书写组件 CSS。这样既能保证 22px 签名圆角、Interaction Blue 交互色、冷灰边框等品牌约束不漂移又能让同一套令牌在不同品牌间可靠切换——这正是 OpenDesign 设计系统目录「一次导入、随处可验证」的设计初衷。【免费下载链接】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），仅供参考