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本文以仓库内 design-systems/cohere/DESIGN-nl.md以及其英文原版 design-systems/cohere/DESIGN.md为核心骨架结合该包内的 tokens.css、components.html、components.manifest.json 与 design-tokens.json 等源码级证据系统拆解这一企业级 AI 平台设计语言的完整规范。读完本文你将掌握Cohere 风格的色彩角色与排版层级如何编码为 CSS 设计令牌、22px 签名圆角与无阴影纵深体系如何落地、Ghost 按钮与紫色整幅色带的使用边界以及如何以 Agent 提示词的方式逐组件复现这套界面。1. 系统定位为AI 即严肃基础设施而生的企业命令台Cohere 设计系统把 AI 产品从消费级玩具的观感中抽离出来塑造为面向 CTO 与企业架构师的enterprise command deck企业命令台自信、整洁、专业但不冰冷。它的视觉体验建立在一片亮白画布bright white canvas之上内容被组织进大圆角卡片中——22px 的圆角半径构成一种有机、云朵般的容器语言。这份文档属于 OpenDesign 仓库design-systems/cohere/目录下的AI LLM品类目录内除多语言规范外还配套了一套完整的 Design System 2.0 工程化产物文件作用DESIGN.md / DESIGN-*.md视觉意图、约束与反模式的权威规范含多语言版本tokens.css结构化的 CSS 设计令牌绑定是组件样式的唯一事实源components.html参考组件 fixture包含 48 个选择器、25 个类components.manifest.json紧凑的组件清单与 token 引用关系design-tokens.jsonToken 契约审计产物56 个令牌、评分 100preview/colors / spacing / typography 三个可视化验收页面system/kit.html / kit.dark.html / tokens.default.json 系统预览按照 USAGE.md 定义的阅读顺序先读 USAGE 理解包契约再读 DESIGN 掌握视觉意图随后把tokens.css粘贴进第一个 artifact 的style块最后用 manifest 和 preview 做组件核对与视觉检查——这也是本文的展开顺序。系统的八大关键特征亮白画布 冷灰容器边框22px 签名圆角——独特的 Cohere 卡片 圆润度双自定义字体CohereText展示衬线 Unica77正文无衬线企业级色彩克制黑、白、冷灰仅保留少量紫蓝色点缀深紫/紫罗兰色的 hero 区段提供戏剧性对比Ghost/透明按钮hover 时转蓝展示多样化真实场景的企业摄影CohereMono 用于代码与技术上标标签大写转换2. 色彩系统极致的色谱克制与角色化编码Cohere 的用色原则是颜色出现时携带最大视觉权重。界面几乎全黑白色冷灰边框#d9d9dd、#e5e7eb贯穿始终紫色只在摄影 hero 色带、渐变区和交互蓝#1863dc的 hover/focus 中出现。2.1 色彩角色速查表角色值用途Cohere Black#000000主标题文本、最大强调元素Near Black#212121正文标准链接色比纯黑更柔和Deep Dark#17171c蓝调近黑用于导航与深色区段文本Interaction Blue#1863dc唯一色度动作色按钮 hover、焦点态、激活链接Ring Blue#4c6ee6 50%Tailwind ring 色键盘焦点指示Focus Purple#9b60aa输入框焦点边框色一种低饱和紫罗兰Pure White#ffffff页面背景与卡片表面Snow#fafafa微抬升表面与浅色区段背景Lightest Gray#f2f2f2卡片边框、最柔容器线Muted Slate#93939f弱化页脚链接与三级文本带冷调蓝紫Border Cool#d9d9dd标准区段与列表项边框Border Light#e5e7eb更浅边框变体即 Tailwind gray-2002.2 令牌级实现证据在 tokens.css 中上述角色被编码为结构化的 CSS 自定义属性:root块tokens.css--bg: #ffffff; /* 纯白画布 */ --surface: #fafafa; /* Snow — 抬升表面与区段背景 */ --surface-warm: var(--surface); /* 无暖色层 — 调色板严格冷色调 */ --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 派生态使用现代 CSScolor-mix(in oklab, ...)生成--accent-hover混入 8% 黑与--accent-active混入 16% 黑无需手写深蓝变体--surface-warm: var(--surface)是一条占位声明系统刻意声明不存在暖色层级从机制上阻止暖色入侵语义色--success: #16a34a、--warn: #eab308、--danger: #ef4444只服务于状态表达不作装饰用。design-tokens.json 的审计摘要印证了这一点共 56 个令牌其中 A1-identity 层 8 个、B-slot 层 4 个、A2 层 26 个、A1-structure 层 18 个sourceBackedTokens为 56/56评分 100、等级 excellent。每个令牌都通过sources字段反链到tokens.css的声明行——这正是 USAGE.md 要求的保留 schema 令牌名不变以保证跨品牌切换的可靠性。2.3 渐变系统紫罗兰 hero 色带深紫渐变区段与白画布形成戏剧性对比作为整幅色带承载产品截图与核心信息暗色页脚渐变页面经由深紫/炭灰过渡到黑色页脚形成黄昏dusk效果。3. 排版系统衬线宣言 × 无衬线功能的双字体人格Cohere 用双字体系统桥接两种世界CohereText自定义展示衬线、紧字距给标题以技术宣言般的权威感Unica77 Cohere Web瑞士几何无衬线处理全部正文与 UI 文本。这种 serif/sans 配对形成了自信权威 × 工程清晰的人格与 enterprise AI 平台的定位高度吻合。3.1 字体族与回退链用途首选字体回退链DisplayCohereTextSpace Grotesk, Inter, ui-sans-serif, system-uiBody / UIUnica77 Cohere WebInter, Arial, ui-sans-serif, system-uiCodeCohereMonoArial, ui-sans-serif, system-uitokens.css 中为JetBrains Mono, ui-monospace, monospaceIconsCohereIconDefault自定义图标字体3.2 完整层级表继承自 DESIGN 规范角色字体字号字重行高字距说明Display / HeroCohereText72px (4.5rem)4001.00 (tight)-1.44px最大冲击力、衬线权威Display SecondaryCohereText60px (3.75rem)4001.00 (tight)-1.2px大区段标题Section HeadingUnica7748px (3rem)4001.20 (tight)-0.48px功能区段标题Sub-headingUnica7732px (2rem)4001.20 (tight)-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 (relaxed)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微型大写代码标签3.3 四条排版原则衬线用于宣言、无衬线用于功能CohereText 承载品牌声音于 display 尺度衬线字脚serif terminals让标题带有已发表研究般的权威Unica77 以瑞士几何中性处理一切功能文本。大尺度负字距CohereText 在 60–72px 下使用 -1.2px 至 -1.44px 的 letter-spacing形成密集、有冲击力的文本块。tokens.css 将其编码为--tracking-display: -0.02em约等于 72px 时的 -1.44px。单一正文字重几乎全部 Unica77 都是 400500 只用于小按钮强调。系统依赖字号与字距而非字重对比来建立层级。大写代码标签CohereMono 以大写 正字距0.16–0.28px用于技术标签与区段标记。在 components.html 中可以看到这套层级的落地样例h1使用var(--font-display)var(--text-4xl)72pxvar(--leading-tight)var(--tracking-display)而h2起立即切回var(--font-body)Unica77.eyebrow类则实现了CohereMono 大写标签——font-family: var(--font-mono)、text-transform: uppercase、letter-spacing: 0.028em。4. 组件规范从 Ghost 按钮到 22px 卡片系统4.1 按钮三态体系Ghost / 透明按钮系统主按钮样式背景透明rgba(255, 255, 255, 0)文本Cohere Black#000000无可见边框Hover文本转为 Interaction Blue#1863dc透明度 0.8Focus2px 实线 Interaction Blue 轮廓设计意图不可见直到被交互——默认状态即无装饰Dark Solid暗色实心按钮背景深色/黑色文本纯白用于浅色表面上的 CTA可呈胶囊形或标准圆角Outlined描边按钮基于边框的容器用于次级动作在 components.html 中对应实现为.btn-primary使用background: var(--fg)黑色实心hover 转var(--fg-2).btn-secondary使用background: transparentcolor: var(--fg)hover 时color: var(--accent); opacity: 0.8——与 DESIGN 规范的 Ghost 按钮完全一致.btn:focus-visible用box-shadow: var(--focus-ring)即0 0 0 2px var(--accent)替代 outline同时保留无障碍焦点可见性。所有按钮共享border-radius: var(--radius-pill)胶囊形态与 150ms 的标准缓动过渡。4.2 卡片与容器背景Pure White#ffffff边框细实线 Lightest Gray1px solid #f2f2f2用于低调卡片Border Cool#d9d9dd用于强调卡片圆角22px——主卡片、图片与对话框容器的签名半径小元素另有 4px、8px、16px、20px阴影极简——Cohere 依靠背景色与边框而非阴影特殊0px 0px 22px 22px仅底部圆角用于区段容器对话框8px 圆角components.html 中.card的实现忠实复刻了这套规范background: var(--bg)、border: 1px solid var(--border-soft)、border-radius: var(--radius-md)22px、内边距var(--space-6)24px。组件清单 components.manifest.json 统计 fixture 共 48 个选择器、25 个类、25 个元素令牌审计显示--radius-md、--radius-pill、--radius-sm均被组件实际引用而--radius-lg未被引用与大容器同样使用 22px的规范自洽。4.3 输入框与表单文本深色输入框白字、浅色输入框黑字焦点边框Focus Purple#9b60aa1px solid焦点阴影红色环rgb(179, 0, 0) 0px 0px 0px 2px——推测用于错误状态提示焦点轮廓Interaction Blue 2px 实线落地实现见 components.html.field input:focus-visible将border-color切换为#9b60aa注释明确标注 Focus Purple per DESIGN.md并叠加var(--focus-ring).field label使用 14px/500 字重.field-help使用 12px Muted Slate——与表单组件的 token 引用--focus-ring、--muted、--text-sm、--text-xs一一对应。4.4 导航、图片与区分性组件导航白色或深色背景上的干净横向导航Logo 为 Cohere 字标自定义 SVG链接 16px Unica77 深色文本CTA 为暗色实心按钮移动端收起为汉堡菜单。图片处理多样化企业摄影紫色调 hero 摄影深色表面上的产品 UI 截图22px 圆角与卡片系统一致整幅紫色渐变区段。Enterprise Trust Bar横向条带展示企业 Logo单色处理传达企业级采纳度。Purple Hero Bands整幅深紫区段承载产品展示在白页流中形成戏剧性视觉断裂产品截图悬浮于紫色环境内。Uppercase Code TagsCohereMono 大写 字距的区段标记与分类标签构建技术化、结构化的信息层级。5. 布局与纵深8px 间距体系与无阴影高程哲学5.1 间距系统基础单位8px完整刻度2、6、8、10、12、16、20、22、24、28、32、36、40、56、60px按钮内边距按变体变化卡片内边距约 24–32px区段垂直间距慷慨区段间 56–60pxtokens.css 将刻度编码为--space-14px到--space-1248px并把区段节奏拆分为响应式三档--section-y-desktop: 60px、--section-y-tablet: 48px、--section-y-phone: 32px。components.html中section { padding-block: var(--section-y-desktop) }配合section section { border-top: 1px solid var(--border-soft) }实现了区段间留白 冷灰分隔线的企业节奏1023px 与 639px 两个断点分别切换到 tablet/phone 档位。5.2 栅格与容器最大容器宽度文档记载可达 2560px超宽响应式缩放tokens.css 工程化为--container-max: 1440px适配企业大屏的实用值gutter 分桌面 32px / 平板 24px / 手机 16px 三档Hero居中 戏剧性排版功能区段多列卡片栅格企业区段整幅紫色色带响应式检测出26 个断点——数据集中最细粒度的响应式系统之一5.3 圆角尺度阶梯阶梯值用途Sharp4px导航元素、小标签、分页Comfortable8px对话框、次级容器、小卡片Generous16px强调容器、中卡片Large20px大功能卡Signature22px主卡片、hero 图片、主容器——THE Cohere 圆角Pill9999px按钮、标签、状态指示器5.4 纵深与高程无阴影哲学层级处理用途Flat (Level 0)无阴影、无边框页面背景、文本块Bordered (Level 1)1px solid #f2f2f2或#d9d9dd标准卡片、列表分隔Purple Band (Level 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 阴影——即使是抬升也克制到几乎不可察觉。6. Do 与 Dont这份规范的边界红线Do在所有主卡片与容器上使用 22px 圆角——它是视觉签名使用 CohereText 做 display 标题72px、60px配负字距全部正文与 UI 文本使用 Unica77字重 400保持黑白色板 冷灰边框Interaction Blue#1863dc只用于 hover/focus 交互态用深紫区段制造戏剧性视觉断裂与产品展示CohereMono 用于区段标签时施加 大写 字距维持适合企业级的多主题摄影Dont主卡片不要用 22px 以外的圆角——签名圆角很重要不要引入暖色——调色板严格冷色调不要用重阴影——深度来自颜色对比与边框正文不要用 700 粗体——400–500 是范围不要跳过 serif/sans 层级——CohereText 管标题Unica77 管正文不要把紫色用作卡片表面色——紫色专属于整幅区段不要把区段间距降到 40px 以下——企业布局需要呼吸空间按钮默认不要带装饰——ghost/透明是基础态7. 响应式行为26 断点的细粒度折叠策略7.1 断点表名称宽度关键变化Small Mobile425px紧凑布局、最小间距Mobile425–640px单列、堆叠卡片Large Mobile640–768px微调间距Tablet768–1024px2 列栅格开始Desktop1024–1440px完整多列布局Large Desktop1440–2560px最大容器宽度7.2 折叠策略导航完整导航收起为汉堡菜单功能区栅格多列 → 2 列 → 单列Hero 文本72px → 48px → 32px 渐进缩放紫色区段保持整幅内容堆叠卡片栅格3 → 2 → 1 列落地实现可对照 components.html.features-grid在桌面为repeat(3, 1fr)1023px 以下切为 2 列639px 以下切为单列.hero-grid在 1023px 以下从1.4fr 1fr折为单列。触摸目标方面按钮、导航链接与卡片表面均被设计为足够的触控面积。8. Agent 提示指南把规范翻译成可执行的生成指令这份设计系统文档的独特之处在于最后一章面向 Agent 的提示指南——它把整套视觉规范压缩成可直接投喂给生成式编码 Agent 的指令语言。8.1 快速色彩速查主文本Cohere Black#000000页面背景Pure White#ffffff次级文本Near Black#212121Hover 强调Interaction Blue#1863dc弱化文本Muted Slate#93939f卡片边框Lightest Gray#f2f2f2区段边框Border Cool#d9d9dd8.2 示例组件提示词可直接复用Create a hero section on Pure White (#ffffff) with CohereText at 72px weight 400, line-height 1.0, letter-spacing -1.44px. Cohere Black text. Subtitle in Unica77 at 18px weight 400, line-height 1.4.Design a feature card with 22px border-radius, 1px solid Lightest Gray (#f2f2f2) border on white. Title in Unica77 at 32px, letter-spacing -0.32px. Body in Unica77 at 16px, Muted Slate (#93939f).Build a ghost button: transparent background, Cohere Black text in Unica77 at 16px. On hover, text shifts to Interaction Blue (#1863dc) with 0.8 opacity. Focus: 2px solid Interaction Blue outline.Create a deep purple full-width section with white text. CohereText at 60px for the heading. Product screenshot floats within using 22px border-radius.Design a section label using CohereMono at 14px, uppercase, letter-spacing 0.28px. Muted Slate (#93939f) text.8.3 迭代指南六步法则一次只聚焦一个组件主卡片永远使用 22px 圆角——the Cohere card roundness明确指定字体——CohereText 管标题、Unica77 管正文、CohereMono 管标签交互元素只在 hover 时使用 Interaction Blue#1863dc表面保持白色 冷灰边框——不要暖色调紫色用于整幅区段绝不用于卡片背景9. 在 OpenDesign 中消费这套系统的实操路径作为 OpenDesign 的 Design System 2.0 包cohere 目录提供了从规范阅读到代码落地的完整闭环读契约先读 USAGE.md理解包的结构与边界该包基于仓库内置的 curated bundled fixture并非对上游官网的实时抓取引用时应避免声称原始上游证据。看意图读 DESIGN.md或荷兰语版 DESIGN-nl.md掌握视觉约束与反模式。注入令牌将 tokens.css 整体粘贴进第一个 artifact 的style块之后所有组件 CSS 一律引用令牌变量避免在:root令牌块之外写裸 hex 值也不要脱离 tokens.css 独立重定义 Tailwind 或设计令牌值。复用组件从 components.manifest.json 的组件分组buttons / inputs / cards / badges / links / keyboard / icons / typography / layout中优先复用既有组件配方当精确选择器或状态如:focus-visible、:hover重要时打开 components.html。视觉验收需要快速核对颜色、间距与排版时直接打开 preview/colors.html、preview/spacing.html、preview/typography.html 三张预览页--surface-warm、--radius-lg等声明但未引用的令牌在 manifest 的unusedDeclared中一目了然便于审计。跨品牌切换由于所有组件都通过 schema 化的令牌名--accent、--radius-md、--text-4xl等取色取型切换到其他品牌时只需替换令牌块这正是 design-tokens.json 与source/token-contract.report.json见 source/evidence.md所保障的契约稳定性。这套白画布 冷灰边框 22px 签名圆角 双字体 幽灵按钮 紫色整幅色带的组合构成了一幅可复现、可审计、可跨品牌移植的企业级 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考