OpenDesign Cohere 设计系统实战指南：从 22px 签名圆角到企业级 AI 平台的设计语言

OpenDesign Cohere 设计系统实战指南从 22px 签名圆角到企业级 AI 平台的设计语言【免费下载链接】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 仓库内置的 Cohere 设计系统包design-systems/cohere/DESIGN.md整理。该包是 OpenDesign 151 个可移植设计系统包之一用于在 Design System 界面或项目创建工作流中把 Cohere 风格的设计上下文组合进 Agent 提示词让编码 Agent 直接产出符合该品牌气质的前端原型。读完本文你将掌握Cohere 视觉语言的完整规范色彩、字体、组件、布局、响应式、如何借助包内 token 体系tokens.css、design-tokens.json落地实现以及如何直接复用文末的 Agent 提示词模板生成 Cohere 风格页面。1. 设计定位企业级 AI 平台的 Command Deck 气质Cohere 风格的核心定位是一个打磨精良的企业级指挥台enterprise command deck——自信、干净让 AI 看起来像严肃的基础设施而不是面向消费者的玩具。整个界面建立在明亮的白色画布上内容被组织进 22px 圆角的宽大卡片中形成一种有机、云朵般的包容性容器语言。这套视觉语言面向 CTO 与企业架构师专业但不冰冷精致但不令人望而生畏。包内 manifest.json 将 Cohere 归类为AI LLM品类importMode为normalized并建议绑定color色彩与accessibility-baseline可访问性基线两篇 craft 规范作为配套约束。其描述词是Enterprise AI platform. Vibrant gradients,>--success: #16a34a; /* 成功状态 */ --warn: #eab308; /* 警告状态 */ --danger: #ef4444; /* 危险状态 */强调色的交互派生由color-mix在 OKLab 色彩空间计算--accent: #1863dc; --accent-on: #ffffff; --accent-hover: color-mix(in oklab, var(--accent), black 8%); /* 悬停压暗 8% */ --accent-active: color-mix(in oklab, var(--accent), black 16%); /* 按下压暗 16% */这一设计意味着交互蓝永不作为环境色存在只出现在悬停/聚焦这类交互瞬间见 tokens.css 的注释约束 appears ONLY on hover/focus, never ambient。3. 字体规范衬线宣告、无衬线工具、等宽标签3.1 字体族Font Family用途字体栈含回退TokenDisplay 展示CohereText→Space Grotesk, Inter, ui-sans-serif, system-ui--font-displayBody / UI 正文Unica77 Cohere Web→Inter, Arial, ui-sans-serif, system-ui--font-bodyCode 代码CohereMono→JetBrains Mono, ui-monospace, monospace--font-monoIcons 图标CohereIconDefault自定义图标字体—注意tokens.css 的代码字体回退栈写作CohereMono, JetBrains Mono, ui-monospace, monospace比 DESIGN.md 中的Arial回退更贴近实际渲染场景。3.2 完整字号层级Hierarchy角色字体字号字重行高字距备注Display / HeroCohereText72px (4.5rem)4001.00 (tight)-1.44px最大冲击力衬线权威Display SecondaryCohereText60px (3.75rem)4001.00 (tight)-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 (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极小的等宽大写代码标签token 化的字号刻度见 tokens.css--text-xs(12px) /--text-sm(14px) /--text-base(16px) /--text-lg(18px) /--text-xl(24px) /--text-2xl(32px) /--text-3xl(60px) /--text-4xl(72px)展示字距统一定义为--tracking-display: -0.02em约等于 72px 下的 -1.44px标题行高--leading-tight: 1.0正文行高--leading-body: 1.5。3.3 排版原则衬线宣告、无衬线工具CohereText 在展示字号承载品牌声量其衬线字脚让标题拥有已发表研究般的权威感Unica77 以瑞士几何中性处理一切功能性内容大字号负字距CohereText 在 60–72px 使用 -1.2px 到 -1.44px 的字距形成致密、有冲击力的文本块单一正文字重Unica77 几乎全部使用字重 400500 仅用于小按钮强调——系统依赖字号与间距而非字重对比来建立层级大写等宽标签CohereMono 使用大写 正字距0.16–0.28px渲染技术标签与区块标记。4. 组件规范4.1 按钮ButtonsGhost / 透明按钮默认主按钮/* 摘自 components.html .btn-secondary */ .btn-secondary { background: transparent; /* rgba(255,255,255,0) */ color: var(--fg); /* Cohere Black #000000 */ } .btn-secondary:hover { color: var(--accent); opacity: 0.8; }背景透明、文本 Cohere Black、无可见边框悬停文本变为 Interaction Blue#1863dc透明度 0.8聚焦2px 实线 Interaction Blue 轮廓--focus-ring: 0 0 0 2px var(--accent)设计理念默认不可见直到用户与之交互——invisible until interacted withDark Solid深色实心按钮.btn-primary { background: var(--fg); /* 黑色 */ color: #ffffff; /* Pure White */ } .btn-primary:hover { background: var(--fg-2); }用于浅色表面上的 CTA胶囊形--radius-pill: 9999px或标准圆角按钮基础样式统一为padding: 10px 18px、行高 1、无边框悬停/聚焦过渡使用--motion-fast(150ms) --ease-standard(cubic-bezier(0.2, 0, 0, 1))见 components.htmlOutlined描边按钮基于边框的包含形态用于次级动作。4.2 卡片与容器Cards Containers/* 摘自 components.html .card —— THE 22px Cohere signature */ .card { background: var(--bg); border: 1px solid var(--border-soft); /* #f2f2f2 */ border-radius: var(--radius-md); /* 22px */ padding: var(--space-6); /* 24px */ }背景 Pure White细实线边框浅色卡片用 Lightest Gray1px solid #f2f2f2强调卡片用 Border Cool#d9d9dd圆角 22px——主卡片、图片、对话框容器的 Cohere 签名圆角小元素另有 4px、8px、16px、20px阴影极少——依赖背景色与边框而非阴影特殊形态0px 0px 22px 22px仅底部圆角用于区块容器对话框/模态框使用 8px 圆角token--radius-sm4.3 输入与表单Inputs Forms/* 摘自 components.html .field input */ .field input { padding: 12px 14px; border-radius: var(--radius-sm); /* 8px */ border: 1px solid var(--border); /* #d9d9dd */ background: var(--bg); font-size: var(--text-sm); } .field input:focus-visible { border-color: #9b60aa; /* Focus Purple */ box-shadow: var(--focus-ring); /* Interaction Blue 2px ring */ }文本深色输入白字、浅色输入黑字聚焦边框Focus Purple#9b60aa1px solid聚焦阴影红色 ringrgb(179, 0, 0) 0px 0px 0px 2px文档标注likely for error state indication推测用于错误状态提示聚焦轮廓Interaction Blue 实线 2px表单容器max-width: 420px标签 14px 字重 500占位符使用--muted帮助文本使用--text-xs见 components.html4.4 导航Navigation白色或深色背景上的干净横向导航LogoCohere 字标自定义 SVG链接16px Unica77 深色文本CTA深色实心按钮移动端汉堡折叠4.5 图片处理Image Treatment多元主体与场景的企业摄影戏剧化区块使用紫色调的 Hero 摄影深色表面的产品 UI 截图与卡片体系一致的 22px 圆角图片通栏紫色渐变区块4.6 标志性组件Distinctive Components22px 卡片体系22px 圆角是 Cohere 的视觉签名所有主卡片、图片、容器统一使用形成与常见 8–12px 截然不同的云朵般有机柔和感。在 components.html 中连 Hero 旁边的 meta 信息卡也遵循--radius-md。企业信任条Enterprise Trust Bar水平排列的客户公司 Logo 条采用干净的单色 Logo 处理展示企业级采纳证明。紫色 Hero 色带Purple Hero Bands通栏深紫色区块承载产品展示在白色页面流中制造戏剧性视觉断点产品截图漂浮在紫色环境中。大写代码标签Uppercase Code TagsCohereMono 大写 字距用作区块标记与分类标签构建技术化的结构化信息层级.eyebrow { font-family: var(--font-mono); font-size: var(--text-sm); /* 14px */ color: var(--muted); text-transform: uppercase; letter-spacing: 0.028em; /* 0.28px */ font-weight: 400; }5. 布局原则5.1 间距体系Spacing System基础单位8px刻度2px、6px、8px、10px、12px、16px、20px、22px、24px、28px、32px、36px、40px、56px、60pxtoken 化的间距阶梯--space-1(4px) /--space-2(8px) /--space-3(12px) /--space-4(16px) /--space-5(20px) /--space-6(24px) /--space-8(32px) /--space-12(48px)按钮内边距随变体变化卡片内边距约 24–32px区块垂直间距慷慨区块之间 56–60pxtoken 化为--section-y-desktop: 60px、--section-y-tablet: 48px、--section-y-phone: 32px5.2 栅格与容器Grid Container容器最大宽度实测可达 2560px极宽token 化实现取--container-max: 1440px作为企业大屏基准tokens.css响应式缩放下配合--container-gutter-desktop/tablet/phone32/24/16px调整内边距Hero居中 戏剧性大排版特性区块多列卡片栅格repeat(3, 1fr)→ 平板 2 列 → 手机 1 列企业区块通栏紫色色带检测到26 个断点——极其细粒度的响应式系统5.3 留白哲学Whitespace Philosophy企业清晰度每个区块只呈现一个明确主张区块间留足呼吸空间摄影即 Hero大型摄影区块提供视觉趣味无需装饰性设计元素卡片分组相关内容被组织进 22px 圆角卡片形成自然的信息聚类。5.4 圆角刻度Border Radius Scale级别圆角用途Sharp4px导航元素、小标签、分页Comfortable8px对话框、次级容器、小卡片--radius-smGenerous16px精选容器、中号卡片Large20px大型特性卡片Signature22px主卡片、Hero 图片、主容器——Cohere 签名圆角--radius-md/--radius-lgPill9999px按钮、标签、状态指示器--radius-pill6. 深度与层级Depth Elevation层级处理用途FlatLevel 0无阴影、无边框页面背景、文本块BorderedLevel 11px solid #f2f2f2或#d9d9dd标准卡片、列表分隔Purple BandLevel 2通栏深紫色背景Hero 区块、特性展示阴影哲学Cohere 几乎无阴影。深度通过背景色对比紫色色带上的白色卡片、雪白表面上的白色表面、边框包容冷灰边框以及戏剧性的明暗区块交替来传达。当元素需要抬升时靠白底上的深色而非投影实现。token 化表现为--elev-flat: none; /* 无阴影 */ --elev-ring: 0 0 0 1px var(--border-soft); /* 白色上的 1px 描边环 */ --elev-raised: 0 4px 16px rgba(0, 0, 0, 0.06); /* 极轻微悬停阴影 */ --focus-ring: 0 0 0 2px var(--accent); /* 聚焦环 */7. 响应式行为Responsive Behavior7.1 断点表名称宽度关键变化Small Mobile425px紧凑布局、最小间距Mobile425–640px单列、卡片堆叠Large Mobile640–768px轻微间距调整Tablet768–1024px开始 2 列栅格Desktop1024–1440px完整多列布局Large Desktop1440–2560px最大容器宽度实测检测到 26 个断点——数据集里响应式最细粒度的站点之一。7.2 触控目标Touch Targets按钮尺寸满足触控交互需求导航链接间距舒适卡片表面本身即触控目标7.3 折叠策略Collapsing Strategy导航完整导航折叠为汉堡菜单特性栅格多列 → 2 列 → 单列Hero 文本72px → 48px → 32px 渐进缩放紫色区块保持通栏内容纵向堆叠卡片栅格3 → 2 → 1 列components.html 中.features-grid的媒体查询即此策略的实现7.4 图片行为摄影在 22px 圆角容器内等比缩放产品截图保持宽高比紫色区块背景等比缩放8. 必须做与不要做Dos and Donts做所有主卡片与容器使用22px 圆角——这是视觉签名展示标题使用 CohereText72px、60px并带负字距所有正文与 UI 文本使用 Unica77字重 400保持黑、白 冷灰边框的调色板Interaction Blue#1863dc只用于悬停/聚焦交互状态深紫色区块用于戏剧性视觉断点与产品展示CohereMono 标签使用大写 字距使用多元主体、符合企业调性的摄影不要做主卡片不要使用 22px 以外的圆角——签名圆角至关重要不要引入暖色——调色板严格冷调不要使用厚重阴影——深度来自色彩对比与边框正文不要使用 700 粗体——字重范围是 400–500不要跳过衬线/无衬线层级——标题用 CohereText正文用 Unica77不要把紫色用作卡片表面色——紫色只属于通栏区块区块间距不要低于 40px——企业级布局需要呼吸空间按钮默认不要加装饰——ghost/透明是基础状态9. Agent 提示词指南Agent Prompt Guide这是本包作为 OpenDesign 设计系统最独特的价值直接喂给编码 Agent 的提示词片段。9.1 快速色彩参考主文本Cohere Black (#000000)页面背景Pure White (#ffffff)次要文本Near Black (#212121)悬停强调Interaction Blue (#1863dc)弱化文本Muted Slate (#93939f)卡片边框Lightest Gray (#f2f2f2)区块边框Border Cool (#d9d9dd)9.2 组件提示词示例Hero 区块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).Ghost 按钮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.9.3 迭代指南Iteration Guide一次只聚焦一个组件主卡片始终使用 22px 圆角——the Cohere card roundness明确指定字体——标题 CohereText、正文 Unica77、标签 CohereMono交互元素仅在悬停时使用 Interaction Blue#1863dc表面保持白色 冷灰边框——无暖色调紫色只用于通栏区块绝不用于卡片背景10. 包内落地实现从规范到可运行代码Cohere 包不仅仅是设计散文它还携带了一整套可组合进 Agent 提示词与构建管线的实现产物目录结构如下完整清单见 design-systems/README.mddesign-systems/cohere/ ├── manifest.json # v1 清单发现元数据、来源、声明的文件路径 ├── DESIGN.md # 面向 Agent 的规范散文本文主体 ├── USAGE.md # Agent 阅读顺序与使用指南 ├── tokens.css # 语义 token 样式表唯一事实源 ├── design-tokens.json # 由 token 契约报告派生的 Design Tokens JSON ├── tailwind-v4.css # 由 tokens.css 派生的 Tailwind v4 映射 ├── components.html # 独立组件 fixtureHero/特性卡/表单 ├── components.manifest.json # 派生的组件/token 索引 ├── preview/ # 索引化预览页colors/typography/spacing └── source/ # 导入证据、片段与 token 报告10.1 派生文件是缓存而非另一套事实源根据 design-systems/README.md 的契约components.manifest.json由components.html与tokens.css派生design-tokens.json由 token 契约报告派生且必须与tokens.css一致tailwind-v4.css由tokens.css派生。design-tokens.json 的摘要显示该包共 56 个 token、全部有源码背书、契约得分为 100excellent分层为 A1-identity(8) / A1-structure(18) / A2(26) / B-slot(4)。source/evidence.md 明确说明本包源自 OpenDesign 精选的捆绑 fixture未声称对上游品牌站点做过全新爬取——使用时应如实引用 provenance。10.2 Tailwind v4 桥接若项目使用 Tailwind v4可直接引入 tailwind-v4.css它在theme块内把全部语义 token 桥接为 Tailwind 工具类命名空间import tailwindcss; import ./tokens.css; theme { --color-bg: var(--bg); --color-accent: var(--accent); --color-accent-hover: var(--accent-hover); --color-muted: var(--muted); --font-display: var(--font-display); --font-sans: var(--font-body); --radius-md: var(--radius-md); --shadow-focus-ring: var(--focus-ring); --duration-base: var(--motion-base); /* ...完整映射见文件 */ }由此你可以直接写bg-bg、text-muted、font-display、rounded-md即 22px这类语义化类名同时保持tokens.css为唯一事实源。10.3 Agent 侧的阅读与使用顺序USAGE.md 规定了 Agent 与评审者的标准读序先读 USAGE.md 理解包契约读 DESIGN.md 获取视觉意图、约束与反模式将tokens.css粘贴进第一个 artifact 的style块再写组件 CSS用components.manifest.json获取紧凑组件清单需要精确选择器或状态时打开components.html需要视觉 sanity check 时查看preview/页面。同时它给出两条硬约束保留 schema token 名称原样以保证跨品牌切换可靠如--accent应始终表示主操作/链接/聚焦色避免在复制的:roottoken 块之外使用裸十六进制值。11. 在 OpenDesign 中如何启用与验证浏览与选择在 Design System 界面或项目创建工作流中选中cohere包其manifest.json中的name、categoryAI LLM与description会作为目录文案展示设计上下文随后被组合进 Agent 提示词。目录在每次/api/design-systems请求时扫描修改包后刷新界面即可生效无需重启 daemon见 design-systems/README.md。本地导入产品还支持本地文件夹、GitHub 与 shadcn 三种导入流程在 UI 与od design-systems import-*CLI 中均可使用仓库自带的批量同步脚本为 scripts/sync-design-systems.ts。质量校验包级质量守卫会校验声明的路径、rich profile、派生文件一致性、token 契约、组件 fixture、source 证据与 preview 覆盖作者侧运行pnpm guard与pnpm typecheck。完整作者指南与评审清单见 docs/design-systems.md。视觉验证直接打开 components.html含 Hero、特性卡、表单的完整参考实现或preview/下的 colors、typography、spacing 预览页即可肉眼核对 22px 圆角、ghost 按钮与 Focus Purple 输入态的实际效果。提示Cohere 是品牌灵感包而非品牌官方资产见 design-systems/README.md 的 Attribution 说明使用时请保留manifest.source与source/evidence.md所记录的真实 provenance。【免费下载链接】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），仅供参考