Palette

1. Color Palette

Cohere's UI shell is mostly white, near-black, and cool rules. Saturated color appears through dark product fields, coral editorial controls, action blue links, and media-led imagery.

Brand & Accent

Near-Black Primary#17171cPrimary CTAs, footer, deep UI cards.
Deep Enterprise Green#003c33Product hero bands and dark capability panels.
Dark Navy#071829Security and financial-services bands.
Action Blue#1863dcEditorial links and pagination accents.
Coral#ff7759Blog chips, taxonomy outlines, warm markers.

Surface & Text

Canvas#ffffffDominant page and card background.
Soft Stone#eeece7Product cards and warm neutral blocks.
Ink#212121Default body text.
Hairline#d9d9ddRules and dividers.
Muted Slate#93939fMetadata and footer links.
Type

2. Typography Scale

The preview uses Space Grotesk and Space Mono as local substitutes while preserving Cohere's extracted scale, weights, line heights, and tracking.

Hero Display
hero-display - CohereText - 96px / 400 / 1 / -1.92px
Product Display
product-display - CohereText - 72px / 400 / 1 / -1.44px
Section Heading
section-heading - 48px / 400 / 1.2 / -0.48px
Card Heading
card-heading - 32px / 400 / 1.2 / -0.32px
Feature Heading
feature-heading - 24px / 400 / 1.3 / 0
Body Large
body-large - 18px / 400 / 1.4 / 0
Body and UI
body - 16px / 400 / 1.5 / 0
Button Label
button - 14px / 500 / 1.71 / 0
Mono Label
mono-label - 14px / 400 / 1.4 / 0.28px
Components

3. Button Variants

button-primary - #17171c, white text, 32px radius.
button-secondary - transparent text action with underline.
button-pill-outline - research and taxonomy filter pill.
AllProductResearch
blog-filter-chip - oversized coral editorial taxonomy.

4. Card Examples

hero-photo-card

Rounded media panel with product or photography-led color.

product-card

A warm stone product summary with pill CTA and rule-separated bullet details.

Supports product families, model cards, and capability summaries.

CAgent Console
Ready
agent-console-card - dark product mockup panel.

5. Form Elements

Component Library

announcement-bar
Cohere and Aleph Alpha join forces. Learn more
trust-logo-strip
ORACLE TD SAP RBC
capability-card

Security

Thin-line illustration slot, heading, body, and text link.

dark-feature-band

Discover, Create, Automate

Discover
Create
Automate
research-table
Agents Explore but Agents IgnoreAgentsApr 19, 2026
contact-form-card




footer-newsletter

AI moves fast

We'll keep you up to date with the latest.

Spacing

6. Spacing Scale

2
6
8
12
16
24
32
80
Radius

7. Border Radius Scale

xs
4px
sm
8px
md
16px
lg
22px
xl
30px
pill
32px
Depth

8. Elevation / Depth

Flat white canvas
Bordered rule system
Dark product field
Media-led color
Responsive

9. Responsive Behavior

NameWidthKey Changes
Small Mobile<425pxSingle-column cards, compact nav, reduced hero scale.
Mobile425-640pxHero media stacks, form rows stack.
Tablet768-1024pxTwo-column cards begin, nav spacing tightens.
Desktop1024-1440pxFull nav, 3-column grids, split hero compositions.
Large Desktop1440-2560pxWide containers and large empty vertical intervals.

Viewport Ladder

425
640
768
1024
1440+
Touch Targets: Primary CTAs and pills use generous vertical padding; taxonomy chips are intentionally large on editorial pages.
Collapsing Strategy: Nav compresses, split media stacks, 3-column product grids collapse, and research metadata stacks below titles.
Prompt Guide

10. Agent Prompt Guide - Quick Color Reference

PrimaryNear-Black Primary#17171c
Dark bandDeep Enterprise Green#003c33
CanvasCanvas White#ffffff
Stone cardSoft Stone#eeece7
EditorialCoral#ff7759
LinkAction Blue#1863dc
Use white canvas or a full dark band first. Keep CTAs pill-shaped, media cards rounded, and editorial taxonomy coral. No undocumented interaction variants are rendered in this preview.