Design System Inspiration of Cohere

1. Visual Theme & Atmosphere

Cohere is an enterprise AI company that builds foundation models and end-to-end AI products for business use. Its official About page frames the work around improving human wellbeing by helping organizations scale innovation, productivity, and progress; its 2025 North launch extends that proposition into an agentic workplace product grounded in enterprise data. On the three supplied public Korean routes, that business-first posture appears as a quiet, high-contrast interface: white canvases, black and charcoal text, occasional inverse panels, and rounded pill actions. The capture records CohereText only for a small display tier, while the loaded Unica77 Cohere Web family carries the repeated navigation, body, card, input, tab, and action rhythm. The result is restrained rather than decorative: large editorial headlines introduce practical enterprise product and pricing content.

This is a public-surface reference, not a claim about signed-in product UI or documentation chrome. The components and tokens below retain only the selectors, routes, and states in the supplied capture.

Key characteristics:

• White public canvas with black, charcoal, and soft-gray text.
• CohereText at large display sizes; loaded Unica77 Cohere Web throughout the observed public UI.
• Dark and inverse white 9999px pill actions, backed by multiple public routes.
• A 22px rounded home marketing-card container, without a claim of a universal card recipe.
• No hover, pressed, focus, menu, dialog, toast, or error state token: the capture recorded no interactions.

2. Color Palette & Roles

Observed public-route values

• Dark action (#17171c): observed dark pill background on public home, pricing, and products actions.
• Canvas (#ffffff): observed page and inverse-action surface across all captured routes.
• Foreground (#000000): repeated public text value.
• Foreground soft (#212121): repeated public button, tab, and body value.
• Muted (#75758a): repeated public secondary-text value.
• Inverse text (#fafafa): observed text on dark public areas.
• Light border (#e5e7eb): repeated computed border value across the three routes.
• Dark-section boundary (#525260): observed one-pixel border on the home and products routes.

Boundary

The artifact does not provide a selector-backed blue, purple, green, gradient, focus-ring, or error-color role for these routes. Those older claims are omitted rather than generalized from class names, asset names, or an adjacent surface.

3. Typography Rules

Evidence classes

Captured hierarchy

4. Component Stylings

Public actions

Dark solid

• Background: #17171c
• Text: #ffffff
• Radius: 9999px
• Padding: 12px 24px
• Font: 16px / 400 / Unica77 Cohere Web
• Use: Home, pricing, and products public CTA; home selector home::[data-omd-capture="53"]

Inverse solid

• Background: #ffffff
• Text: #17171c
• Radius: 9999px
• Padding: 12px 24px
• Font: 16px / 400 / Unica77 Cohere Web
• Use: Inverse public CTA on home and products; home selector home::[data-omd-capture="58"]

Outlined pricing action

• Text: #17171c
• Border: 1px solid #17171c
• Radius: 9999px
• Padding: 12px 16px
• Font: 16px / 400 / Unica77 Cohere Web
• Use: Pricing-only secondary action; selector surface-2::[data-omd-capture="59"]

Public pricing navigation

Selected tab

• Text: #212121
• Radius: 0px
• Padding: 4px 0px
• Font: 16px / 400 / Unica77 Cohere Web
• Selected: aria-selected=true observed
• Use: Pricing-only tab; selector surface-2::[data-omd-capture="56"]

Home marketing media

Rounded container

• Radius: 22px
• Use: Home-only interactive media-card container; selector home::div.group/card

The supplied capture records no component hover, pressed, focus, expanded, dialog-open, toast, validation, or generic disabled treatment. A disabled 4px icon control is a route-local observation and is not promoted as an action variant.

5. Layout Principles

The capture shows 6px, 8px, 12px, 16px, 24px, 36px, and 40px spacing values. These are observed clusters rather than a documented Cohere spacing specification. Public actions use 12px vertical padding; the captured navigation has 16px vertical and 40px horizontal padding at the 1440px viewport. Treat route-specific card and section geometry as local until a selector-backed measurement establishes it.

The home media-card container is 22px rounded, while a captured route-local dialog is 8px and compact controls can be 4px. Do not flatten that into a claim that every Cohere card, image, dialog, or form uses one radius.

6. Depth & Elevation

Most observed public controls are shadow-free. The capture also records a route-local floating control and dialog with a 0px 2px 8px rgba(0, 0, 0, 0.15) shadow. It is route-local chrome, not a general Cohere elevation token.

7. Do's and Don'ts

Do

• Use the loaded CohereText / Unica77 / CohereMono hierarchy only when the deployment can legally load the named family.
• Keep the captured public action geometry specific: dark or inverse 9999px pills, with 12px vertical padding.
• Preserve the distinction between public marketing, public pricing, public product marketing, and route-local floating-dialog chrome.
• Use the 22px radius only for the observed home media-card container unless another selector proves a broader rule.

Don't

• Do not substitute Inter, Arial, or system UI while naming the result as a Cohere typeface.
• Do not promote the declared-only CohereHeadline, CohereColor, icon, variable, or KaTeX assets into visible UI tokens.
• Do not invent hover, pressed, focus, error, dialog, toast, or accordion-expanded variants from class names.
• Do not generalize the floating dialog’s 8px/shadow treatment into product cards or primary actions.

8. Responsive Behavior

The supplied capture is at 1440x900. It establishes desktop computed values only. The navigation class indicates responsive padding rules and the home media card includes responsive dimensions, but no smaller-viewport render or interaction was supplied; mobile breakpoints, collapsed navigation, and touch behavior therefore remain unclaimed.

9. Agent Prompt Guide

• Build a public marketing CTA with #17171c background, #ffffff text, 9999px radius, 12px 24px padding, and 16px / 400 Unica77 Cohere Web only when the licensed font is available.
• Build the inverse counterpart only for a dark public section: #ffffff background, #17171c text, and the same observed pill geometry.
• Use CohereText 72px / 400 / 72px for an observed public h1 treatment, not as a claim about the authenticated product.
• Keep a pricing tab route-local: #212121 text, 0px radius, 4px vertical padding; selected is the only captured state.

10. Voice & Tone

Cohere’s official public voice is practical, enterprise-oriented, and human-purposeful. The About page describes foundation models and AI solutions that turn everyday effort into impact, while the public homepage leads with control over data and infrastructure. Careers names Momentum, Openness, and Autonomy as company values. These are official messaging and culture evidence, not a claim about every product microcopy string.

Public samples

• “Own your AI” (official homepage).
• “Where enterprise AI meets real-world purpose” (official About page).
• “Join the mission to scale intelligence” (official Careers page).

11. Brand Narrative

Cohere says it was founded in Toronto in 2019 to scale intelligence in service of humanity. Its official About page identifies co-founders Aidan Gomez, Nick Frosst, and Ivan Zhang, and describes a current enterprise focus on helping teams improve judgment, accelerate execution, and extend what they can achieve. The same source places the 2025 launch of North in that evolution: a turnkey workplace platform using agentic capabilities and retrieval with enterprise data.

The company’s current public positioning centers on private, secure, customizable deployment across a customer’s infrastructure. That narrative explains the sober public presentation more reliably than the older snapshot’s unsupported claims about an all-purpose visual color story.

12. Principles

1. Scale intelligence to serve people. UI implication: connect public product messaging to human and organizational outcomes rather than novelty alone.
2. Keep control with the enterprise. UI implication: make security, deployment, and customization legible in public information architecture.
3. Support momentum. UI implication: make a next action visible without relying on unobserved interaction effects.
4. Make room for autonomy and openness. UI implication: prefer direct explanatory content and clear choice boundaries over opaque system behavior.

13. Personas

The official public sources identify enterprises, teams, workforces, and customers as the intended stakeholder groups, including organizations that need secure, private, and customizable AI deployment. They do not provide validated individual user personas. This reference intentionally does not fabricate named personas or behavioral metrics from that broad audience evidence.

14. States

No loading, empty, error, success, skeleton, or validation state was captured on the three supplied public routes. The only recorded stateful component evidence is a selected pricing tab and one disabled 4px-radius icon control. Do not extrapolate those observations into a general application-state system.

15. Motion & Easing

The supplied public capture contains transition-related class names on actions and a floating control, but no measured transition duration, easing value, reduced-motion behavior, or before/after interaction observation. No motion token is asserted.

---

Verified: 2026-07-13 Tier 1 sources: supplied capture of https://cohere.com/ko, https://cohere.com/ko/pricing, and https://cohere.com/ko/products; official context at https://cohere.com/about and https://cohere.com/careers; Unica77 source/license context at https://lineto.com/api/front/font-families/393/document?index=1 and https://lineto.com/information/legal/legal/lineto-eula. Tier 2 sources: https://getdesign.md/cohere/design-md (independent high-level analysis); https://styles.refero.design/?q=Cohere (attempted; built-in web open returned an internal error, so no positive or negative Refero assertion is made). Conflicts unresolved: none