# Cohere — Marketing Site Design Spec

> Source: cohere.com (live DOM, computed styles), 2026-07-16 (desktop 1512px).
> Coverage: home / marketing. Dashboard: pending login (`needs-dashboard`). Responsive: breakpoints from tokens only; mobile rendering not verified.

## 1. Visual Theme & Atmosphere

Quiet, editorial enterprise-AI brand: a warm light-gray canvas set with an enormous CohereText display headline at a calm regular weight (400), so the type reads like a printed magazine cover rather than a SaaS hero. The chrome is near-monochrome — near-black text on warm gray, dark fully-rounded pill buttons — while colour is rationed to the brand's signature quartet (coral, lavender, cobalt, forest-green) carried by the multi-dot logo and by iridescent liquid-chrome product imagery. Structure is spacious and grid-driven: large product cards with rounded corners and soft shadows float over the calm background, each showing a metallic render plus a small "READY" status chip. Nothing shouts; restraint and scale do the work. Feels: calm, editorial, premium, enterprise.

## 2. Color Palette & Roles

### Surfaces
| Token | Hex | Role / usage |
|---|---|---|
| canvas | `#f2f2f2` | Warm light-gray page background (often `#f2f2f2e6`) |
| white | `#ffffff` | Cards, raised panels |
| cream | `#f0eee9` | Warm inset sections |
| lavender-bg | `#f0dff3` | Pale lavender feature panels |
| mint-bg | `#e5f4ef` | Pale green feature panels |
| ink-panel | `#17171c` | Dark buttons, dark cards |

### Text
| Token | Hex | Role / usage |
|---|---|---|
| text | `#212121` | Primary text, headings |
| ink | `#17171c` | Darkest headings / dark surfaces |
| black | `#000000` | Body copy |
| muted | `#75758a` | Secondary text |
| muted-2 | `#616161` | Tertiary text |
| faint | `#a4a4a4` / `#93939f` | Captions, placeholder |

### Accent (brand quartet)
| Token | Hex | Role / usage |
|---|---|---|
| coral | `#ff7759` | Signature accent, logo dot, highlights |
| lavender | `#d18ee2` / `#9b60aa` | Logo dot, lavender panels |
| cobalt | `#4c6ee6` | Logo dot, blue accents/links |
| green | `#00754e` | Logo dot, semantic/success |

### Borders
| Token | Hex | Role / usage |
|---|---|---|
| border | `#f2f2f2` | Subtle divider |
| border-2 | `#d9d9dd` | Control/card border |
| border-black | `#000000` | Emphasis border |

Rule: UI chrome is near-black on warm gray with dark pill buttons; the coral/lavender/cobalt/green quartet appears only in the logo, small chips and iridescent imagery — never as flat UI fills.

## 3. Typography Rules

- Display: `CohereText, "Space Grotesk", Inter, sans-serif` — huge, weight 400, tight tracking.
- UI/Body: `"Unica77 Cohere Web", Inter, Arial, sans-serif`.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 96 / 96 | 400 | -1.92px (-2%) |
| Feature (h3) | 48 / 58 | 400 | -0.48px |
| Section (h2) | 32 / 38 | 400 | -0.32px |
| Lead / emphasis | 18 / 24 | 700 | normal, Unica77 |
| Body | 16 / 24 | 400 | normal, Unica77 |
| UI / button | 14 | 500 | normal, Unica77 |

Patterns: display is set very large at a regular 400 weight with tight negative tracking — the editorial signature. Weight stays light; emphasis comes from size, not boldness (only lead text hits 700).

## 4. Component Stylings

### Buttons
- **Primary (dark pill)**: bg `#17171c`, text `#ffffff`, 1px `#000000` border, radius `32px`/full pill, h `46px`, Unica77 500 14px. Hover: subtle lighten.
- **Ghost / nav link**: transparent, text `#212121`, no radius, 14px 500 (nav Sign in).
- **Text button**: `#212121`, 14px 500, underline on inline links.

### Chips / status
- Small "READY" status pills with a colored dot (coral/green), on dark product cards; pale rounded chips elsewhere. Radius ~`8–16px`.

### Inputs
- Not prominently captured on marketing; assume warm-white field with `#d9d9dd` border. Focus ring not captured.

### Cards / panels
- Large product cards: radius `22px`, soft shadow `0 32px 68px rgba(0,0,0,.3)`, holding full-bleed iridescent liquid-chrome imagery with an inset dark label card and status chips. Pale feature panels use lavender `#f0dff3` / mint `#e5f4ef` / cream `#f0eee9` backgrounds.

### Nav
- Transparent over the canvas: multi-dot Cohere logo left, center links (Products / Solutions / Research / Resources / Company), right Sign in (text) + dark Contact us pill.

## 5. Layout Principles

- Max content width ~1280px; generous margins and whitespace.
- Hero anatomy: huge 96px CohereText headline ("Own your AI") on the calm canvas, minimal supporting copy.
- Two-column card grid of large rounded product cards with iridescent imagery.
- Base spacing generous; strong vertical rhythm; sections alternate calm gray with pale lavender/mint/cream panels.

## 6. Depth & Elevation

- Radii: `2px`, `4px`, `8px`, `16px`, `22px` (product cards), `9999px` (full-pill buttons).
- Control height: buttons `46px`.
- Elevation: cards float with a soft large shadow `0 32px 68px rgba(0,0,0,.3)`; a subtle top glow `0 -1px 10px rgba(172,171,171,.3)` on some elements. Otherwise flat.

## 7. Motion

- Transitions favor opacity fades: `opacity 0.5s` and `0.3s cubic-bezier(0.4,0,0.2,1)`; interactive `transform 0.15s`.
- Ease is the standard `cubic-bezier(0.4,0,0.2,1)`. No heavy scroll library detected; imagery animates subtly inside cards.

## 8. Backgrounds, Effects & WebGL

- Signature visual is iridescent / liquid-chrome / oil-slick imagery (metallic renders with grainy rainbow sheen) inside product cards — the main source of colour.
- Canvas itself is flat warm gray; pale lavender/mint/cream section washes. No WebGL hero confirmed; imagery appears pre-rendered.
- Soft grain over the metallic imagery. No background video captured.

## 9. Do's and Don'ts

### Do
- Keep the canvas a warm light gray (`#f2f2f2`) with near-black text (`#212121`) and dark fully-rounded pill buttons.
- Set the hero in CohereText at a large size and a calm 400 weight with tight negative tracking — scale, not boldness.
- Ration the coral/lavender/cobalt/green quartet to the logo, small chips and iridescent imagery.
- Use large rounded (`22px`) product cards with soft `0 32px 68px rgba(0,0,0,.3)` shadows over the calm background.
- Use pale lavender/mint/cream panels to segment sections.
- Fade elements in with opacity transitions (0.3–0.5s ease).

### Don't
- Don't add heavy/bold display weights — the editorial look depends on 400-weight type at large scale.
- Don't use the brand quartet as flat UI fills or a second button colour.
- Don't switch to a stark white or dark overall canvas — it is warm gray.
- Don't square off the buttons; primary CTAs are full pills.
- Don't clutter with shadows on flat panels; reserve the big shadow for floating product cards.

## 10. Responsive Behavior

- Fluid type; nav collapses to a menu on mobile (markup present). Mobile rendering not verified — captured at desktop 1512px only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#f2f2f2` · Text `#212121` · Muted `#75758a` · Border `#d9d9dd` · Accent coral `#ff7759` (quartet: lavender `#d18ee2`, cobalt `#4c6ee6`, green `#00754e`)
- Fonts: CohereText 400 (display, -1.92px) / Unica77 Cohere Web (UI) · Body 16px · Radius 22px card / full-pill button · Control height 46px
- Focus: not captured · Hover: subtle lighten + opacity fades 0.3–0.5s cubic-bezier(0.4,0,0.2,1)

<cohere_design_language>
Use the Cohere design language: a calm, editorial enterprise-AI brand on a warm light-gray canvas #f2f2f2 with near-black text #212121 and dark fully-rounded pill buttons (#17171c, full 9999px radius, 46px tall, Unica77 500). The hero is an enormous CohereText display headline set at a calm regular 400 weight with tight negative tracking (96px at -1.92px) — the look depends on scale, not boldness; UI and body use Unica77 Cohere Web at 400 with muted #75758a secondary text. Colour is rationed to the brand quartet — coral #ff7759, lavender #d18ee2, cobalt #4c6ee6, forest-green #00754e — appearing only in the multi-dot logo, small status chips and signature iridescent liquid-chrome product imagery, never as flat UI fills. Large product cards use 22px radius and float on a soft 0 32px 68px rgba(0,0,0,.3) shadow, and sections alternate the gray canvas with pale lavender #f0dff3, mint #e5f4ef and cream #f0eee9 washes. Motion favours opacity fades (0.3-0.5s cubic-bezier(0.4,0,0.2,1)) with 0.15s transforms. Feels: calm, editorial, premium, enterprise. Avoid: heavy/bold display weights, using the quartet as flat UI fills or a second button colour, a stark-white or dark overall canvas, squared-off buttons, or shadows on flat panels.
</cohere_design_language>