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

Default input
Focused input
Select
Textarea How do you plan to use AI?

## 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

Name | Width | Key Changes
--- | --- | ---
Small Mobile | <425px | Single-column cards, compact nav, reduced hero scale.
Mobile | 425-640px | Hero media stacks, form rows stack.
Tablet | 768-1024px | Two-column cards begin, nav spacing tightens.
Desktop | 1024-1440px | Full nav, 3-column grids, split hero compositions.
Large Desktop | 1440-2560px | Wide 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.