Design System Inspiration of Cohere

1. Visual Theme & Atmosphere

Cohere's interface is a polished enterprise command deck — confident, clean, and designed to make AI feel like serious infrastructure rather than a consumer toy. The experience lives on a bright white canvas where content is organized into generously rounded cards (22px radius) that create an organic, cloud-like containment language. This is a site that speaks to CTOs and enterprise architects: professional without being cold, sophisticated without being intimidating.

The design language bridges two worlds with a dual-typeface system: CohereText, a custom display serif with tight tracking, gives headlines the gravitas of a technology manifesto, while Unica77 Cohere Web handles all body and UI text with geometric Swiss precision. This serif/sans pairing creates a "confident authority meets engineering clarity" personality that perfectly reflects an enterprise AI platform.

Color is used with extreme restraint — the interface is almost entirely black-and-white with cool gray borders (#d9d9dd, #e5e7eb). Purple-violet appears only in photographic hero bands, gradient sections, and the interactive blue (#1863dc) that signals hover and focus states. This chromatic restraint means that when color DOES appear — in product screenshots, enterprise photography, and the deep purple section — it carries maximum visual weight.

Key Characteristics:

• Bright white canvas with cool gray containment borders
• 22px signature border-radius — the distinctive "Cohere card" roundness
• Dual custom typeface: CohereText (display serif) + Unica77 (body sans)
• Enterprise-grade chromatic restraint: black, white, cool grays, minimal purple-blue accent
• Deep purple/violet hero sections providing dramatic contrast
• Ghost/transparent buttons that shift to blue on hover
• Enterprise photography showing diverse real-world applications
• CohereMono for code and technical labels with uppercase transforms

2. Color Palette & Roles

Primary

• Cohere Black (#000000): Primary headline text and maximum-emphasis elements.
• Near Black (#212121): Standard body link color — slightly softer than pure black.
• Deep Dark (#17171c): A blue-tinted near-black for navigation and dark-section text.

Secondary & Accent

• Interaction Blue (#1863dc): The primary interactive accent — appears on button hover, focus states, and active links. The sole chromatic action color.
• Ring Blue (#4c6ee6 at 50%): Tailwind ring color for keyboard focus indicators.
• Focus Purple (#9b60aa): Input focus border color — a muted violet.

Surface & Background

• Pure White (#ffffff): The primary page background and card surface.
• Snow (#fafafa): Subtle elevated surfaces and light-section backgrounds.
• Lightest Gray (#f2f2f2): Card borders and the softest containment lines.

Neutrals & Text

• Muted Slate (#93939f): De-emphasized footer links and tertiary text — a cool-toned gray with a slight blue-violet tint.
• Border Cool (#d9d9dd): Standard section and list-item borders — a cool, slightly purple-tinted gray.
• Border Light (#e5e7eb): Lighter border variant — Tailwind's standard gray-200.

Gradient System

• Purple-Violet Hero Band: Deep purple gradient sections that create dramatic contrast against the white canvas. These appear as full-width bands housing product screenshots and key messaging.
• Dark Footer Gradient: The page transitions through deep purple/charcoal to the black footer, creating a "dusk" effect.

3. Typography Rules

Font Family

• Display: CohereText, with fallbacks: Space Grotesk, Inter, ui-sans-serif, system-ui
• Body / UI: Unica77 Cohere Web, with fallbacks: Inter, Arial, ui-sans-serif, system-ui
• Code: CohereMono, with fallbacks: Arial, ui-sans-serif, system-ui
• Icons: CohereIconDefault (custom icon font)

Hierarchy

Principles

• Serif for declaration, sans for utility: CohereText carries the brand voice at display scale — its serif terminals give headlines the authority of published research. Unica77 handles everything functional with Swiss-geometric neutrality.
• Negative tracking at scale: CohereText uses -1.2px to -1.44px letter-spacing at 60–72px, creating dense, impactful text blocks.
• Single body weight: Nearly all Unica77 usage is weight 400. Weight 500 appears only for small button emphasis. The system relies on size and spacing, not weight contrast.
• Uppercase code labels: CohereMono uses uppercase with positive letter-spacing (0.16–0.28px) for technical tags and section markers.

4. Component Stylings

Buttons

Ghost / Transparent

• Background: transparent (rgba(255, 255, 255, 0))
• Text: Cohere Black (#000000)
• No border visible
• Hover: text shifts to Interaction Blue (#1863dc), opacity 0.8
• Focus: solid 2px outline in Interaction Blue
• The primary button style — invisible until interacted with

Dark Solid

• Background: dark/black
• Text: Pure White
• For CTA on light surfaces
• Pill-shaped or standard radius

Outlined

• Border-based containment
• Used in secondary actions

Cards & Containers

• Background: Pure White (#ffffff)
• Border: thin solid Lightest Gray (1px solid #f2f2f2) for subtle cards; Cool Border (#d9d9dd) for emphasized
• Radius: 22px — the signature Cohere radius for primary cards, images, and dialog containers. Also 4px, 8px, 16px, 20px for smaller elements
• Shadow: minimal — Cohere relies on background color and borders rather than shadows
• Special: 0px 0px 22px 22px radius (bottom-only rounding) for section containers
• Dialog: 8px radius for modal/dialog boxes

Inputs & Forms

• Text: white on dark input, black on light
• Focus border: Focus Purple (#9b60aa) with 1px solid
• Focus shadow: red ring (rgb(179, 0, 0) 0px 0px 0px 2px) — likely for error state indication
• Focus outline: Interaction Blue solid 2px

Navigation

• Clean horizontal nav on white or dark background
• Logo: Cohere wordmark (custom SVG)
• Links: Dark text at 16px Unica77
• CTA: Dark solid button
• Mobile: hamburger collapse

Image Treatment

• Enterprise photography with diverse subjects and environments
• Purple-tinted hero photography for dramatic sections
• Product UI screenshots on dark surfaces
• Images with 22px radius matching card system
• Full-bleed purple gradient sections

Distinctive Components

22px Card System

• The 22px border-radius is Cohere's visual signature
• All primary cards, images, and containers use this radius
• Creates a cloud-like, organic softness that's distinctive from the typical 8–12px

Enterprise Trust Bar

• Company logos displayed in a horizontal strip
• Demonstrates enterprise adoption
• Clean, monochrome logo treatment

Purple Hero Bands

• Full-width deep purple sections housing product showcases
• Create dramatic visual breaks in the white page flow
• Product screenshots float within the purple environment

Uppercase Code Tags

• CohereMono in uppercase with letter-spacing
• Used as section markers and categorization labels
• Creates a technical, structured information hierarchy

5. Layout Principles

Spacing System

• Base unit: 8px
• Scale: 2px, 6px, 8px, 10px, 12px, 16px, 20px, 22px, 24px, 28px, 32px, 36px, 40px, 56px, 60px
• Button padding varies by variant
• Card internal padding: approximately 24–32px
• Section vertical spacing: generous (56–60px between sections)

Grid & Container

• Max container width: up to 2560px (very wide) with responsive scaling
• Hero: centered with dramatic typography
• Feature sections: multi-column card grids
• Enterprise sections: full-width purple bands
• 26 breakpoints detected — extremely granular responsive system

Whitespace Philosophy

• Enterprise clarity: Each section presents one clear proposition with breathing room between.
• Photography as hero: Large photographic sections provide visual interest without requiring decorative design elements.
• Card grouping: Related content is grouped into 22px-rounded cards, creating natural information clusters.

Border Radius Scale

• Sharp (4px): Navigation elements, small tags, pagination
• Comfortable (8px): Dialog boxes, secondary containers, small cards
• Generous (16px): Featured containers, medium cards
• Large (20px): Large feature cards
• Signature (22px): Primary cards, hero images, main containers — THE Cohere radius
• Pill (9999px): Buttons, tags, status indicators

6. Depth & Elevation

Shadow Philosophy: Cohere is nearly shadow-free. Depth is communicated through background color contrast (white cards on purple bands, white surface on snow), border containment (cool gray borders), and the dramatic light-to-dark section alternation. When elements need elevation, they achieve it through being white-on-dark rather than through shadow casting.

7. Do's and Don'ts

Do

• Use 22px border-radius on all primary cards and containers — it's the visual signature
• Use CohereText for display headings (72px, 60px) with negative letter-spacing
• Use Unica77 for all body and UI text at weight 400
• Keep the palette black-and-white with cool gray borders
• Use Interaction Blue (#1863dc) only for hover/focus interactive states
• Use deep purple sections for dramatic visual breaks and product showcases
• Apply uppercase + letter-spacing on CohereMono for section labels
• Maintain enterprise-appropriate photography with diverse subjects

Don't

• Don't use border-radius other than 22px on primary cards — the signature radius matters
• Don't introduce warm colors — the palette is strictly cool-toned
• Don't use heavy shadows — depth comes from color contrast and borders
• Don't use bold (700+) weight on body text — 400–500 is the range
• Don't skip the serif/sans hierarchy — CohereText for headlines, Unica77 for body
• Don't use purple as a surface color for cards — purple is reserved for full-width sections
• Don't reduce section spacing below 40px — enterprise layouts need breathing room
• Don't use decoration on buttons by default — ghost/transparent is the base state

8. Responsive Behavior

Breakpoints

26 breakpoints detected — one of the most granularly responsive sites in the dataset.

Touch Targets

• Buttons adequately sized for touch interaction
• Navigation links with comfortable spacing
• Card surfaces as touch targets

Collapsing Strategy

• Navigation: Full nav collapses to hamburger
• Feature grids: Multi-column → 2-column → single column
• Hero text: 72px → 48px → 32px progressive scaling
• Purple sections: Maintain full-width, content stacks
• Card grids: 3 → 2 → 1 column

Image Behavior

• Photography scales proportionally within 22px-radius containers
• Product screenshots maintain aspect ratio
• Purple sections scale background proportionally

9. Agent Prompt Guide

Quick Color Reference

• Primary Text: "Cohere Black (#000000)"
• Page Background: "Pure White (#ffffff)"
• Secondary Text: "Near Black (#212121)"
• Hover Accent: "Interaction Blue (#1863dc)"
• Muted Text: "Muted Slate (#93939f)"
• Card Borders: "Lightest Gray (#f2f2f2)"
• Section Borders: "Border Cool (#d9d9dd)"

Example Component Prompts

• "Create a hero section on Pure White (#ffffff) with CohereText at 72px weight 400, line-height 1.0, letter-spacing -1.44px. Cohere Black text. Subtitle in Unica77 at 18px weight 400, line-height 1.4."
• "Design a feature card with 22px border-radius, 1px solid Lightest Gray (#f2f2f2) border on white. Title in Unica77 at 32px, letter-spacing -0.32px. Body in Unica77 at 16px, Muted Slate (#93939f)."
• "Build a ghost button: transparent background, Cohere Black text in Unica77 at 16px. On hover, text shifts to Interaction Blue (#1863dc) with 0.8 opacity. Focus: 2px solid Interaction Blue outline."
• "Create a deep purple full-width section with white text. CohereText at 60px for the heading. Product screenshot floats within using 22px border-radius."
• "Design a section label using CohereMono at 14px, uppercase, letter-spacing 0.28px. Muted Slate (#93939f) text."

Iteration Guide

1. Focus on ONE component at a time
2. Always use 22px radius for primary cards — "the Cohere card roundness"
3. Specify the typeface — CohereText for headlines, Unica77 for body, CohereMono for labels
4. Interactive elements use Interaction Blue (#1863dc) on hover only
5. Keep surfaces white with cool gray borders — no warm tones
6. Purple is for full-width sections, never card backgrounds

10. Voice & Tone

Cohere's voice is enterprise-AI-careful — formal but readable, security-aware, never breathless. Public messaging emphasizes "private, secure, customized" enterprise positioning over consumer-AI hype. Korean tagline ("개인, 보안, 맞춤형") tracks the same triple.

Voice samples

• "엔터프라이즈 AI: 개인, 보안, 맞춤형"
• "데모 요청" / "Request a demo"

Forbidden phrases. "AGI", "superintelligence". Generic "AI revolution" framing. Casual emoji.

11. Brand Narrative

Cohere was founded in 2019 in Toronto, Canada by Aidan Gomez (CEO), Nick Frosst, and Ivan Zhang (Aidan Gomez — Wikipedia, Cohere About). Aidan Gomez was 20 years old when he co-authored "Attention Is All You Need" in 2017 as a Google Brain intern — the foundational Transformer architecture paper that every modern LLM descends from. Nick Frosst worked at Google Brain Toronto with Geoffrey Hinton (the "Godfather of AI", who later joined Cohere as advisor) (Globe and Mail). The first cheque came from Radical Ventures (Toronto AI VC) (U Toronto Centre for Entrepreneurship). Cohere has raised ~US$1.6B at >$7B valuation as of Sept 2025 (Tracxn) — Tiger Global led an earlier $125M round. Founding observation: enterprises needed customizable LLMs that respected data privacy. RAG-first, private deployment, on-prem available. North is Cohere's enterprise AI agent product.

12. Principles

1. Privacy is the product, not a footnote. UI implication: privacy guarantees first-class on landing pages.
2. RAG-first architecture. UI implication: surfaces emphasize "your data + our models".
3. Enterprise doesn't mean stuffy. UI implication: trust pages explain SOC 2 in plain English.
4. Interaction Blue on hover only. UI implication: don't use brand blue for static CTAs.
5. Purple bands for sections, never cards. UI implication: never apply purple to cards/buttons.

13. Personas

Personas are fictional archetypes informed by Cohere user segments (enterprise platform engineers, AI/ML platform leads, regulated-industry compliance), not individual people.

Catherine Liu, 42, Toronto. Director of AI/ML at a Canadian bank. Cohere is the only LLM vendor approved by their CISO.

Hiroshi Tanaka, 36, Tokyo. Senior platform engineer at multinational logistics. Integrates Cohere Embed for 30+ language search.

David Mensah, 50, Johannesburg. Head of risk at insurance carrier. On-prem deployment required.

14. States

15. Motion & Easing

Standard cubic-bezier. No bouncy springs — enterprise register. prefers-reduced-motion: reduce removes hover transitions and panel slide-ins.

---

Verified: 2026-05-08 (B1 loop) Tier 1 sources: cohere.com/ko (live DOM via playwright — Dark #17171c Primary 9999px / 12×16-24 / 44-49px / 16px·400) Tier 2 sources: styles.refero.design / getdesign.md — no record. Tier 1 (Philosophy): cohere.com homepage; founder bios; Trust + Security pages. Style ref: stripe. Conflicts unresolved: none.