Cohere Design System

Overview

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:

• Monumental display headlines with very tight line height and negative tracking.
• White editorial canvases interrupted by deep green, dark navy, and image-led CTA bands.
• Rounded media cards and product cards, usually 8px to 22px.
• Pill CTAs in near-black or white, with most secondary actions rendered as underlined text links.
• Trust-logo strips with monochrome partner marks and very wide vertical spacing.
• Agent-console mockups using dark panels, small status chips, and product integration badges.
• Blog and research surfaces with prominent taxonomy chips, long rule-separated lists, and search fields.

Colors

Brand & Accent

• Cohere Black (#000000): Announcement bar, highest-contrast text, and the global brand anchor.
• Near-Black Primary (#17171c): Primary CTA buttons, dark footer, and deep UI cards.
• Deep Enterprise Green (#003c33): Product hero bands for North and Command-style dark sections.
• Dark Navy (#071829): Financial-services and security-oriented solution bands.
• Action Blue (#1863dc): Editorial links, pagination, and secondary action emphasis.
• Coral (#ff7759): Blog category chips, taxonomy outlines, and warm product markers.
• Soft Coral (#ffad9b): Pale chip borders and segmented article-label details.

Surface & Background

• Canvas White (#ffffff): Dominant page background and form/card surface.
• Soft Stone (#eeece7): Product cards, testimonial placeholders, and warm neutral surface blocks.
• Pale Green Wash (#edfce9): North page section backdrop behind stacked dark capability panels.
• Pale Blue Wash (#f1f5ff): Blog CTA surface behind abstract 3D imagery.
• Card Border (#f2f2f2): Softest card containment line.

Text & Rules

• Ink (#212121): Default body text and most link text on light backgrounds.
• Muted Slate (#93939f): Footer links, dates, metadata, and de-emphasized labels.
• Slate (#75758a): Research separators and tertiary text.
• Hairline (#d9d9dd): Standard list rules and section dividers.
• Border Light (#e5e7eb): Secondary divider and utility rule.

Semantic

• Focus Blue (#4c6ee6): Keyboard focus and ring color.
• Form Focus Violet (#9b60aa): Focus border for text inputs.
• Error Red (#b30000): Extracted ring/shadow color associated with validation-like states.

Gradient System

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.

Typography

Font Family

• Display: CohereText, falling back to Space Grotesk, Inter, ui-sans-serif, and system-ui.
• Body/UI: Unica77 Cohere Web, falling back to Inter, Arial, ui-sans-serif, and system-ui.
• Technical labels: CohereMono, falling back to Arial, ui-sans-serif, and system-ui.
• Icons: Cohere uses custom icon fonts and thin-line geometric illustrations.

Hierarchy

Principles

• Use massive type sparingly; Cohere pages often have one oversized headline and then settle into restrained 16px-24px UI copy.
• Keep display type tight. Hero copy should feel compact and carved, not airy.
• Avoid heavy bold weights. Size, spacing, and surface contrast do most of the hierarchy work.
• Use uppercase mono labels for category and system markers, especially on product and research pages.
• Editorial pages can use coral chips and blue links, but the base typography remains black and measured.

Layout

Spacing System

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.

Grid & Container

• Global nav uses a three-zone layout: logo left, menu centered, sign-in/CTA right.
• Home hero is centered text above a two-card media composition: a wide product mockup card beside a narrower photography card.
• Feature sections commonly use 3-column cards on desktop.
• Product pages alternate centered hero blocks, trust-logo strips, large single-feature bands, and 2- or 3-column card grids.
• Research pages use full-width lists with date and chip columns instead of decorative cards.
• Forms use two-column input rows inside a rounded white card on dark or stone section backgrounds.

Whitespace Philosophy

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.

Elevation & Depth

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

Shapes

Radius Scale

Image Treatment

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.

Components

button-primary

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.

button-secondary

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.

button-pill-outline

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

announcement-bar

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.

hero-photo-card

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.

agent-console-card

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.

trust-logo-strip

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.

capability-card

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.

dark-feature-band

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.

product-card

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.

blog-filter-chip

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.

research-table

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.

contact-form-card

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.

footer-newsletter

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.

Do's and Don'ts

Do

• Use white canvas as the default surface; introduce dark green or navy as full-width product bands.
• Keep primary CTAs pill-shaped and near-black on light surfaces.
• Use 22px radius on major media cards and placeholders.
• Use coral for editorial taxonomy and small warm accents, not as the main CTA system.
• Use monochrome trust logos with wide spacing.
• Use thin-line geometric illustrations for research and capability icons.
• Let photography and product mockups carry color, while the UI shell stays restrained.

Don't

• Do not turn coral or blue into broad decorative surface colors.
• Do not add heavy drop shadows to cards.
• Do not make every section card-based; Cohere often uses unframed rows, rules, and open space.
• Do not use rounded cards below 8px for major media.
• Do not replace the display/body type split with one generic sans-serif voice.
• Do not render undocumented interaction variants in documentation or previews.
• Do not use saturated gradients as normal UI backgrounds; keep gradients media-led.

Responsive Behavior

Breakpoints

Touch Targets

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.

Collapsing Strategy

• Nav collapses from full horizontal links to a compact mobile menu.
• Hero media moves from split cards to stacked cards.
• Product and capability grids collapse from 3 columns to 2 and then 1.
• Form fields collapse from paired rows to a single column.
• Research rows preserve their rule-separated structure but stack metadata below titles on smaller widths.

Iteration Guide

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.

Known Gaps

• Exact proprietary font files are not bundled; use the documented fallbacks when implementing externally.
• Mobile screenshots were not regenerated in this public update, so mobile behavior is documented from the desktop system and existing responsive patterns.
• Some live pages lazy-load content blocks late; blank testimonial placeholders are documented as placeholder skeleton surfaces rather than filled testimonial cards.