Cohere Design System

---

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's current web presence feels like a sober enterprise AI command center with editorial restraint. The home page opens on a huge typographic declaration over a white canvas, then uses photography, dark product mockups, trust logos, and generous empty space to make AI infrastructure feel controlled rather than speculative. Product pages invert the tone into deep green-black or dark navy bands, while blog and research pages move toward publishing-system clarity: large filters, thin rules, dense lists, and pale technical backgrounds.

What makes the system distinctive is the mix of austere black-and-white UI with bursts of tactile brand imagery. The site avoids decorative chrome in the normal interface; color arrives through photography, abstract 3D media, coral blog taxonomy chips, blue research links, and dark product environments. Cards are rounded but not cute. Type is large, tight, and almost monospaced in spirit, creating a research-lab cadence across marketing, product, and editorial surfaces.

**Key Characteristics:**

Cohere does not use gradients as a generic UI fill. Gradients and color fields are media-led: abstract 3D hero imagery, deep blue open-science particle fields, red-orange product video posters, and dark green-to-black product environments. Keep UI surfaces flat; reserve gradient richness for large media panels and CTA image bands.

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |

|---|---|---:|---:|---:|---:|---|

| Hero Display | CohereText | 96px | 400 | 1.00 | -1.92px | Home page declaration scale. |

| Product Display | CohereText | 72px | 400 | 1.00 | -1.44px | Product and research hero headlines. |

| Section Display | Unica77 | 60px | 400 | 1.00 | -1.2px | Large product-page headings. |

| Section Heading | Unica77 | 48px | 400 | 1.20 | -0.48px | Split hero and CTA headings. |

| Card Heading | Unica77 | 32px | 400 | 1.20 | -0.32px | Feature card and list section titles. |

| Feature Heading | Unica77 | 24px | 400 | 1.30 | 0 | Cards, filters, and article titles. |

| Body Large | Unica77 | 18px | 400 | 1.40 | 0 | Lead text and larger paragraphs. |

| Body | Unica77 | 16px | 400 | 1.50 | 0 | Default copy and link text. |

| Button | Unica77 | 14px | 500 | 1.71 | 0 | Compact CTA labels. |

| Caption | Unica77 | 14px | 400 | 1.40 | 0 | Metadata and small explanatory text. |

| Mono Label | CohereMono | 14px | 400 | 1.40 | 0.28px | Uppercase technical labels. |

| Micro | Unica77 | 12px | 400 | 1.40 | 0 | Footer, nav microcopy, and small links. |

The system uses an 8px base with many one-off alignment values: `2px`, `6px`, `8px`, `10px`, `12px`, `16px`, `20px`, `22px`, `24px`, `28px`, `32px`, `36px`, `40px`, `56px`, `60px`, `64px`, and `80px`.

Large sections rely on dramatic vertical breathing room. The home page places a trust-logo strip far below the hero media. Product pages often hold dark panels inside fields of empty white space, then transition to dense forms or footers only near the end.

Cohere uses whitespace as a trust signal. Large empty intervals separate the brand claim, customer proof, product proof, and CTA. Dense content appears only where it serves the information architecture: research paper rows, blog card grids, and contact form fields.

Cohere is mostly flat. Depth comes from surface alternation, media contrast, rounded corners, and thin borders rather than drop shadows.

| Level | Treatment | Use |

|---|---|---|

| Flat | No shadow, white or dark field | Hero copy, research lists, editorial surfaces |

| Bordered | 1px `#d9d9dd`, `#e5e7eb`, or dark translucent rules | Research rows, forms, pale cards, footer inputs |

| Media Lift | Rounded image or video over contrasting section color | Hero photo cards, product videos, CTA imagery |

| Dark Product Field | Deep green or navy full-width band | Command, North, financial services, security sections |

| Token | Value | Role |

|---|---:|---|

| `xs` | 4px | Small images, search fields, article thumbnails, utility elements |

| `sm` | 8px | Blog chips, cards, small media, dialogs |

| `md` | 16px | Medium product cards and grouped blocks |

| `lg` | 22px | Signature media-card and soft placeholder radius |

| `xl` | 30px | Research/topic filter pills |

| `pill` | 32px | Primary CTA buttons |

| `full` | 9999px | Round status elements and fully pill-shaped controls |

Images are not decorative backdrops for text except in CTA bands. Most imagery sits as rounded cards with visible corners: product videos, enterprise photography, article thumbnails, and abstract 3D renders. The dominant radii are 8px and 22px.

Near-black or white pill CTA, depending on surface contrast. Uses 14px-16px Unica77, 12px 24px padding, and a 32px pill radius. This is the primary action style for "Request a demo", "Submit", and hero CTAs.

Text-only action link, usually underlined or rule-aligned, with no filled background. Used for "Explore products", "Try the Playground", newsletter signup, and secondary hero actions.

Outlined pill control with transparent fill, 1px dark border, and 30px radius. Used for research filters, topic tags, and lightweight taxonomy controls.

Full-width black strip above the nav, 36px tall, centered microcopy with an underlined "Learn more" link and a close control at the far right.

Rounded media card used in the home hero and solution pages. It combines photography or abstract imagery with an overlaid dark agent-console module. Radius is usually 22px on large cards and 8px on smaller thumbnails.

Dark product mockup panel showing agent names, status chips, integration badges, prompt fields, and generated response cards. Background is near-black, text is white or muted, and small accent chips use product colors.

Centered copy above a row of monochrome customer logos. It is intentionally quiet: no cards, no borders, just large horizontal spacing and black or white logos depending on the background.

Content block with thin-line geometric illustration, 24px heading, body copy, and a text link. On light backgrounds, cards often have only a top rule or a subtle image/card relationship rather than full boxing.

Deep green or navy full-width section used for product capabilities, security claims, and feature breakdowns. Text turns white; cards use darker translucent surfaces, pale borders, and abstract line illustrations.

Warm stone card used for product/model summaries. Typically 3-column on desktop, with 8px radius, generous padding, a small pill button, a divider line, and checkmark bullet rows.

Large coral taxonomy chip used on the blog index. Active chips invert to coral fill with dark text; inactive chips use coral outline and pale fill. Typography is oversized relative to typical filters, making the taxonomy a hero-level control.

Rule-separated publication list with title left, topic pills centered, and date right. Rows are tall, white, and border-driven; filters above use many compact outlined pills.

Rounded white form panel set against dark green or warm stone sections. Inputs are rectangular with thin gray borders, 12px-16px padding, and compact labels/placeholders. Submit uses the same near-black pill style as primary CTAs.

Dark footer subscription block with coral "AI moves fast" label, white headline, muted legal microcopy, a single-line email field, and arrow submit marker. Footer columns use white section labels and muted links.

| Name | Width | Key Changes |

|---|---:|---|

| Small Mobile | <425px | Single-column cards, compact nav, reduced hero headline scale |

| Mobile | 425-640px | Hero media stacks, card grids become one column, form rows stack |

| Large Mobile | 640-768px | Wider one-column layouts with larger media cards |

| Tablet | 768-1024px | Two-column cards begin, nav spacing tightens |

| Desktop | 1024-1440px | Full nav, 3-column card grids, split hero compositions |

| Large Desktop | 1440-2560px | Wide containers and large empty vertical intervals |

Primary CTAs and pills meet comfortable touch sizing through 12px-24px padding and pill radii. Research filter chips and blog category chips are larger than standard tags, making dense taxonomy surfaces usable on touch devices.

1. Start from a white canvas or a full-width dark green/navy band; avoid mid-tone page backgrounds unless the screenshot shows a specific CTA/form section.

2. Use `button-primary` for the single highest-priority action and `button-secondary` for the companion action.

3. Use `hero-photo-card` or `agent-console-card` when a page needs visual energy; avoid invented dashboard data.

4. For editorial pages, combine `blog-filter-chip`, `button-pill-outline`, and `research-table` instead of generic marketing cards.

5. Keep component examples structurally honest: placeholder product frames are better than invented product content.