# Cohere — Design System
> Cohere builds powerful models and AI solutions enabling enterprises to automate processes, empower employees, and turn fragmented data into actionable insights.
- **Canonical:** https://uiuxskills.com/library/cohere
- **Source:** https://cohere.com
- **Category:** AI & LLM Platforms
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-06-09T23:17:31.494Z

---

---
version: alpha
name: Cohere
description: Enterprise-grade AI platform for secure, customizable language models.
tone: Professional, authoritative, secure, and innovation-driven.
color-scheme: light
colors:
  primary: "#2E2E2E"
  surface: "#FFFFFF"
  surface-container: "#F5F5F5"
  on-surface: "#1A1A1A"
  on-primary: "#FFFFFF"
  error: "#D32F2F"
  success: "#388E3C"
  outline: "#E0E0E0"
  focus-ring: "#005FB8"
  surface-bright: "#FFFFFF"
typography:
  display-lg:
    fontFamily: Inter, sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: Inter, sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: Inter, sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: Inter, sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: Inter, sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: Inter, sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.875rem
  label-md:
    fontFamily: Inter, sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#000000"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
  card-elevated:
    backgroundColor: "{colors.surface-bright}"
    rounded: "{rounded.xl}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#000000"
  badge:
    backgroundColor: "{colors.surface-container}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FDECEA"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

Cohere presents a sophisticated, enterprise-focused visual identity that balances technical authority with clean, modern aesthetics. The brand utilizes a high-contrast palette of deep neutrals and stark whites to convey security, reliability, and professional clarity.

## Colors

The color strategy centers on a high-contrast, neutral-heavy palette designed to maintain focus on enterprise-grade content while providing clear semantic signals.

*   Primary (#2E2E2E): The dominant neutral used for structural elements, typography, and primary call-to-actions.
*   Surface (inferred) (#FFFFFF): The primary background color for clean content presentation.
*   Surface-container (inferred) (#F5F5F5): A subtle background color used for section differentiation and grouping.
*   On-surface (inferred) (#1A1A1A): High-contrast text color ensuring maximum readability.
*   On-primary (inferred) (#FFFFFF): The text color for primary buttons.
*   Error (inferred) (#D32F2F): Semantic red reserved for critical error states.
*   Success (inferred) (#388E3C): Semantic green for positive status indicators.
*   Outline (inferred) (#E0E0E0): A subtle border color for dividers and component boundaries.
*   Focus-ring (inferred) (#005FB8): The primary accessible indicator for interactive focus states.
*   Surface-bright (inferred) (#FFFFFF): A highlight surface used specifically for cards.

## Typography

Typography is set in Inter, a clean sans-serif typeface that supports the brand's professional and authoritative tone.

*   Display-lg (inferred): Used exclusively for high-impact hero headlines.
*   Headline-md (inferred): Used for card titles and section headers.
*   Body-md (inferred): Standard body copy for long-form content.
*   Label-md (inferred): Used for primary button labels and navigation.
*   Label-sm (inferred): Small UI labels and secondary metadata.

## Layout

The layout utilizes a clean, grid-based structure with generous whitespace to emphasize content. The page pattern follows a logical flow: `nav` → `hero` → `social-proof` → `features` → `footer`. The hero composition features a centered headline and subhead with a primary CTA, often supported by high-impact imagery. The site is fully responsive, with navigation collapsing into a mobile-friendly menu on smaller viewports. Spacing is governed by a scale where `spacing.md` (16px) is the standard between content blocks, and `spacing.2xl` (48px) is reserved for major section margins.

## Elevation & Depth

Depth is conveyed through subtle, multi-layered shadows on interactive cards and navigation elements, providing a clear visual hierarchy against the light background. These values are inferred based on standard enterprise design patterns.

*   Elevation.sm: Used for subtle card lift.
*   Elevation.md: Used for dropdowns, popovers, and interactive menus.
*   Elevation.lg: Used for modal or drawer overlays to separate them from the main content.

## Shapes

The design language employs a rounded-corner philosophy to soften the technical nature of the AI platform while maintaining professional sharpness. 

The `rounded.xl` (16px) token is the primary choice for cards and containers, providing a modern, approachable feel. Other tokens in the scale, such as `rounded.md` (8px) for inputs and `rounded.sm` (4px) for small UI elements, are used to maintain consistency across the component library.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
The primary button uses `{colors.primary}` with `{typography.label-md}`, designed for high visibility. Secondary buttons are transparent with a `{colors.primary}` border, maintaining a clean, professional aesthetic.

### Card
Cards utilize `{colors.surface-bright}` and `{rounded.xl}`, creating a clean, elevated container for content. They are designed to be used in grid layouts to group related information.

### Input Field
Input fields feature `{rounded.md}` and a `{colors.outline}` border, which transitions to `{colors.focus-ring}` upon interaction to ensure accessibility.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs | Use `{colors.error}` for non-destructive actions |
| Apply `{rounded.xl}` to all card components | Mix too many border radii outside the defined scale |
| Use `{typography.display-lg}` for hero headlines | Use `{typography.body-sm}` for navigation labels |
| Maintain `{spacing.md}` between content blocks | Overcrowd the layout; ignore `{spacing.2xl}` margins |
| Use `{colors.outline}` for subtle dividers | Use low-contrast text on `{colors.surface-container}` |
| Ensure clear `{colors.focus-ring}` on all inputs | Apply shadows to flat, non-interactive elements |
| Use `{input-field-focus}` for active form states | Use `{colors.primary}` for secondary button backgrounds |
| Use `{badge-success}` for positive status updates | Use generic colors for semantic success states |

## Content Style

CTA style is imperative and action-oriented, utilizing verbs like "Request a demo" or "Learn more" to drive user engagement.

Heading tone is direct and benefit-driven, emphasizing themes of ownership, security, and technical capability.

Copy density is kept concise and scannable, prioritizing short paragraphs and clear, descriptive headings to maintain a professional rhythm.

## Imagery & Icons

Imagery employs a mixed treatment, combining high-quality professional photography with clean, vector-based logos. Visual assets are consistently framed within rounded containers to align with the overall shape language. Icons should remain minimal and functional, deferring to the brand's established vector-based asset library.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Cohere, a minimal enterprise AI platform. Match its professional, high-contrast, and authoritative tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{typography.display-lg}`, `{rounded.xl}` — never as hardcoded hex, px, or font-size values.
2. Respect the components block exactly: buttons, cards, inputs, badges, and dividers have defined shapes and states. Do not invent variants the spec does not list.
3. Follow the Layout section for page flow (`nav` → `hero` → `social-proof` → `features` → `footer`), spacing rhythm (`{spacing.md}` between blocks, `{spacing.2xl}` for section margins), and responsive behavior (mobile-first, collapse nav at smaller viewports).
4. Apply the Elevation & Depth rules: `{elevation.sm}` for cards, `{elevation.md}` for dropdowns and popovers, `{elevation.lg}` for modals — never apply shadows to flat non-interactive elements.
5. Treat the Do's and Don'ts table as authoritative. Surface any conflict with a user request before proceeding.

## Output contract

**Must:**
- Use token names for all colors, typography, spacing, radii, and elevation.
- Include hover, focus, and disabled states for every interactive component where the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{rounded.xl}` to cards, `{rounded.md}` to inputs, `{rounded.full}` to badges.
- Use `{colors.focus-ring}` as the visible focus indicator on all interactive elements.
- Match CTA copy style: imperative, action-oriented, concise.

**Must NOT:**
- Invent colors, font sizes, radii, or spacing values outside the defined scales.
- Apply shadows to flat or non-interactive elements.
- Use `{colors.error}` for non-destructive actions or `{colors.primary}` as a secondary button background.
- Rewrite, replace, or invent page copy, headings, labels, or navigation items.
- Alter information architecture as a side effect of token application.

## When in doubt
- If a value is not defined in the spec, ask the user before inventing one.
- Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook) exists, those values override the spec.
- For ambiguous backgrounds, default to `{colors.surface}`; for section grouping, use `{colors.surface-container}`.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px.
- Prefer composing existing spec components over introducing new tokens or variants.