OpenDesign 中的 Cohere 风格设计系统企业级 AI 平台的设计令牌、排版体系与 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本指南以 design-systems/cohere/DESIGN-ru.md 为骨架结合 tokens.css、tailwind-v4.css、manifest.json 与 token-contract.report.json 等仓库证据展开。OpenDesign 将 Cohere 的企业级 AI 平台视觉语言封装为一套可移植的「设计系统包」Design System Package面向 AI 与 LLM 类产品场景明亮白色画布、22px 标志性圆角、CohereText 衬线标题与 Unica77 无衬线正文的双字体体系以及极度克制的冷色调色彩策略。读完本文你将掌握如何在 Agent 生成的原生 HTML 产物中直接使用该包的语义令牌CSS 变量、复现其排版层级与组件样式并通过规范化的提示词让编码代理精确产出「Cohere 味道」的页面——同时理解这些规则在仓库中如何被机器校验pnpm guard。一、视觉主题与设计基调Cohere 的界面是一块打磨过的「企业级指挥面板」enterprise command deck自信、干净、把 AI 呈现为严肃基础设施而非消费玩具。内容被组织在慷慨的圆角卡片22px 半径中形成有机、云状的容器语言。它面向 CTO 与企业架构师——专业而不冰冷精致而不咄咄逼人。设计语言通过双字体系统连接两个世界CohereText——自定义显示衬线体display serif紧凑字距让标题具备技术宣言式的权威感Unica77 Cohere Web——承担全部正文与 UI 文本几何瑞士式精确。衬线与无衬线的组合塑造出「自信权威 × 工程清晰」的品牌人格恰如其分地反映企业级 AI 平台。色彩使用极度克制界面几乎完全是黑白 冷灰边框#d9d9dd、#e5e7eb。紫罗兰色只出现在摄影 hero 带、渐变区块与交互蓝#1863dc中——后者仅用于 hover 与 focus 状态。这种色度节制意味着当颜色真正出现时产品截图、企业摄影、深紫色区块它携带最大视觉权重。关键特征清单原文档核心明亮白色画布 冷灰分隔边框22px 标志性圆角——独特的「Cohere 卡片」圆润感双自定义字体CohereText显示衬线 Unica77正文无衬线企业级色度节制黑、白、冷灰、最小化紫蓝点缀深紫罗兰 hero 区块提供戏剧性对比Ghost/透明按钮在 hover 时切换为蓝色展示多样化真实场景的企业摄影CohereMono 用于代码与技术标签大写转换二、色彩体系与角色分工主色Primary名称色值角色Cohere Black#000000标题主色、最高强调元素Near Black#212121正文链接标准色——比纯黑更柔和Deep Dark#17171c带蓝调的近黑用于导航与深色区块文本次色与强调Secondary Accent名称色值角色Interaction Blue#1863dc主要交互强调——按钮 hover、焦点态、激活链接。唯一的彩色动作色Ring Blue#4c6ee650%Tailwind ring键盘焦点指示器Focus Purple#9b60aa输入框焦点边框——柔和紫表面与背景Surface Background名称色值角色Pure White#ffffff页面主背景、卡片表面Snow#fafafa微妙抬升的表面、浅色区块背景Lightest Gray#f2f2f2卡片边框、最柔和的分隔线中性色与文本Neutrals Text名称色值角色Muted Slate#93939f弱化页脚链接、三级文本——冷调灰带轻微蓝紫倾向Border Cool#d9d9dd标准区块与列表项边框——冷灰带细微紫色调Border Light#e5e7eb更浅的边框变体——Tailwind 标准 gray-200渐变系统紫罗兰 hero 带深紫渐变区块在白色画布上制造戏剧性对比以全宽横条承载产品截图与核心信息深色页脚渐变页面经由深紫/炭黑过渡到黑色页脚形成「黄昏」dusk效果。仓库中的令牌化实现上述所有颜色都被绑定为 tokens.css 中的语义 CSS 变量:root块这是该包机器可校验的唯一事实来源--bg: #ffffff; /* 页面背景 */ --surface: #fafafa; /* Snow —— 抬升表面 */ --fg: #000000; /* Cohere Black */ --fg-2: #212121; /* Near Black */ --muted: #93939f; /* Muted Slate */ --border: #d9d9dd; /* Border Cool */ --border-soft: #f2f2f2; /* Lightest Gray */ --accent: #1863dc; /* Interaction Blue —— 仅 hover/focus 出现 */ --accent-hover: color-mix(in oklab, var(--accent), black 8%); --accent-active: color-mix(in oklab, var(--accent), black 16%); --success: #16a34a; --warn: #eab308; --danger: #ef4444;注意 tokens.css 使用color-mix(in oklab, ...)派生 hover/active 状态色而非手工写死深蓝——这样重定义--accent后状态色自动跟随。语义色success/warn/danger被明确「保留给状态而非装饰」。--surface-warm: var(--surface)与--meta: var(--muted)两个 B-slot 别名表明「该品牌没有暖色层」——调色板严格冷调。三、排版规则字体家族用途字体回退栈显示DisplayCohereTextSpace Grotesk, Inter, ui-sans-serif, system-ui正文 / UIUnica77 Cohere WebInter, Arial, ui-sans-serif, system-ui代码CohereMonoArial, ui-sans-serif, system-ui图标CohereIconDefault自定义图标字体在 tokens.css 中字体栈被标准化为--font-display、--font-body、--font-mono三个令牌其中代码字体回退还补充了JetBrains Mono, ui-monospace, monospace。完整排版层级原文档核心表格角色字体字号字重行高字距说明显示 / HeroCohereText72px (4.5rem)4001.00紧凑-1.44px最高强调衬线权威次级显示CohereText60px (3.75rem)4001.00紧凑-1.2px大号区块标题区块标题Unica7748px (3rem)4001.20紧凑-0.48px功能分区标题副标题Unica7732px (2rem)4001.20紧凑-0.32px卡片标题、功能名功能标题Unica7724px (1.5rem)4001.30normal小型区块标题大号正文Unica7718px (1.13rem)4001.40normal引导段落正文 / 按钮Unica7716px (1rem)4001.50normal标准文本、按钮文本中号按钮Unica7714px (0.88rem)5001.71宽松normal小按钮、强调标签说明文字Unica7714px (0.88rem)4001.40normal元数据、描述大写标签Unica77 / CohereMono14px (0.88rem)4001.400.28px区块标签大写小号Unica7712px (0.75rem)4001.40normal最小文本、页脚链接微代码CohereMono8px (0.5rem)4001.400.16px极小的代码标签大写排版原则衬线做宣言无衬线做工具CohereText 在显示层承载品牌声音——衬线赋予标题「发布级研究」的权威Unica77 以瑞士几何中立性完成所有功能性任务。大字号负字距CohereText 在 60–72px 使用 -1.2px 至 -1.44px 的字距形成密集、有力的文本块。tokens.css 将其抽象为--tracking-display: -0.02em≈ 72px 下的 -1.44px。单一字重体系Unica77 几乎所有使用都是字重 400仅小按钮强调用 500。系统依靠字号与留白而非字重对比来建立层级。代码标签大写CohereMono 用大写 正字距0.16–0.28px渲染技术标签与区块标记。字号、行高、字距在 tokens.css 中对应为--text-xs12px到--text-4xl72px的完整刻度以及--leading-tight: 1.0、--leading-body: 1.5、--tracking-display三个排版变量。四、组件样式规范按钮Ghost / 透明按钮默认交互形态背景透明rgba(255, 255, 255, 0)文本Cohere Black#000000无可见边框hover文本过渡为 Interaction Blue#1863dc透明度 0.8focus2px 实线描边 Interaction Blue默认状态下「不可见」交互时才显现深色实心按钮深色/黑色背景 Pure White 文本用于浅色表面上的 CTA胶囊形或标准圆角描边按钮通过边框形成约束用于次级操作卡片与容器背景Pure White#ffffff边框细腻卡片用1px solid #f2f2f2Lightest Gray强调卡片用 Border Cool#d9d9dd圆角22px是 Cohere 主卡片、图片、对话框容器的签名圆角小元素另用 4px、8px、16px、20px阴影极小——Cohere 依靠背景色与边框而非阴影特殊0px 0px 22px 22px仅底部圆角用于区块容器对话框模态窗口用 8px 圆角令牌化后 tokens.css 给出--radius-sm: 8px、--radius-md: 22px主签名、--radius-lg: 22px、--radius-pill: 9999px。注意 md 与 lg 刻意同值——大容器沿用同一个 22px 签名。输入框与表单文本深色输入框内白字浅色输入框内黑字焦点边框Focus Purple#9b60aa1px solid焦点阴影红色环rgb(179, 0, 0) 0px 0px 0px 2px——推测用于错误指示焦点描边Interaction Blue 实线 2px导航白色或深色背景上的干净横向导航LogoCohere 字样自定义 SVG链接16px Unica77 深色文本CTA深色实心按钮移动端折叠为汉堡菜单图像处理多样化角色与场景的企业摄影戏剧性区块使用紫色调摄影深色表面上的产品界面截图图片沿用 22px 圆角与卡片系统一致全宽紫色渐变区块特殊组件22px 卡片系统22px 圆角是 Cohere 的视觉签名所有主卡片、图片与容器统一使用形成云状、有机的柔和感区别于常见的 8–12px。企业信任条企业 Logo 排成水平条带展示企业级采用Logo 采用干净的单色处理。紫色 hero 带全宽深紫区块用于产品演示在白色页面流中制造戏剧性视觉停顿产品截图「漂浮」在紫色环境中。大写代码标签CohereMono 大写 字距用作区块标记与分类标签构建技术化、结构化的信息层级。五、布局原则间距系统基本单位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的响应式区块节奏。网格与容器容器最大宽度原文档记录**可达 2560px极宽**并自适应缩放令牌化的 tokens.css 落地为--container-max: 1440px面向企业大屏的宽容器配套--container-gutter-desktop: 32px、--container-gutter-tablet: 24px、--container-gutter-phone: 16px响应式水槽Hero居中 戏剧性排版功能区块多列卡片网格企业区块全宽紫色条带数据集中记录到26 个断点——异常细致的响应式系统留白哲学企业清晰度每个区块只表达一个明确的主张区块间留足呼吸空间摄影做主角大尺寸摄影区块提供视觉趣味无需装饰性设计元素卡片分组相关内容聚合进 22px 圆角卡片形成自然的信息簇。圆角刻度总表档位数值用途锐利4px导航元素、小标签、分页舒适8px对话框、次级容器、小卡片慷慨16px强调容器、中等卡片大号20px大功能卡片签名22px主卡片、hero 图、主容器——Cohere 签名圆角胶囊9999px按钮、标签、状态指示器六、深度与抬升层级层级处理应用扁平0无阴影、无边框页面背景、文本块带边框11px solid #f2f2f2或#d9d9dd标准卡片、列表分隔紫色条带2全宽深紫背景Hero 区块、功能演示阴影哲学Cohere 几乎不用阴影。深度通过背景色对比紫色条带上的白色卡片、白色表面之于 snow、边框约束冷灰边框与明暗区块的戏剧性交替来传达。当元素需要高度时靠「在深色上保持白色」实现而非投影。令牌层面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)最小 hover 阴影以及企业级清晰度的--focus-ring: 0 0 0 2px var(--accent)。七、Do / Dont 速查Do要做所有主卡片与容器使用 22px 圆角——这是视觉签名CohereText 用于显示标题72px、60px使用负字距Unica77 用于全部正文与 UI 文本字重 400保持黑白 冷灰边框的调色板Interaction Blue#1863dc仅用于 hover/focus 交互态深紫区块用于戏剧性视觉停顿与产品演示CohereMono 大写 字距处理区块标签保持多样角色与场景的企业摄影Dont不要做主卡片不要用 22px 以外的圆角——签名圆角至关重要不引入暖色——调色板严格冷调不用重阴影——深度靠颜色对比与边框正文不用 700 粗体——字重区间 400–500不打破衬线/无衬线层级——CohereText 管标题Unica77 管正文不用紫色做卡片表面色——紫色保留给全宽区块区块间距不压缩到 40px 以下——企业布局需要呼吸空间默认按钮不加装饰元素——ghost/透明是基础状态八、响应式行为断点表原文档核心名称宽度关键变化小型移动425px紧凑布局最小间距移动425–640px单列卡片纵向堆叠大型移动640–768px间距微调平板768–1024px开始双列网格桌面1024–1440px完整多列布局大型桌面1440–2560px容器最大宽度数据集中记录到 26 个断点——该品牌是数据集中响应式细节最充分的站点之一。触控目标按钮尺寸足以触控导航链接有舒适内边距卡片表面本身即触控目标折叠策略导航完整导航折叠为汉堡菜单功能网格多列 → 2 列 → 单列Hero 文本72px → 48px → 32px 渐进缩放紫色区块保持全宽内容折叠卡片网格3 → 2 → 1 列图像行为摄影图在 22px 圆角容器内等比缩放产品截图保持宽高比紫色区块等比缩放背景九、Agent 提示词指南颜色速查表直接可用于提示词主文本「Cohere Black (#000000)」页面背景「Pure White (#ffffff)」次级文本「Near Black (#212121)」hover 强调「Interaction Blue (#1863dc)」弱化文本「Muted Slate (#93939f)」卡片边框「Lightest Gray (#f2f2f2)」区块边框「Border Cool (#d9d9dd)」组件级提示词示例原文档完整保留「创建 hero 区块Pure White (#ffffff) 背景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)。」「创建 ghost 按钮透明背景Cohere Black 文本 Unica77 16pxhover 时文本过渡为 Interaction Blue (#1863dc) 透明度 0.8focus 时 2px Interaction Blue 实线描边。」「创建全宽深紫区块白字标题 CohereText 60px产品截图以 22px 圆角漂浮其中。」「设计区块标签CohereMono 14px大写字距 0.28px文本 Muted Slate (#93939f)。」迭代指南一次只聚焦一个组件主卡片永远用 22px 圆角——「Cohere 卡片圆润感」指明字体——标题 CohereText正文 Unica77标签 CohereMono交互元素仅在 hover 时使用 Interaction Blue (#1863dc)保持白色表面 冷灰边框——零暖色紫色只用于全宽区块永远不用于卡片背景十、仓库级落地从 DESIGN 文档到可校验的令牌包DESIGN-ru.md不仅是给人看的规范更是 OpenDesign「设计系统包」契约的一部分。该品牌包在仓库中的完整结构为design-systems/cohere/ ├── manifest.json # 包元数据类别 AI LLMbundled 来源 ├── DESIGN.md / DESIGN-ru.md # 规范正文多语言 ├── USAGE.md # Agent 使用顺序 ├── tokens.css # 语义令牌唯一事实来源 ├── design-tokens.json # 派生产物勿手改 ├── tailwind-v4.css # 派生 Tailwind v4 映射勿手改 ├── components.html # 组件夹具 ├── components.manifest.json # 组件/令牌索引派生缓存 ├── preview/ # colors / typography / spacing 静态预览页 └── source/ # evidence.md tokens.source.json token-contract.report.jsonmanifest.json机器可读的包入口manifest.json 声明schemaVersion: od-design-system-project/v1、id: cohere、category: AI LLM并指向DESIGN.md、tokens.css、design-tokens.json、tailwind-v4.css、components.html、USAGE.md、预览页与 source 证据文件。它同时声明importMode: normalized规范化导入与 craft 建议color、accessibility-baseline。运行时目录扫描/api/design-systems会消费这些元数据完成发现改动后刷新 Design System 界面即可无需重启守护进程。四层令牌契约A1 / A2 / B-slottoken-contract.report.json 展示了该品牌包 56 个令牌如何映射回 tokens.css 的声明行score 100 / grade excellent并按 design-systems/_schema/AGENTS.md 定义的契约分层层含义本包示例数量A1-identity品牌决定缺则 guard 失败--bg、--fg、--accent、--font-display等8 个A1-structure品牌决定的结构令牌字号刻度、--container-max、--section-y-*等18 个A2品牌声明 schema 兜底值--motion-base: 200ms、--radius-md: 22px、语义色等26 个B-slot品牌或别名var(--sibling)--surface-warm: var(--surface)、--meta: var(--muted)等4 个关键机制由于 Agent 产物是「把一个品牌的:root块粘贴进单个style」不存在全局样式表兜底因此A2 与 B-slot 令牌当前也必须由品牌显式声明——--surface-warm这类别名若缺失共享组件里的var(--surface-warm)引用会静默失效。Cohere 包用「别名到兄弟令牌」的方式满足契约没有暖色层就把--surface-warm指向--surface。这正是 tokens.css 中注释「no warm tier — palette is strictly cool-toned」的契约含义。USAGE.mdAgent 的标准使用顺序USAGE.md 规定了代理读取该包的标准顺序先读 USAGE.md 理解包契约读 DESIGN.md 理解视觉意图、约束与反模式在写组件 CSS 之前把tokens.css粘贴进首个产物的style块用components.manifest.json作为紧凑组件清单需要精确选择器或状态时打开components.html需要视觉检查时查看preview/页面。使用约束同样明确保持 schema 令牌名原样以保证跨品牌切换可靠用--accent表达主操作、链接与焦点态不要在复制出来的:root令牌块之外使用裸 hex 值不要独立于tokens.css重定义 Tailwind 或设计令牌值tailwind-v4.css 顶部明确写着「Derived from tokens.css. Keep tokens.css as the source of truth.」其中theme仅做--color-bg: var(--bg)式的映射转发source/目录只作为审计证据不声明上游原始来源。派生产物与质量守卫tailwind-v4.css从tokens.css派生通过theme把语义令牌映射为 Tailwind v4 的--color-*、--font-*、--text-*、--spacing-*、--radius-*、--shadow-*命名空间design-tokens.json从令牌契约报告派生必须与tokens.css一致components.manifest.json从components.htmltokens.css派生仓库守卫脚本如 scripts/check-design-system-manifests.ts、scripts/check-design-system-package-quality.ts与pnpm guard校验路径存在性、派生文件一致性、令牌契约与组件夹具完整的创作指南见 docs/design-systems.md。结语Cohere 设计系统包的实践价值在于视觉规范被压缩成可复制的 CSS 变量与可校验的契约而 DESIGN-ru.md 则为 Agent 提供了自然语言级的「设计意图说明书」。无论是手写页面还是让 Claude Code / Codex / Cursor 等代理生成产物遵循「22px 签名圆角、CohereText Unica77 双字体、冷调黑白灰、Interaction Blue 仅限交互态、ghost 按钮默认形态、紫色仅限全宽区块」这六条核心纪律即可稳定复现企业级 AI 平台的视觉人格。把tokens.css作为唯一事实来源、把 DESIGN 文档作为迭代依据是让 AI 产物从「像 Cohere」走向「就是 Cohere」的关键。【免费下载链接】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），仅供参考