+
+
+
+
+ + Download +
++ Install the Right Build for Your Machine +
++ Version {releaseVersion} · {downloadCount.toLocaleString("en-US")} downloads +
+
+ {platformDownloads.map((download, index) => (
+
+
+ ))}
+
+ + {download.title} +
+{download.note}
+
+ {download.assets.map((asset) => (
+
+ {asset.label}
+
+
+ ))}
+
+
+
+ {answer}
+
+
+
+
+
+ FAQ
++ Frequently Asked Questions +
+
+ {faqs.map((item, index) => (
+
+
+ 
+
+
+
+
+
+ {number}
+
+ {title}
+{description}
+
+ {media}
+ {copy}
+
+ );
+}
+
+export function Features() {
+ return (
+
+
+
+ Features
+
+
+
+
+ {features.slice(3).map((feature) => (
+
+
+ ))}
+
+
+ + Your Company, Under the Hood +
+
+ {features.slice(0, 3).map((feature) => (
+
+
+
+ 
+
+
+
+
+
+ {feature.number}
+
+ {feature.title}
+{feature.description}
+
+
+ 
+
+
+
+
+
+ {landingHeroNarrative.eyebrow}
+
+
+
+
+ {landingHeroNarrative.titleLine1}
+ {landingHeroNarrative.titleLine2} +
+
+
+ {landingHeroNarrative.description}
+
+
+
+
+ See Downloads
+
+
+
+
+
+
+
+
+ + {landingHeroNarrative.titleLine2} +
+
+ {landingHeroNarrative.availability}
+
+
+
+ );
+}
+
+export function HowItWorks() {
+ return (
+
+
+
+
+
+
+ AgentCompany
+
+
+
+ {demoMessages.slice(0, visibleCount).map((message, index) => (
+
+
+
+ {message.agent}
+
+ {message.text}
+
+ ))}
+
+ {visibleCount < demoMessages.length && isVisible && (
+
+ )}
+
+ {visibleCount >= demoMessages.length && (
+
+
+ {landingHowItWorksNarrative.completionText}
+
+ )}
+
+
+
+
+
+
+
+
+ + How It Works +
++ {landingHowItWorksNarrative.heading} +
+
+
+
+
+
+
+
+
+
+
+ {steps.map((step, index) => (
+
+
+ ))}
+
+
+ {step.number}
+
+
+
+ {step.title}
+{step.description}
+
+
+
+
+ + Supported AI Runtimes +
+
+ {runtimes.map((runtime) => {
+ const Icon = runtime.icon;
+ return (
+
+
+
+
+ );
+ })}
+ Design System Preview:
Cohere
+ Auto-generated design token catalog from DESIGN.md
+ ++ + +
01 / Color Palette
+ Color Palette & Roles
+ +
+
+
+ Primary
+
+
+
+
+
+
+
+ Cohere Black
+ #000000
+ Primary headline text, maximum emphasis
+
+
+
+
+
+ Near Black
+ #212121
+ Standard body link color
+
+
+
+
+
+ Deep Dark
+ #17171c
+ Navigation and dark-section text
+
+
+
+ Secondary & Accent
+
+
+
+
+
+
+
+ Interaction Blue
+ #1863dc
+ Hover, focus states, active links
+
+
+
+
+
+ Ring Blue
+ #4c6ee6 @ 50%
+ Keyboard focus indicators
+
+
+
+
+
+ Focus Purple
+ #9b60aa
+ Input focus border color
+
+
+
+ Surface & Background
+
+
+
+
+
+
+
+ Pure White
+ #ffffff
+ Primary page background, card surface
+
+
+
+
+
+ Snow
+ #fafafa
+ Subtle elevated surfaces, light sections
+
+
+
+
+
+ Lightest Gray
+ #f2f2f2
+ Card borders, softest containment
+
+
+Neutrals & Text
+
+
+
+
+
+
+
+ Muted Slate
+ #93939f
+ Footer links, tertiary text
+
+
+
+
+
+ Border Cool
+ #d9d9dd
+ Section borders, list separators
+
+
+
+
+
+ Border Light
+ #e5e7eb
+ Lighter border variant (gray-200)
+ + + +
+
+
+Enterprise AI Platform
+Deep purple hero sections create dramatic visual breaks in the dark page flow
++ + +
02 / Typography Scale
+ Typography Rules
+ +
+
+
+ Display Hero
+ Display / Hero — CohereText — 72px / 400 / 1.00 / -1.44px
+
+
+
+ Display Secondary
+ Display Secondary — CohereText — 60px / 400 / 1.00 / -1.2px
+
+
+
+ Section Heading
+ Section Heading — Unica77 — 48px / 400 / 1.20 / -0.48px
+
+
+
+ Sub-heading
+ Sub-heading — Unica77 — 32px / 400 / 1.20 / -0.32px
+
+
+
+ Feature Title
+ Feature Title — Unica77 — 24px / 400 / 1.30 / normal
+
+
+
+ Body Large text for intro paragraphs. Unica77 provides geometric Swiss precision for all functional UI text at the body-large tier.
+ Body Large — Unica77 — 18px / 400 / 1.40 / normal
+
+
+
+ Standard body text for paragraphs, navigation links, and button labels. Unica77 at its most common size, weight 400.
+ Body / Button — Unica77 — 16px / 400 / 1.50 / normal
+
+
+
+ Button Medium Label
+ Button Medium — Unica77 — 14px / 500 / 1.71 / normal
+
+
+
+ Caption and metadata text for descriptions
+ Caption — Unica77 — 14px / 400 / 1.40 / normal
+
+
+
+ UPPERCASE SECTION LABEL
+ Uppercase Label — CohereMono — 14px / 400 / 1.40 / 0.28px / uppercase
+
+
+
+ Smallest text for footer links and fine print
+ Small — Unica77 — 12px / 400 / 1.40 / normal
+
+
+CODE MICRO LABEL
+ Code Micro — CohereMono — 8px / 400 / 1.40 / 0.16px / uppercase
+ + + +
03 / Button Variants
+ Buttons
+ + + ++ Ghost buttons are the primary style — invisible until interacted with. On hover, text shifts to Interaction Blue (#1863dc) with 0.8 opacity. Focus: 2px solid Interaction Blue outline. +
++ + +
04 / Card Examples
+ Cards & Containers
+ +
+
+
+
+ STANDARD CARD
+ Signature 22px Radius
+The distinctive Cohere card with 22px border-radius and #333 border on dark surfaces. Creates cloud-like, organic softness on the dark canvas.
+
+
+ DIALOG CARD
+ Dialog 8px Radius
+Modal and dialog containers use a tighter 8px radius with #333 border. Functional, secondary containment for transient UI.
+
+
+ GENEROUS CARD
+ Featured 16px Radius
+Medium-sized containers for featured content. Uses 16px radius as a middle step in the radius scale with subtle border.
++ + +
05 / Spacing Scale
+ Spacing System
+Base unit: 8px. Scale from 2px to 60px.
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+2px
6px
8px
10px
12px
16px
20px
22px
24px
28px
32px
40px
56px
60px
+ + +
06 / Border Radius Scale
+ Border Radius
+ +
+
+
+
+
+
+
+
+4px
Sharp — nav, tags
8px
Comfortable — dialogs
16px
Generous — featured
20px
Large — feature cards
22px
Signature — THE radius
9999px
Pill — buttons, tags
+ + +
07 / Elevation & Depth
+ Depth & Elevation
+ +
+
+
+
+
+
+ Flat
No shadow, no border. Page background and text blocks.
Level 0
+
+
+
+ Bordered (Subtle)
1px solid #2a2a2f. Subtle dark containment lines.
Level 1 — Subtle
+
+
+
+ Bordered (Standard)
1px solid #333. Standard dark-mode card borders.
Level 1 — Standard
+
+
+
+ Purple Band
Full-width dark purple background. Hero sections, showcases.
Level 2 — Dramatic
+ + Cohere is nearly shadow-free. Depth is communicated through background color contrast (elevated cards on dark canvas), border containment, and dramatic light-to-dark section alternation. +
+Design System Preview:
Cohere
+ Auto-generated design token catalog from DESIGN.md
+ ++ + +
01 / Color Palette
+ Color Palette & Roles
+ +
+
+
+ Primary
+
+
+
+
+
+
+
+ Cohere Black
+ #000000
+ Primary headline text, maximum emphasis
+
+
+
+
+
+ Near Black
+ #212121
+ Standard body link color
+
+
+
+
+
+ Deep Dark
+ #17171c
+ Navigation and dark-section text
+
+
+
+ Secondary & Accent
+
+
+
+
+
+
+
+ Interaction Blue
+ #1863dc
+ Hover, focus states, active links
+
+
+
+
+
+ Ring Blue
+ #4c6ee6 @ 50%
+ Keyboard focus indicators
+
+
+
+
+
+ Focus Purple
+ #9b60aa
+ Input focus border color
+
+
+
+ Surface & Background
+
+
+
+
+
+
+
+ Pure White
+ #ffffff
+ Primary page background, card surface
+
+
+
+
+
+ Snow
+ #fafafa
+ Subtle elevated surfaces, light sections
+
+
+
+
+
+ Lightest Gray
+ #f2f2f2
+ Card borders, softest containment
+
+
+Neutrals & Text
+
+
+
+
+
+
+
+ Muted Slate
+ #93939f
+ Footer links, tertiary text
+
+
+
+
+
+ Border Cool
+ #d9d9dd
+ Section borders, list separators
+
+
+
+
+
+ Border Light
+ #e5e7eb
+ Lighter border variant (gray-200)
+ + + +
+
+
+Enterprise AI Platform
+Deep purple hero sections create dramatic visual breaks in the white page flow
++ + +
02 / Typography Scale
+ Typography Rules
+ +
+
+
+ Display Hero
+ Display / Hero — CohereText — 72px / 400 / 1.00 / -1.44px
+
+
+
+ Display Secondary
+ Display Secondary — CohereText — 60px / 400 / 1.00 / -1.2px
+
+
+
+ Section Heading
+ Section Heading — Unica77 — 48px / 400 / 1.20 / -0.48px
+
+
+
+ Sub-heading
+ Sub-heading — Unica77 — 32px / 400 / 1.20 / -0.32px
+
+
+
+ Feature Title
+ Feature Title — Unica77 — 24px / 400 / 1.30 / normal
+
+
+
+ Body Large text for intro paragraphs. Unica77 provides geometric Swiss precision for all functional UI text at the body-large tier.
+ Body Large — Unica77 — 18px / 400 / 1.40 / normal
+
+
+
+ Standard body text for paragraphs, navigation links, and button labels. Unica77 at its most common size, weight 400.
+ Body / Button — Unica77 — 16px / 400 / 1.50 / normal
+
+
+
+ Button Medium Label
+ Button Medium — Unica77 — 14px / 500 / 1.71 / normal
+
+
+
+ Caption and metadata text for descriptions
+ Caption — Unica77 — 14px / 400 / 1.40 / normal
+
+
+
+ UPPERCASE SECTION LABEL
+ Uppercase Label — CohereMono — 14px / 400 / 1.40 / 0.28px / uppercase
+
+
+
+ Smallest text for footer links and fine print
+ Small — Unica77 — 12px / 400 / 1.40 / normal
+
+
+CODE MICRO LABEL
+ Code Micro — CohereMono — 8px / 400 / 1.40 / 0.16px / uppercase
+ + + +
03 / Button Variants
+ Buttons
+ + + ++ Ghost buttons are the primary style — invisible until interacted with. On hover, text shifts to Interaction Blue (#1863dc) with 0.8 opacity. Focus: 2px solid Interaction Blue outline. +
++ + +
04 / Card Examples
+ Cards & Containers
+ +
+
+
+
+ STANDARD CARD
+ Signature 22px Radius
+The distinctive Cohere card with 22px border-radius and 1px solid #f2f2f2 border. Creates cloud-like, organic softness on the white canvas.
+
+
+ DIALOG CARD
+ Dialog 8px Radius
+Modal and dialog containers use a tighter 8px radius with #d9d9dd border. Functional, secondary containment for transient UI.
+
+
+ GENEROUS CARD
+ Featured 16px Radius
+Medium-sized containers for featured content. Uses 16px radius as a middle step in the radius scale with subtle #f2f2f2 border.
++ + +
05 / Spacing Scale
+ Spacing System
+Base unit: 8px. Scale from 2px to 60px.
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+2px
6px
8px
10px
12px
16px
20px
22px
24px
28px
32px
40px
56px
60px
+ + +
06 / Border Radius Scale
+ Border Radius
+ +
+
+
+
+
+
+
+
+4px
Sharp — nav, tags
8px
Comfortable — dialogs
16px
Generous — featured
20px
Large — feature cards
22px
Signature — THE radius
9999px
Pill — buttons, tags
+ + +
07 / Elevation & Depth
+ Depth & Elevation
+ +
+
+
+
+
+
+ Flat
No shadow, no border. Page background and text blocks.
Level 0
+
+
+
+ Bordered (Light)
1px solid #f2f2f2. Standard cards, subtle containment.
Level 1 — Lightest Gray
+
+
+
+ Bordered (Cool)
1px solid #d9d9dd. Emphasized cards, list separators.
Level 1 — Border Cool
+
+
+
+ Purple Band
Full-width dark purple background. Hero sections, showcases.
Level 2 — Dramatic
+ + Cohere is nearly shadow-free. Depth is communicated through background color contrast (white cards on purple bands), border containment (cool gray borders), and dramatic light-to-dark section alternation. +
+