Hermes Agent — Implementation Notes
The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes: - Primary:
Inter| Mono:JetBrains Mono- Font stack (CSS):font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;- Mono stack (CSS):font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;html <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">Usewrite_fileto create HTML, serve viagenerative-widgetsskill (cloudflared tunnel). Verify visual accuracy withbrowser_visionafter generating.
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
#000000): Primary headline text and maximum-emphasis elements.#212121): Standard body link color — slightly softer than pure black.#17171c): A blue-tinted near-black for navigation and dark-section text.#1863dc): The primary interactive accent — appears on button hover, focus states, and active links. The sole chromatic action color.#4c6ee6 at 50%): Tailwind ring color for keyboard focus indicators.#9b60aa): Input focus border color — a muted violet.#ffffff): The primary page background and card surface.#fafafa): Subtle elevated surfaces and light-section backgrounds.#f2f2f2): Card borders and the softest containment lines.#93939f): De-emphasized footer links and tertiary text — a cool-toned gray with a slight blue-violet tint.#d9d9dd): Standard section and list-item borders — a cool, slightly purple-tinted gray.#e5e7eb): Lighter border variant — Tailwind's standard gray-200.CohereText, with fallbacks: Space Grotesk, Inter, ui-sans-serif, system-uiUnica77 Cohere Web, with fallbacks: Inter, Arial, ui-sans-serif, system-uiCohereMono, with fallbacks: Arial, ui-sans-serif, system-uiCohereIconDefault (custom icon font)| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / Hero | CohereText | 72px (4.5rem) | 400 | 1.00 (tight) | -1.44px | Maximum impact, serif authority |
| Display Secondary | CohereText | 60px (3.75rem) | 400 | 1.00 (tight) | -1.2px | Large section headings |
| Section Heading | Unica77 | 48px (3rem) | 400 | 1.20 (tight) | -0.48px | Feature section titles |
| Sub-heading | Unica77 | 32px (2rem) | 400 | 1.20 (tight) | -0.32px | Card headings, feature names |
| Feature Title | Unica77 | 24px (1.5rem) | 400 | 1.30 | normal | Smaller section titles |
| Body Large | Unica77 | 18px (1.13rem) | 400 | 1.40 | normal | Intro paragraphs |
| Body / Button | Unica77 | 16px (1rem) | 400 | 1.50 | normal | Standard body, button text |
| Button Medium | Unica77 | 14px (0.88rem) | 500 | 1.71 (relaxed) | normal | Smaller buttons, emphasized labels |
| Caption | Unica77 | 14px (0.88rem) | 400 | 1.40 | normal | Metadata, descriptions |
| Uppercase Label | Unica77 / CohereMono | 14px (0.88rem) | 400 | 1.40 | 0.28px | Uppercase section labels |
| Small | Unica77 | 12px (0.75rem) | 400 | 1.40 | normal | Smallest text, footer links |
| Code Micro | CohereMono | 8px (0.5rem) | 400 | 1.40 | 0.16px | Tiny uppercase code labels |
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
#ffffff)1px solid #f2f2f2) for subtle cards; Cool Border (#d9d9dd) for emphasized0px 0px 22px 22px radius (bottom-only rounding) for section containers#9b60aa) with 1px solidrgb(179, 0, 0) 0px 0px 0px 2px) — likely for error state indication22px 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
| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Page background, text blocks |
| Bordered (Level 1) | 1px solid #f2f2f2 or #d9d9dd |
Standard cards, list separators |
| Purple Band (Level 2) | Full-width dark purple background | Hero sections, feature showcases |
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.
| Name | Width | Key Changes |
|---|---|---|
| Small Mobile | <425px | Compact layout, minimal spacing |
| Mobile | 425–640px | Single column, stacked cards |
| Large Mobile | 640–768px | Minor spacing adjustments |
| Tablet | 768–1024px | 2-column grids begin |
| Desktop | 1024–1440px | Full multi-column layout |
| Large Desktop | 1440–2560px | Maximum container width |
26 breakpoints detected — one of the most granularly responsive sites in the dataset.