Cohere

version: alpha name: Cohere-design-analysis description: Cohere's 2026 web system is a controlled enterprise AI interface built from stark white editorial space, deep green-black product bands, soft mineral surfaces, rounded media cards, and a distinctive type split between monospaced-feeling display headlines and precise Unica77 UI text.

colors: primary: "#17171c" cohere-black: "#000000" ink: "#212121" deep-green: "#003c33" dark-navy: "#071829" canvas: "#ffffff" soft-stone: "#eeece7" pale-green: "#edfce9" pale-blue: "#f1f5ff" hairline: "#d9d9dd" border-light: "#e5e7eb" card-border: "#f2f2f2" muted: "#93939f" slate: "#75758a" body-muted: "#616161" action-blue: "#1863dc" focus-blue: "#4c6ee6" coral: "#ff7759" coral-soft: "#ffad9b" form-focus: "#9b60aa" on-primary: "#ffffff" on-dark: "#ffffff" error: "#b30000"

typography: hero-display: fontFamily: CohereText fontSize: 96px fontWeight: 400 lineHeight: 1 letterSpacing: -1.92px product-display: fontFamily: CohereText fontSize: 72px fontWeight: 400 lineHeight: 1 letterSpacing: -1.44px section-display: fontFamily: Unica77 Cohere Web fontSize: 60px fontWeight: 400 lineHeight: 1 letterSpacing: -1.2px section-heading: fontFamily: Unica77 Cohere Web fontSize: 48px fontWeight: 400 lineHeight: 1.2 letterSpacing: -0.48px card-heading: fontFamily: Unica77 Cohere Web fontSize: 32px fontWeight: 400 lineHeight: 1.2 letterSpacing: -0.32px feature-heading: fontFamily: Unica77 Cohere Web fontSize: 24px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0 body-large: fontFamily: Unica77 Cohere Web fontSize: 18px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0 body: fontFamily: Unica77 Cohere Web fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 button: fontFamily: Unica77 Cohere Web fontSize: 14px fontWeight: 500 lineHeight: 1.71 letterSpacing: 0 caption: fontFamily: Unica77 Cohere Web fontSize: 14px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0 mono-label: fontFamily: CohereMono fontSize: 14px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.28px micro: fontFamily: Unica77 Cohere Web fontSize: 12px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0

rounded: xs: 4px sm: 8px md: 16px lg: 22px xl: 30px pill: 32px full: 9999px

spacing: xxs: 2px xs: 6px sm: 8px md: 12px lg: 16px xl: 24px xxl: 32px section: 80px

components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 12px 24px button-secondary: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.xs}" padding: 8px 0 button-pill-outline: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.button}" rounded: "{rounded.xl}" padding: 6px 12px announcement-bar: backgroundColor: "{colors.cohere-black}" textColor: "{colors.on-dark}" typography: "{typography.micro}" height: 36px hero-photo-card: backgroundColor: "{colors.canvas}" rounded: "{rounded.lg}" agent-console-card: backgroundColor: "{colors.primary}" textColor: "{colors.on-dark}" rounded: "{rounded.sm}" padding: 24px trust-logo-strip: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.caption}" capability-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.xs}" padding: 24px dark-feature-band: backgroundColor: "{colors.deep-green}" textColor: "{colors.on-dark}" rounded: "{rounded.lg}" padding: 80px product-card: backgroundColor: "{colors.soft-stone}" textColor: "{colors.ink}" rounded: "{rounded.sm}" padding: 32px blog-filter-chip: backgroundColor: transparent textColor: "{colors.coral}" typography: "{typography.card-heading}" rounded: "{rounded.sm}" padding: 8px 14px research-table: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-large}" contact-form-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 32px footer-newsletter: backgroundColor: "{colors.primary}" textColor: "{colors.on-dark}" typography: "{typography.micro}"

概览

Cohere 当前的官网呈现的是一种克制的企业 AI 指挥中心气质，带有编辑式的克制感。首页在白画布上以巨大的字体声明开篇，再借助摄影、深色产品 mockup、信任标识 logo 和慷慨的留白，让 AI 基础设施显得被控制而非投机。产品页将基调反转为深绿黑或深海军蓝的色带；博客与研究页则转向出版系统的清晰感：大号筛选器、细线、密集的列表、淡色的技术背景。

系统的独特之处在于极简的黑白 UI 与有质感的品牌图像的混合。常规界面里看不到装饰性的外壳元素；色彩通过摄影、抽象 3D 媒体、珊瑚色的博客分类 chip、蓝色的研究链接和深色产品环境来呈现。卡片圆润但不失可爱。字体大、紧、带有一种接近等宽的精神，让营销、产品与编辑页面都呈现出研究实验室的节奏。

关键特征：

• 纪念碑式展示标题，行高极紧、字距为负。
• 白色编辑画布，被深绿、深海军蓝、图像引导的 CTA 色带打断。
• 圆角的媒体卡片和产品卡片，常用 8px 到 22px。
• 近黑色或白色的胶囊 CTA，大多数次要操作用下划线文字链接。
• 单色客户 logo 条，垂直留白极宽。
• Agent 控制台 mockup 使用深色面板、小型状态 chip 和产品集成徽标。
• 博客与研究页有突出的分类 chip、细线分隔的长列表和搜索框。

配色

品牌与点缀

• Cohere 黑（#000000）：公告条、最高对比文字、全局品牌锚。
• 近黑主色（#17171c）：主 CTA 按钮、深色页脚和深色 UI 卡片。
• 深企业绿（#003c33）：North 和 Command 风格深色章节的产品首屏色带。
• 深海军蓝（#071829）：金融服务与安全方向解决方案的色带。
• 动作蓝（#1863dc）：编辑链接、分页与次要动作强调。
• 珊瑚（#ff7759）：博客分类 chip、分类外框和暖色产品标记。
• 柔珊瑚（#ffad9b）：淡色 chip 边框和分段文章标签细节。

表面与背景

• 画布白（#ffffff）：页面主背景，也是表单/卡片表面。
• 柔石（#eeece7）：产品卡片、证言占位和暖色中性表面块。
• 淡绿底（#edfce9）：North 页堆叠深色能力面板背后的章节底色。
• 淡蓝底（#f1f5ff）：抽象 3D 图像背后的博客 CTA 表面。
• 卡片边（#f2f2f2）：最柔的卡片收边线。

文字与线条

• 主墨（#212121）：浅色背景上的默认正文与大多数链接文字。
• 弱板岩（#93939f）：页脚链接、日期、元数据、降权标签。
• 板岩（#75758a）：研究分隔符与三级文字。
• 细线（#d9d9dd）：标准列表分隔线与章节分隔线。
• 浅边（#e5e7eb）：次要分隔线与辅助线。

语义

• 聚焦蓝（#4c6ee6）：键盘焦点与外圈色。
• 表单聚焦紫（#9b60aa）：文本输入的聚焦边框。
• 错误红（#b30000）：与校验态相关的提取外圈/阴影色。

渐变系统

Cohere 不把渐变当作通用 UI 填充。渐变和色块由媒体驱动：抽象的 3D 首屏图像、深蓝开放科学粒子场、红橙产品视频海报、深绿到黑的产品环境。保持 UI 表面平整；把渐变的丰富留给大媒体面板和 CTA 图像带。

字体

字体族

• 展示：CohereText，降级到 Space Grotesk、Inter、ui-sans-serif、system-ui。
• 正文/UI：Unica77 Cohere Web，降级到 Inter、Arial、ui-sans-serif、system-ui。
• 技术标签：CohereMono，降级到 Arial、ui-sans-serif、system-ui。
• 图标：Cohere 使用自定义图标字体和细线几何插画。

层级

原则

• 极大字号克制使用；Cohere 页面常常只有一个超大的标题，其余收回到 16px-24px 的克制 UI 文字。
• 保持展示字紧致。Hero 文字应感觉紧凑、被雕刻，而非疏朗。
• 避免粗体字重。尺寸、间距和表面对比完成大部分层级工作。
• 用大写的等宽标签做分类和系统标记，在产品与研究页尤其常见。
• 编辑页可以使用珊瑚 chip 和蓝色链接，但基础字体仍是黑色、克制的。

布局

间距系统

系统采用 8px 基础单位，配合大量一次性对齐值：2px、6px、8px、10px、12px、16px、20px、22px、24px、28px、32px、36px、40px、56px、60px、64px、80px。

大章节依赖戏剧性的垂直呼吸。首页把信任 logo 条放在远离首屏媒体的位置。产品页常常把深色面板悬在大片白色留白里，最后才过渡到密集的表单或页脚。

网格与容器

• 全局导航采用三区布局：左 logo，中菜单，右登录/CTA。
• 首页 hero 是居中文字加上两卡媒体组合：宽产品 mockup 卡旁一张较窄的摄影卡。
• 功能章节在桌面常用 3 栏卡片。
• 产品页交替使用居中 hero 块、信任 logo 条、大型单功能带，以及 2 或 3 栏卡片栅格。
• 研究页使用全宽列表，按日期和 chip 列展示，不做装饰性卡片。
• 表单使用两列输入行，包裹在圆角白卡中，背景为深色或柔石色块。

留白哲学

Cohere 把留白当作信任信号。大段空白分隔品牌声明、客户证明、产品证明和 CTA。密集内容只在服务信息架构时出现：研究论文行、博客卡片栅格、联系表单字段。

层次与深度

Cohere 总体是平的。深度来自表面交替、媒体对比、圆角和细线，而不是投影。

形状

圆角等级

图像处理

图像除了在 CTA 带中，不做文字的装饰性背景。多数图像以圆角卡片形式存在，露出真实边角：产品视频、企业摄影、文章缩略图和抽象 3D 渲染。主圆角是 8px 和 22px。

组件

button-primary

近黑色或白色的胶囊 CTA，依表面对比而定。使用 14px-16px Unica77，12px 24px 内边距，32px 胶囊圆角。这是 "Request a demo"、"Submit" 和 hero CTA 的主操作样式。

button-secondary

仅文字的动作链接，通常带下划线或对齐于分隔线，无填充背景。用于 "Explore products"、"Try the Playground"、订阅和次要 hero 操作。

button-pill-outline

带边框的胶囊控件，透明底，1px 深色边框，30px 圆角。用于研究筛选、主题标签和轻量分类控件。

announcement-bar

导航之上全宽黑色条，高 36px，居中微小文字 + 带下划线的 "Learn more" 链接，最右有关闭控件。

hero-photo-card

首页 hero 与解决方案页使用的圆角媒体卡。它把摄影或抽象图像与叠加的深色 agent-console 模块组合在一起。大卡通常 22px 圆角，小缩略图 8px。

agent-console-card

深色产品 mockup 面板，展示 agent 名称、状态 chip、集成徽标、提示输入框和生成回复卡片。背景近黑，文字为白或弱化，小型点缀 chip 用产品色。

trust-logo-strip

居中文字下方一行单色客户 logo。刻意低调：无卡片、无边框，只有大的水平间距和根据背景选择的黑色或白色 logo。

capability-card

带细线几何插画、24px 标题、正文和文字链接的内容块。在浅色背景上，卡片常常只画一条顶部分隔线或与图像有微妙关系，而不是完整框选。

dark-feature-band

深绿或海军蓝的全宽章节，用于产品能力、安全声明和功能拆解。文字转白；卡片用更深半透明表面、淡色边框和抽象线插画。

product-card

暖石色卡片用于产品/模型摘要。桌面通常 3 栏，8px 圆角，慷慨内边距，配小型胶囊按钮、分隔线和勾选列表。

blog-filter-chip

博客索引用的大号珊瑚色分类 chip。激活 chip 反转为珊瑚底深色字；未激活 chip 用珊瑚色描边和淡色底。字体相对典型筛选器偏大，使分类成为 hero 级控件。

research-table

按分隔线分隔的发表物列表，标题居左、主题胶囊居中、日期居右。行高、白底、靠边框驱动；上方筛选使用大量紧凑的描边胶囊。

contact-form-card

圆角白色表单面板，置于深绿或暖石色章节之上。输入为矩形带细灰边框、12px-16px 内边距和紧凑标签/占位。提交按钮使用与主 CTA 相同的近黑胶囊样式。

footer-newsletter

深色页脚订阅块，带珊瑚色 "AI moves fast" 标签、白色标题、弱化法律微小文字、单行邮箱输入和箭头提交标记。页脚列使用白色章节标签和弱化链接。

推荐与避免

推荐

• 用白画布作默认表面；引入深绿或海军蓝作为全宽产品色带。
• 主 CTA 保持胶囊形状，在浅色表面上是近黑色。
• 主要媒体卡和占位使用 22px 圆角。
• 把珊瑚色用于编辑分类和小暖色点缀，而非主 CTA 系统。
• 使用单色信任 logo 配宽间距。
• 为研究和能力图标使用细线几何插画。
• 让摄影和产品 mockup 承载颜色，UI 外壳保持克制。

避免

• 不要把珊瑚或蓝变成大块装饰表面色。
• 不要给卡片加重投影。
• 不要让每个章节都做卡片化；Cohere 经常用无框的行、分隔线和开放空间。
• 不要让主要媒体的圆角小于 8px。
• 不要用一种通用无衬线取代展示/正文的字体分工。
• 不要在文档或预览中渲染未文档化的交互变体。
• 不要把饱和渐变当作普通 UI 背景；保持渐变由媒体驱动。

响应式行为

断点

触控目标

主 CTA 和胶囊通过 12px-24px 内边距和胶囊圆角达到舒适的触控尺寸。研究筛选 chip 和博客分类 chip 比标准标签大，让密集分类表面在触屏上也可用。

折叠策略

• 导航从完整横排链接折为紧凑移动菜单。
• Hero 媒体从分屏卡变为堆叠卡。
• 产品和能力栅格从 3 列折为 2 再到 1。
• 表单字段从成对行折为单列。
• 研究行保留分隔线分隔的结构，但较小宽度下元数据堆在标题下方。

迭代指南

1. 从白画布或全宽深绿/海军蓝色带起步；除非截图中显示特定 CTA/表单章节，否则避免中间色页面背景。
2. 把 button-primary 用于最高优先级动作，把 button-secondary 用于伴随动作。
3. 当页面需要视觉能量时使用 hero-photo-card 或 agent-console-card；避免编造仪表盘数据。
4. 编辑页结合 blog-filter-chip、button-pill-outline 和 research-table 使用，而不是通用营销卡片。
5. 让组件示例结构诚实：占位产品框比编造的产品内容更好。

已知缺口

• 精确的专有字体文件未打包；外部实现时请使用文档化的降级字体。
• 本次公开更新未重新生成手机端截图，因此手机行为基于桌面系统和已有响应式模式记录。
• 一些线上页面会延迟加载内容块；空白证言占位被记录为占位骨架表面，而不是已填充的证言卡。