A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
Cohere, in one page
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.
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.
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Cohere design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- primary: #17171c
- cohere-black: #000000
- ink: #212121
- deep-green: #003c33
- dark-navy: #071829
- canvas: #ffffff
- soft-stone: #eeece7
- pale-green: #edfce9
- pale-blue: #f1f5ff
- hairline: #d9d9dd
Type:
- families: CohereText, Unica77 Cohere Web, CohereMono, Space Grotesk
- scale: 12, 14, 16, 18, 24, 32, 48, 60, 72
- weights: 400, 500
Shape:
- radius: 4, 8, 16, 22, 30, 32
Spacing: 2, 6, 8, 12, 16, 24, 32, 80
Rules:
- 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.
Avoid:
- 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.
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
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.
Type scaleRead the full spec
Font Family
- Display:
CohereText, falling back toSpace Grotesk,Inter,ui-sans-serif, andsystem-ui. - Body/UI:
Unica77 Cohere Web, falling back toInter,Arial,ui-sans-serif, andsystem-ui. - Technical labels:
CohereMono, falling back toArial,ui-sans-serif, andsystem-ui. - Icons: Cohere uses custom icon fonts and thin-line geometric illustrations.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Hero Display | CohereText | 96px | 400 | 1.00 | -1.92px | Home page declaration scale. |
| Product Display | CohereText | 72px | 400 | 1.00 | -1.44px | Product and research hero headlines. |
| Section Display | Unica77 | 60px | 400 | 1.00 | -1.2px | Large product-page headings. |
| Section Heading | Unica77 | 48px | 400 | 1.20 | -0.48px | Split hero and CTA headings. |
| Card Heading | Unica77 | 32px | 400 | 1.20 | -0.32px | Feature card and list section titles. |
| Feature Heading | Unica77 | 24px | 400 | 1.30 | 0 | Cards, filters, and article titles. |
| Body Large | Unica77 | 18px | 400 | 1.40 | 0 | Lead text and larger paragraphs. |
| Body | Unica77 | 16px | 400 | 1.50 | 0 | Default copy and link text. |
| Button | Unica77 | 14px | 500 | 1.71 | 0 | Compact CTA labels. |
| Caption | Unica77 | 14px | 400 | 1.40 | 0 | Metadata and small explanatory text. |
| Mono Label | CohereMono | 14px | 400 | 1.40 | 0.28px | Uppercase technical labels. |
| Micro | Unica77 | 12px | 400 | 1.40 | 0 | Footer, nav microcopy, and small links. |
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.
Components and layoutRead the full spec
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.
Responsive behaviourRead the full spec
Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Small Mobile | <425px | Single-column cards, compact nav, reduced hero headline scale |
| Mobile | 425-640px | Hero media stacks, card grids become one column, form rows stack |
| Large Mobile | 640-768px | Wider one-column layouts with larger media cards |
| Tablet | 768-1024px | Two-column cards begin, nav spacing tightens |
| Desktop | 1024-1440px | Full nav, 3-column card grids, split hero compositions |
| Large Desktop | 1440-2560px | Wide containers and large empty vertical intervals |
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.
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-cohere {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #212121;
--heading-color: #212121;
--link-color: #17171c;
--link-hover-color: #000000;
--border-color: #d7d7d7;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(33,33,33,0.06);
--card-hover-shadow: 0 6px 18px rgba(33,33,33,0.12);
--header-bg: #212121;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #6f6f6f;
--button-bg: #17171c;
--button-text-color: #ffffff;
--button-hover-bg: #000000;
--button-border: none;
--button-border-radius: 22px;
--button-secondary-bg: #f2f2f2;
--button-secondary-text-color: #212121;
--button-secondary-hover-bg: #e4e4e4;
--button-secondary-border: 1px solid #d7d7d7;
--prompt-bg: #f4f4f4;
--prompt-text-color: #212121;
--base-font: var(--font-mono);
--heading-font: var(--font-helvetica);
--card-border-radius: 22px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
volt/design-md/cohere/DESIGN.md· 19.6 KB- Repository
- VoltAgent/awesome-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.