Calm editorial enterprise-AI brand: a warm light-gray canvas with an enormous CohereText headline set at a regular 400 weight, dark fully-rounded pill buttons, near-monochrome chrome, and a rationed coral/lavender/cobalt/green brand quartet carried only by the multi-dot logo and iridescent liquid-chrome product imagery.
Browse Cohere in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
| 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 |
| 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 |
| 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 |
| 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.
CohereText, "Space Grotesk", Inter, sans-serif — huge, weight 400, tight tracking."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).
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.