---
title: "Cohere design system"
variant: extended
source: https://cohere.com/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/cohere-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Cohere · Design System

> Enterprise AI, framed with calm editorial clarity

**Theme:** light · **Industry:** ai · **Source:** https://cohere.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Cohere pairs a quiet white canvas and editorial typography with cinematic product imagery to present enterprise AI as capable and controlled. Alternating warm neutral and deep green sections organize product stories, industry examples, customer proof, and security credentials.

## North star

Let generous white space and clear editorial hierarchy carry the story; use imagery and color only to distinguish meaningful content shifts.

## Overview

The page is anchored by Gallery White (#ffffff), with near-black text and a warm stone band (#f0eee9) that groups the purpose-built product stories. Deep green appears later as a focused security panel, while the footer switches to near-black. The measured coral-to-blue gradient accents are secondary details rather than the main page identity; the screenshots are led by neutral space, photography, and product interfaces. Unica77 Cohere Web carries navigation, body copy, and most headings in a restrained, regular-weight sans-serif voice. Large centered hero type creates a clear opening, while smaller editorial labels and fine dividers structure the lower content. Layout alternates broad open sections with paired feature panels, cards, and image-led industry examples. Photography, interface mockups, customer marks, and dark 3D product scenes add contrast without turning the page into a decorative collage. Pill-shaped actions and softly rounded media frames soften the otherwise crisp, flat composition.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | brand | Primary canvas for the hero, customer proof, industry content, news, and light navigation. |
| Cohere Ink | `#17171c` | `--color-cohere-ink` | brand | Primary dark text and dark filled demo or content actions on light backgrounds. |
| Warm Stone | `#f0eee9` | `--color-warm-stone` | surface | Broad background band behind purpose-built AI solutions and product feature panels. |
| Pure Black | `#000000` | `--color-pure-black` | neutral | Announcement strip, fine dark outlines, and dark details; also appears within product imagery. |
| Soft Charcoal | `#212121` | `--color-soft-charcoal` | neutral | Supporting headings and editorial links, especially within cards and content-feed items. |
| Muted Slate | `#73738a` | `--color-muted-slate` | semantic | Secondary muted text in navigation and supporting copy. |
| Coral Signal | `#ff7759` | `--color-coral-signal` | accent | One stop in a measured accent gradient; treat as a detail, not a dominant page color. |
| Iris Signal | `#7670c5` | `--color-iris-signal` | accent | Middle stop in the measured accent gradient; secondary to the neutral page palette. |
| Cobalt Signal | `#4c6ee6` | `--color-cobalt-signal` | accent | Final stop in the measured accent gradient; use only where that gradient is relevant. |
| Cloud Gray | `#e5e7eb` | `--color-cloud-gray` | semantic | Subtle section or interface hairlines in measured data, not a defining surface color. |
| Linen Gray | `#d7cfc1` | `--color-linen-gray` | semantic | Secondary section divider tone; keep subordinate to white and warm stone. |
| Forest Depth | `#062c22` | `--color-forest-depth` | surface | Measured deep-green inverse section surface, distinct from the lighter product canvas. |
| Moss Shade | `#355146` | `--color-moss-shade` | surface | Footer-associated green in measured data; a supporting dark environmental tone. |
| Security Green | `#152717` | `--color-security-green` | surface | Security and certification section background, with light centered copy and marks. |
| Graphite Panel | `#2e2e2e` | `--color-graphite-panel` | neutral | Dark card detail in measured data, mostly associated with interface or product content. |
| Footer Ash | `#93939f` | `--color-footer-ash` | semantic | Muted footer text tone; use for low-emphasis information on dark surfaces. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f0eee9` (Warm Stone) · `--color-surface-2` → `#17171c` (Cohere Ink) · `--color-surface-3` → `#000000` (Pure Black) · `--color-surface-4` → `#062c22` (Forest Depth) · `--color-text` → `#17171c` (Cohere Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#73738a` (Muted Slate) · `--color-border` → `#000000` (Pure Black) · `--color-accent` → `#ff7759` (Coral Signal) · `--color-accent-2` → `#7670c5` (Iris Signal) · `--color-accent-3` → `#4c6ee6` (Cobalt Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#17171c` | `#ffffff` | 17.86:1 | AAA |
| `#17171c` | `#f0eee9` | 15.4:1 | AAA |
| `#17171c` | `#000000` | 1.18:1 | fail |
| `#ffffff` | `#f0eee9` | 1.16:1 | fail |
| `#ffffff` | `#17171c` | 17.86:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#73738a` | `#ffffff` | 4.62:1 | AA |
| `#73738a` | `#f0eee9` | 3.98:1 | AA-large |
| `#73738a` | `#17171c` | 3.87:1 | AA-large |
| `#73738a` | `#000000` | 4.55:1 | AA |

### Gradients

- `linear-gradient(to right, rgb(255, 119, 89), rgb(118, 112, 197), rgb(76, 110, 230))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Unica77 Cohere Web | `--font-body` | webfont | 400, 500 | Main navigation, body, links, captions, and most headings. | DM Sans |
| CohereMono | `--font-mono` | webfont | 400 | Code-like labels and technical metadata. | IBM Plex Mono |

- **Unica77 Cohere Web:** Use regular weights for a clean, unforced voice; measured headings are generally untransformed, with tighter tracking at display sizes.
- **CohereMono:** Measured code role uses uppercase text with slightly open tracking; reserve this treatment for compact technical labels.

### Type scale — Perfect Fifth (ratio ≈ 1.47, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 400 | 1 | -0.02em | — | CohereText | Oversized hero headline, set as the page’s primary visual anchor. |
| h1 | 60px | 400 | 1 | -0.02em | — | CohereText | Hero-level headline or major page title. |
| h2 | 48px | 400 | 1.2 | -0.01em | — | Unica77 Cohere Web | Section titles such as product, industry, and testimonial headings. |
| h3 | 32px | 400 | 1.2 | -0.01em | — | Unica77 Cohere Web | Feature and customer-story card headings. |
| h4 | 24px | 400 | 1.3 | 0 | — | Unica77 Cohere Web | Supporting subheads within product and editorial content. |
| body | 14px | 400 | 1.4 | 0 | — | Unica77 Cohere Web | Explanatory paragraphs, descriptions, and feature copy. |
| caption | 12px | 400 | 1.4 | 0 | — | Unica77 Cohere Web | Dates, category labels, and compact image or card details. |
| nav | 14px | 400 | 1.4 | 0 | — | Unica77 Cohere Web | Primary navigation and footer link labels. |
| link | 14px | 400 | 1.4 | 0 | — | Unica77 Cohere Web | Text links and compact inline calls to action. |
| code | 14px | 400 | 1.4 | 0.02em | uppercase | CohereMono | Technical labels and short uppercase metadata. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 4, 6, 8, 10, 12, 16, 20, 24, 32, 36, 40, 80 px.
- Section rhythm 40px · element gap 4px · card padding 10px · max content width 1360px.

Use a centered content frame with a measured maximum width of 1360px and a compact underlying spacing scale. The opening hero is centered and spacious; subsequent sections alternate between full-width bands, paired image-and-copy layouts, and multi-column cards. The warm stone product area groups several stacked showcases, while white sections restore visual breathing room. Center section titles where they introduce a new topic; align feature copy and editorial cards to the start. Thin separators and restrained gaps establish rhythm without dense grids.

## Shape & elevation

- Radius: button `9999px` · card `22px` · media `8px` · nav `9999px` · link `22px` · xs `4px` · sm `8px` · md `12px` · lg `20px` · xl `22px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is mostly flat, with no measured shadow system. Separate sections through background bands, whitespace, hairlines, and changes in image tone rather than stacked elevation. Product and customer cards use rounded containers or image frames, while interfaces may contain their own dark panels. Keep boundaries clear and layering restrained.

## Imagery

Use cinematic enterprise product photography, interface mockups, customer logos, and selective dark 3D imagery. Frame large media in softly rounded containers and pair it with crisp, readable interface details. Industry and customer imagery should feel photographic and contextual, while security badges and logos stay small and orderly. Images bring color and atmosphere; avoid letting their incidental hues redefine the page palette.

## Components

### Announcement strip

A black full-width top bar with centered update text and an inline learn-more link, set apart from the white navigation below.

### Primary navigation

White horizontal header with Cohere mark, compact navigation links, sign-in text, and a dark pill-shaped demo action.

### Hero

Centered two-line display headline and supporting sentence above a broad rounded product-media frame.

### Pill action

Use fully rounded buttons; measured examples pair a white fill with dark text or a Cohere Ink fill with white text.

### Product showcase

Stacked feature panels combine compact uppercase labels, prominent copy, a pill action, and large product imagery or interface mockups.

### Customer story cards

Three-column editorial cards pair imagery and customer marks with small category labels, concise headlines, and read-more links.

### Security band

Centered light typography and a short link sit on Security Green, followed by a horizontal row of certification marks.

### Footer

A dark inverse closing area with the brand mark and compact columns of product, industry, resource, and company links.

### Measured component styles

- **Primary button** (“Explore now”): background #ffffff · text #17171c · border 2px solid · radius 9999px · padding 12px 24px · 400 16px Unica77 Cohere Web
- **Secondary button** (“Request a demo”): background #17171c · text #ffffff · border 2px solid · radius 9999px · padding 0px 16px · 400 16px Unica77 Cohere Web
- **Link** (“See more on the blog”): transparent background · text #212121 · radius 0px · padding 0px · 400 16px Unica77 Cohere Web
- **Card** (“Featured Model Vault provides fully-isol”): background #f2f2f2 · text #000000 · radius 0px · padding 0px 40px 0px 0px · 400 16px Unica77 Cohere Web
- **Navigation item** (“Products Products Solutions Solutions Re”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Unica77 Cohere Web

## Do

- Keep the opening canvas white and the hero headline centered.
- Use Warm Stone to group related product showcases.
- Let large product images or interface mockups support concise copy.
- Use Security Green for the security-and-certification content block.
- Keep buttons pill-shaped and text treatments calm.
- Use hairlines and whitespace to divide editorial content.
- Keep customer marks and certification logos visually secondary.

## Don't

- Do not make the accent gradient the dominant page treatment.
- Do not apply the dark footer palette across the entire page.
- Do not crowd the hero with multiple competing actions.
- Do not add heavy shadows or stacked card elevation.
- Do not use product-image colors as global brand colors.
- Do not turn every content block into a boxed card.
- Do not overuse uppercase technical labels.

## Agent prompt

Build a new enterprise AI page in Cohere’s restrained editorial style. Start with Gallery White (#ffffff), Cohere Ink (#17171c) typography, a compact horizontal navigation, and a centered, oversized hero with a single primary message. Organize related offerings in Warm Stone (#f0eee9) bands; alternate open white sections with image-and-copy features, customer proof, and editorial cards. Use rounded media frames and fully pill-shaped actions, with white or Cohere Ink fills. Reserve Security Green (#152717) for a focused trust or certification panel, and use near-black for the footer. Treat Coral Signal (#ff7759), Iris Signal (#7670c5), and Cobalt Signal (#4c6ee6) as minor accent-gradient colors only. Favor real product imagery, interfaces, and customer marks over decorative illustration. Keep layout flat, spacious, and clearly sectioned.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | announcement | Full-width narrow dark strip above the main header. | product update link, dismiss control | black background, centered copy, inline underline link |
| 2 | hero | Centered headline and copy above a wide, rounded product image. | clear product positioning, visual product preview | white canvas, large centered type, rounded media frame |
| 3 | logo-cloud | Centered trust statement over a horizontal row of customer marks. | social proof | white background, small centered label, monochrome logos |
| 4 | feature-split | Full-width paired image and copy panels with aligned content. | editorial feature, explore link | photographic panels, light headline, pill button |
| 5 | feature-grid | Centered section heading introduces a full-width warm neutral product band. | section orientation | Warm Stone background, centered heading |
| 6 | product-showcase | Large image-backed feature panel with copy aligned to the start. | product explanation, explore action | dark product imagery, compact label, pill button |
| 7 | product-showcase | Stacked product panel pairing left-aligned text with a dark 3D model visual. | model overview, explore link | dark visual field, light copy, pill action |
| 8 | product-showcase | Light product panel with explanatory copy beside a model-vault interface. | security reassurance, learn more | pale media treatment, interface mockup, rounded action |
| 9 | feature-grid | Centered section title above the following industry feature content. | topic introduction | white canvas, centered heading |
| 10 | feature-split | Industry image and detail area arranged as a broad, restrained split layout. | industry selection, benefit list, see all industries | product screenshot, thin dividers, compact list |
| 11 | content-feed | Left-aligned heading above a three-column customer story card row. | customer proof, read-more links | image-led cards, small category labels, rounded surfaces |
| 12 | testimonials | Two-column quote layout with customer mark beside large testimonial copy. | executive endorsement | oversized quote, brand mark, open white space |
| 13 | content-feed | Section title and blog link above a three-column news-card row. | browse latest news, topic labels | image cards, date metadata, text links |
| 14 | feature-grid | Centered text block on a deep green full-width section band. | trust reassurance, learn more | Security Green surface, light centered type, compact link |
| 15 | logo-cloud | Five certification marks aligned horizontally below the security message. | compliance proof | dark green background, small certification marks, even row |
| 16 | footer | Image-backed CTA followed by a dark multi-column site footer. | request a demo, site-wide navigation | centered CTA, full-bleed imagery, dark link columns |

## Source CSS custom properties (selected)

```css
--tw-ring-offset-color: #fff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/cohere-com