Cohere

Overview

Cohere is an enterprise AI platform that empowers organizations to build, deploy, and own customizable language models with complete data privacy and infrastructure control. The design system embodies 'Architectural Minimalism'—a philosophy that prioritizes clarity, precision, and functional elegance. The visual language combines a clean white canvas (#ffffff) with deep charcoal accents (#17171c) and vibrant accent colors (electric blue #4c6ee6 and coral #ff7759) to create an interface that feels both trustworthy and forward-thinking. The aesthetic evokes a sense of control and transparency: users feel they own their AI, not the reverse.

Cohere's tone is direct, technical, and empowering—never patronizing or breathless. The vocabulary emphasizes ownership ('own your AI'), infrastructure, and customization. Brand personality is confident but not arrogant: Cohere speaks to enterprise decision-makers who value substance over hype. Example sentence in brand voice: 'Deploy your model in your infrastructure, keep your data yours, and scale without compromise.'

Colors

The color system is built on a foundation of high-contrast, accessible neutrals paired with purposeful accent colors. Primary (#17171c, a near-black) serves as the dominant text and interactive element color, establishing authority and readability at 16px body text (WCAG AAA compliant at 21:1 contrast ratio against white). Secondary (#4c6ee6, electric blue) is the brand's signature accent—used exclusively for interactive states, focus rings (box-shadow: 0 0 0 3px rgba(76, 110, 230, 0.1)), and call-to-action affordances. Tertiary (#ff7759, coral) is reserved for alerts, error states, and high-priority actions, creating visual urgency without aggression.

The surface stack is deliberately minimal: surface (#ffffff) is the default canvas, surface-container-low (#f2f2f2) is used for subtle bac

Typography

The type system uses a three-family stack: CohereText (custom serif-influenced body font) for body copy and UI labels, CohereHeadline (geometric sans-serif) for headlines and display text, and Unica77 Cohere Web (humanist sans-serif) as the primary UI font. Display (96px, fontWeight 400, lineHeight 104px, letterSpacing -0.04em) is reserved for hero headlines like 'Own your AI' and sets the tone for the entire page. Headline-lg (48px, fontWeight 500) is used for section titles; headline-md (32px, fontWeight 500) for subsections. Body-lg (18px, fontWeight 400, lineHeight 28px) is used for introductory paragraphs and feature descriptions, while body-md (16px, lineHeight 24px) is the standard for UI labels and form text. Label-md (14px, fontWeight 500, letterSpacing 0.01em) is applied to butto

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, centered with equal margins on desktop (40px gutter on each side). The page rhythm is built on the spacing scale: lg (40px) separates major sections, md (24px) separates cards and component groups, and sm (12px) separates inline elements. Hero sections use full-width backgrounds with centered content constrained to 1280px; feature cards are arranged in a 3-column grid on desktop, collapsing to 2 columns at 768px and 1 column below 640px. White-space is generous—minimum 40px vertical spacing between sections—to avoid cognitive overload and emphasize the 'clarity' brand value. The container-max of 1280px ensures readability: at this width, body-lg text (18px) achieves approximately 65–75 characters per line, th

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not through color darkening or glassmorphism. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for hover states on flat elements, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and dropdowns, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and floating panels. Cards at rest have no shadow; on hover, they transition to md shadow over 200ms (transition: box-shadow 200ms ease-out). Interactive elements like buttons use no shadow at rest but gain a subtle md shadow on focus (via :focus-visible). The shadow s

Shapes

The shape philosophy is 'Functional Geometry'—rounded corners are used strategically to soften hard edges without sacrificing precision. Buttons and primary CTAs use full (9999px) border-radius, creating pill-shaped affordances that feel inviting and modern. Cards and containers use lg (20px) or xl (22px) radius, balancing approachability with formality. Form inputs use DEFAULT (8px) radius, maintaining visual distinction from buttons while remaining friendly. Badges and small UI elements use full (9999px) to emphasize their secondary role. The rationale: full-radius buttons (48px height, 12px

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses {colors.primary} (#17171c) background with {colors.on-primary} (#ffffff) text, rounded to full (9999px), with padding 12px 24px and height 48px. On hover, the background transitions to {colors.primary-fixed} (#353535) over 150ms (transition: background-color 150ms ease-out). On active/pressed, it darkens further to {colors.primary-fixed-dim} (#2e2e2e). Button-secondary has a transparent background with a 1px border in {colors.outline} (#9b9b9b) and text in {colors.primary}; on hover, the background becomes {colors.surface-container-high} (#e8e8e8). Both button variants use label-md typography (14px, fontWeight 500, letterSpacing 0.01em) and must have a minimum touch target of 48px height for accessibility.

Do's and Don'ts

**Do**

• Do use {colors.primary} (#17171c) for all primary CTAs and interactive states; it's the brand's most recognizable color and ensures accessibility.
• Do apply {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)) to cards at rest and transition to {elevation.lg} on hover for clear depth feedback.
• Do maintain minimum 40px vertical spacing (lg token) between major sections to preserve the 'clarity' brand value and reduce cognitive load.
• Do use full (9999px) border-radius exclusively for buttons and badges; never apply it to cards or containers.
• Do apply text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) to body text overlaid on images or busy backgrounds to maintain WCAG AAA contrast.

**Don't**

• Don't use {colors.secondary} (#4c6ee6) for body text or large text blocks; it's reserved for interactive elements and focus states only.
• Don't apply shadows to buttons or form inputs at rest; reserve shadows for hover/focus states and elevated containers.
• Don't mix border-radius values within a single component family (e.g., don't use both 8px and 12px on different buttons).
• Don't use near-black (#17171c) as a background color; it's strictly a text and interactive element color. Use {colors.surface} (#ffffff) or {colors.surface-container-low} (#f2f2f2) for backgrounds.
• Don't apply opacity changes to primary brand colors; instead, use the fixed and fixed-dim variants ({colors.primary-fixed}, {colors.primary-fixed-dim}) for state changes.