Cohere

Language models and AI tools built for enterprise work

The style

A calm, grown-up AI language. Very large regular-weight sans headlines, set tight with leading of 1, sit on white and warm stone panels. Actions are near-black or outlined pills, deep moss greens anchor the darker sections, and everything else is quiet greys. Serious and enterprise-ready without feeling heavy.

Colours

Brand#355143
Buttons#141519
Background#fdfdfe
Text#212121

Click a colour to copy it.

Fonts

Inter Tight

For headings

Inter

For everything else

Free fonts that look like Cohere’s own, so you can use them anywhere.

Buttons

Get startedContinueCancel

44px pills: #17171C with white label for the main action; white with a 1px #2E2E2E outline for the second.

Use this style in your project

Pick the way that suits you. The first one needs no design or coding knowledge.

With an AI tool

Your AI tool builds the page for you, in Cohere’s style.

1. What are you making? (optional)

2. Open it in

For developers

Ready-made CSS variables, a Tailwind theme and design tokens, with light and dark modes.

See the code

Make it your own

Change the colours, fonts and shapes, and see the result straight away before you use it.

Customise

Files

The code, ready to copy

Every file says where the style came from.

tokens.css — Colours, fonts and sizes as CSS variables, with light and dark modes.

/* Moss and Stone — design tokens generated by Markdown */
/* Derived from an analysis of cohere.com; how different from the source: a little different (30/100). */
/* Inspired by, not a copy of, the source. Adapt before commercial use; no logos, imagery, copy or proprietary fonts are included. */

:root {
  color-scheme: light;
  --color-background: #fdfdfe;
  --color-surface: #f0eee9;
  --color-surface-muted: #f2f2f3;
  --color-text: #212121;
  --color-text-muted: #707070;
  --color-border: #dededf;
  --color-primary: #141519;
  --color-on-primary: #ffffff;
  --color-brand: #355143;
  --color-on-brand: #ffffff;
  --color-accent: #ac6e53;
  --color-success: #2f7e54;
  --color-warning: #9c691c;
  --color-danger: #a3443e;
  --font-display: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --text-display: 2.8125rem;
  --text-display-line-height: 1;
  --text-display-weight: 400;
  --text-display-tracking: -0.017em;
  --text-h1: 2.3125rem;
  --text-h1-line-height: 1.03;
  --text-h1-weight: 400;
  --text-h1-tracking: -0.014em;
  --text-h2: 1.875rem;
  --text-h2-line-height: 1.06;
  --text-h2-weight: 400;
  --text-h2-tracking: -0.01em;
  --text-h3: 1.5rem;
  --text-h3-line-height: 1.15;
  --text-h3-weight: 400;
  --text-h3-tracking: -0.007em;
  --text-lead: 1.25rem;
  --text-lead-line-height: 1.5;
  --text-lead-weight: 400;
  --text-lead-tracking: -0.005em;
  --text-body: 1rem;
  --text-body-line-height: 1.6;
  --text-body-weight: 400;
  --text-body-tracking: 0em;
  --text-small: 0.8125rem;
  --text-small-line-height: 1.5;
  --text-small-weight: 400;
  --text-small-tracking: 0.005em;
  --text-caption: 0.6875rem;
  --text-caption-line-height: 1.4;
  --text-caption-weight: 400;
  --text-caption-tracking: 0.01em;
  --text-label: 0.8125rem;
  --text-label-line-height: 1.3;
  --text-label-weight: 600;
  --text-label-tracking: 0.01em;
  --text-code: 0.875rem;
  --text-code-line-height: 1.55;
  --text-code-weight: 400;
  --text-code-tracking: 0em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 32px;
  --space-6: 40px;
  --space-7: 64px;
  --space-8: 80px;
  --space-9: 120px;
  --space-10: 160px;
  --radius-none: 0px;
  --radius-sm: 5px;
  --radius-md: 9px;
  --radius-lg: 14px;
  --radius-xl: 23px;
  --radius-full: 9999px;
  --border-width: 1.5px;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 18px 40px -12px rgb(0 0 0 / 0.18);
  --duration-fast: 80ms;
  --duration-base: 140ms;
  --duration-slow: 240ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --container: 1336px;
  --gutter: 24px;
  --button-radius: 9999px;
  --button-padding: 8px 16px;
  --input-radius: 9px;
  --input-height: 48px;
  --card-radius: 22px;
  --card-padding: 32px;
  --badge-radius: 9999px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-background: #101016;
    --color-surface: #1c1c22;
    --color-surface-muted: #212127;
    --color-text: #eaeaf0;
    --color-text-muted: #97979d;
    --color-border: #3c3c42;
    --color-primary: #9398a9;
    --color-on-primary: #141210;
    --color-brand: #355143;
    --color-on-brand: #ffffff;
    --color-accent: #c0917c;
    --color-success: #72ca9b;
    --color-warning: #e0a752;
    --color-danger: #cd7f7a;
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-background: #101016;
  --color-surface: #1c1c22;
  --color-surface-muted: #212127;
  --color-text: #eaeaf0;
  --color-text-muted: #97979d;
  --color-border: #3c3c42;
  --color-primary: #9398a9;
  --color-on-primary: #141210;
  --color-brand: #355143;
  --color-on-brand: #ffffff;
  --color-accent: #c0917c;
  --color-success: #72ca9b;
  --color-warning: #e0a752;
  --color-danger: #cd7f7a;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }
}

See every detail

Buttons

Inputs

Email address

Badges

New ActivePendingOverdue

Project

Quarterly field notes

Draft

A card groups one idea: a title, one line of support and a clear next step.

Updated 2h agoOpen project

Weekly digest is ready

Three new comments and one approval.

npm i @brandless/ui

Colour

Semantic roles for light mode. Contrast is checked against WCAG AA as you edit.

Background
Surface
Surface muted
AA 15.8:1
Text
AA 4.9:1
Text muted
Border
AA 17.9:1
Primary
AA 18.2:1
On primary
Brand
AA 8.7:1
On brand
AA 4.0:1
Accent
AA 4.9:1
Success
AA 4.6:1
Warning
AA 6.0:1
Danger

Typography

Base 16px on a 1.232 modular scale. Only open-licence fonts are recommended.

display

Inter Tight

Open alternative to CohereText

body

Inter

Open alternative to Unica77

mono

Ag
Geist Mono

Open alternative to CohereMono

display · 45px / 1 · 400 · -0.017em
The quiet grammar of form
h1 · 37px / 1.03 · 400 · -0.014em
The quiet grammar of form
h2 · 30px / 1.06 · 400 · -0.01em
The quiet grammar of form
h3 · 24px / 1.15 · 400 · -0.007em
The quiet grammar of form
lead · 20px / 1.5 · 400 · -0.005em
Readable text sets the pace of an interface.
body · 16px / 1.6 · 400 · 0em
Readable text sets the pace of an interface.
small · 13px / 1.5 · 400 · 0.005em
Readable text sets the pace of an interface.
caption · 11px / 1.4 · 400 · 0.01em
Readable text sets the pace of an interface.
label · 13px / 1.3 · 600 · 0.01em
Readable text sets the pace of an interface.
code · 14px / 1.55 · 400 · 0em
const tokens = await load();

Spacing

A 8px base unit. Use the scale for padding, gaps and section rhythm.

4px
8px
12px
16px
32px
40px
64px
80px
120px
160px

Shape & surface

Mostly flat surfaces with a light shadow reserved for raised, interactive elements.

Radii

none
0px
sm
5px
md
9px
lg
14px
xl
23px
full
pill

Shadows & borders

shadow-sm

0 1px 2px rgb(0 0 0 / 0.05)

shadow-md

0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.04)

shadow-lg

0 18px 40px -12px rgb(0 0 0 / 0.18)

Borders: 1.5px defined · Surfaces: flat

Layout

1336px container · 12 columns · 24px gutters

Patterns

Wide single-column hero with generous vertical rhythm between sections.
Twelve-column grid; content blocks usually span 4, 6 or 8 columns.
Full-bleed bands for feature sections, inner content capped at the container.
Reading text limited to roughly 65–72 characters per line.

Responsive principles

Below md, grids collapse to a single column and side gutters drop to 16px.
Type steps above h2 scale down one step on small screens.
Navigation collapses to a disclosure menu below lg.
Touch targets stay at least 44×44px on every breakpoint.

Motion

Durations and easing curves. Previews respect your reduced-motion setting.

fast
80ms
base
140ms
slow
240ms

ease-standard
ease-enter
ease-exit

Principles

Motion is brisk and functional — it confirms, it doesn't perform.
Animate opacity and transform only; avoid animating layout.
Respect prefers-reduced-motion by replacing movement with instant state changes or fades.

Cohere, its logo and trademarks belong to their owner and are shown only to say where this style comes from. This is our own study of their public website — not made or endorsed by Cohere. Use your own words and images.

Save Manus to your collection
Sign in with Google to keep the sites you like in one place, on any device. It’s free.
We only use your name and email to save your collection. Privacy
You’ve saved 10 sites
Free accounts can keep 10. Go Pro to save as many as you like.
BillingYearly2 months free$50 / yearMonthly$5 / month
Cancel anytime from your account menu. Payments are handled by Stripe.
Add Manus to a folder
Group sites however you like — by project, client or mood.
New folder name
Manus
A general-purpose AI agent that carries tasks through to the end
Save Mercury to your collection
Sign in with Google to keep the sites you like in one place, on any device. It’s free.
We only use your name and email to save your collection. Privacy
You’ve saved 10 sites
Free accounts can keep 10. Go Pro to save as many as you like.
BillingYearly2 months free$50 / yearMonthly$5 / month
Cancel anytime from your account menu. Payments are handled by Stripe.
Add Mercury to a folder
Group sites however you like — by project, client or mood.
New folder name
Mercury
Business banking for startups and growing companies
Save Superpower to your collection
Sign in with Google to keep the sites you like in one place, on any device. It’s free.
We only use your name and email to save your collection. Privacy
You’ve saved 10 sites
Free accounts can keep 10. Go Pro to save as many as you like.
BillingYearly2 months free$50 / yearMonthly$5 / month
Cancel anytime from your account menu. Payments are handled by Stripe.
Add Superpower to a folder
Group sites however you like — by project, client or mood.
New folder name
Superpower
A health membership with 100+ lab tests a year

You’ve saved 10 sites

Cohere

Save Cohere to your collection

You’ve saved 10 sites

Add Cohere to a folder

The style

Colours

Fonts

Buttons

Use this style in your project

With an AI tool

For developers

Make it your own

The code, ready to copy

Quarterly field notes

Colour

Typography

Spacing

Shape & surface

Radii

Shadows & borders

Layout

Patterns

Responsive principles

Motion

Principles

Save Manus to your collection

You’ve saved 10 sites

Add Manus to a folder

Manus

Save Mercury to your collection

You’ve saved 10 sites

Add Mercury to a folder

Mercury

Save Superpower to your collection

You’ve saved 10 sites

Add Superpower to a folder

Superpower

You’ve saved 10 sites

The style

Colours

Fonts

Buttons

Use this style in your project

With an AI tool

For developers

Make it your own

Quarterly field notes

Radii

Shadows & borders

Patterns

Responsive principles

Principles

More like Cohere

Manus

Mercury

Superpower