What is Cohere's primary brand color?

Cohere's primary action color is a near-black #17171c, used for pill CTA buttons, the dark footer surface, and deep UI cards. The defining brand voltage is deep enterprise green #003c33, which powers full-width product feature bands on Command and North pages. Dark navy #071829 takes over for financial-services and security solution bands, while coral #ff7759 is reserved for editorial taxonomy chips on the blog index — never the main CTA system.

What typography does Cohere use, and what should I use if the proprietary fonts are unavailable?

Cohere runs a three-typeface system: CohereText carries the 96px and 72px display headlines with tight tracking (-1.92px and -1.44px), Unica77 Cohere Web handles every UI surface from 60px section displays down to 12px microcopy, and CohereMono marks uppercase technical labels at 14px with 0.28px letter spacing. Documented fallbacks are Space Grotesk for display, Inter for body/UI, and Arial for mono labels — adjust display tracking slightly looser since Space Grotesk runs tighter than CohereText.

How does Cohere use color to structure pages?

Pages alternate between stark white editorial canvases and full-width dark product bands. The deep-green #003c33 dark-feature-band component uses 80px padding and 22px corner radii for North and Command product capability sections; dark navy #071829 covers financial services and security. Warm soft-stone #eeece7 product cards sit on the white canvas with 32px padding and 8px radii, and pale washes — green #edfce9 and blue #f1f5ff — sit behind abstract 3D imagery on solution and blog CTA surfaces.

Why are the blog filter chips so large?

Cohere treats the blog taxonomy as a hero-level control rather than a secondary filter. The blog-filter-chip component uses 32px card-heading typography and coral #ff7759 outlines with pale fills, with active chips inverting to coral fill and dark text. The oversized scale makes category selection a primary navigation gesture across the editorial index, in contrast to the small outlined pill-outline chips used for research topic filters at 14px button weight.

Can I use this DESIGN.md to build my own React AI interface?

Yes — the file is structured for AI coding tools and direct reference. Drop it into Claude, Cursor, or Windsurf and the agent will reproduce Cohere's editorial restraint: 32px pill CTAs in #17171c, 22px media-card radii, deep-green product bands, and the CohereText / Unica77 display split rather than a generic shadcn theme. Every color, type token, radius, and component value in the spec is a quoted hex or px value you can paste directly into Tailwind config or CSS variables.

What's missing from this DESIGN.md spec?

Three gaps are documented at the bottom of the file: proprietary font files (CohereText, Unica77 Cohere Web, CohereMono) are not bundled, so external implementations should fall back to Space Grotesk, Inter, and Arial respectively; mobile screenshots were not regenerated in this public update, so mobile behavior is inferred from desktop and existing responsive patterns; and some live pages lazy-load testimonial content, so blank testimonial placeholders are documented as skeleton surfaces rather than filled cards.

Cohere Design System

Cohere's enterprise AI design system as a DESIGN.md file.

About Cohere DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source cohere.com

AI & LLM Platforms
Documentation & Knowledge

Cohere's design system reads like a research lab annual report rather than a typical AI marketing site. The base canvas is pure white with near-black ink, broken only by deep green and dark navy product bands and the occasional coral or blue editorial accent. Three typefaces share the work — CohereText carves the oversized hero declarations, Unica77 Cohere Web carries every UI surface, and CohereMono marks the technical labels with measured letter spacing.

This page packages the full spec into a single DESIGN.md file. Inside: 23 colors, 13 type styles, 7 corner radii, an 8px-base spacing scale, and 14 components covering announcement bars, pill CTAs, agent-console mockups, capability cards, dark product bands, research tables, blog filter chips, contact forms, and the dark newsletter footer.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent will write React and Tailwind that match Cohere's enterprise restraint — flat surfaces, 22px media-card radii, pill CTAs in #17171c, and the deep #003c33 green for product feature bands. Or read it as a reference when planning your own measured, editorial AI interface.

What makes it distinct

Dual-typeface display splitCohereText carves the 96px hero declaration while Unica77 Cohere Web carries every UI surface beneath it
Deep enterprise green band#003c33 full-width sections invert the white canvas into product-mockup environments without losing editorial restraint
32px pill CTAs in near-black#17171c primary buttons paired with underlined text links replace the conventional outlined secondary pattern
Coral taxonomy at hero scale#ff7759 blog filter chips render at 32px card-heading weight, treating category as a primary nav control
Mono labels with 0.28px trackingCohereMono at 14px handles uppercase system markers across research and product surfaces

Live at cohere.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

cohere.com

Explore Cohere

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Cohere design system FAQ

Common questions about Cohere's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives.

Use Cohere in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→