### Cohere - Enterprise AI platform. - Vibrant gradients, data-rich dashboard aesthetic - description: Cohere's 2026 web system is a controlled enterprise AI…
Real data. Real impact.
Emerging
Developers
Per week
Excellent
Skills give you superpowers. Install in 30 seconds.
version alpha
name Cohere
description Cohere's 2026 web system is a controlled enterprise AI interface built from stark white editorial space, deep green-black product bands, soft mineral surfaces, rounded media cards, and a distinctive type split between monospaced-feeling display headlines and precise Unica77 UI text.
colors primary: "#17171c" cohere-black: "#000000" ink: "#212121" deep-green: "#003c33" dark-navy: "#071829" canvas: "#ffffff" soft-stone: "#eeece7" pale-green: "#edfce9" pale-blue: "#f1f5ff" hairline: "#d9d9dd" border-light: "#e5e7eb" card-border: "#f2f2f2" muted: "#93939f" slate: "#75758a" body-muted: "#616161" action-blue: "#1863dc" focus-blue: "#4c6ee6" coral: "#ff7759" coral-soft: "#ffad9b" form-focus: "#9b60aa" on-primary: "#ffffff" on-dark: "#ffffff" error: "#b30000"
typography hero-display: fontFamily: CohereText fontSize: 96px fontWeight: 400 lineHeight: 1 letterSpacing: -1.92px product-display: fontFamily: CohereText fontSize: 72px fontWeight: 400 lineHeight: 1 letterSpacing: -1.44px section-display: fontFamily: Unica77 Cohere Web fontSize: 60px fontWeight: 400 lineHeight: 1 letterSpacing: -1.2px section-heading: fontFamily: Unica77 Cohere Web fontSize: 48px fontWeight: 400 lineHeight: 1.2 letterSpacing: -0.48px card-heading: fontFamily: Unica77 Cohere Web fontSize: 32px fontWeight: 400 lineHeight: 1.2 letterSpacing: -0.32px feature-heading: fontFamily: Unica77 Cohere Web fontSize: 24px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0 body-large: fontFamily: Unica77 Cohere Web fontSize: 18px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0 body: fontFamily: Unica77 Cohere Web fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 button: fontFamily: Unica77 Cohere Web fontSize: 14px fontWeight: 500 lineHeight: 1.71 letterSpacing: 0 caption: fontFamily: Unica77 Cohere Web fontSize: 14px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0 mono-label: fontFamily: CohereMono fontSize: 14px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.28px micro: fontFamily: Unica77 Cohere Web fontSize: 12px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0
rounded xs: 4px sm: 8px md: 16px lg: 22px xl: 30px pill: 32px full: 9999px
spacing xxs: 2px xs: 6px sm: 8px md: 12px lg: 16px xl: 24px xxl: 32px section: 80px
components button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 12px 24px button-secondary: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.xs}" padding: 8px 0 button-pill-outline: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.button}" rounded: "{rounded.xl}" padding: 6px 12px announcement-bar: backgroundColor: "{colors.cohere-black}" textColor: "{colors.on-dark}" typography: "{typography.micro}" height: 36px hero-photo-card: backgroundColor: "{colors.canvas}" rounded: "{rounded.lg}" agent-console-card: backgroundColor: "{colors.primary}" textColor: "{colors.on-dark}" rounded: "{rounded.sm}" padding: 24px trust-logo-strip: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.caption}" capability-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.xs}" padding: 24px dark-feature-band: backgroundColor: "{colors.deep-green}" textColor: "{colors.on-dark}" rounded: "{rounded.lg}" padding: 80px product-card: backgroundColor: "{colors.soft-stone}" textColor: "{colors.ink}" rounded: "{rounded.sm}" padding: 32px blog-filter-chip: backgroundColor: transparent textColor: "{colors.coral}" typography: "{typography.card-heading}" rounded: "{rounded.sm}" padding: 8px 14px research-table: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-large}" contact-form-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 32px footer-newsletter: backgroundColor: "{colors.primary}" textColor: "{colors.on-dark}" typography: "{typography.micro}"
Cohere's current web presence feels like a sober enterprise AI command center with editorial restraint. The home page opens on a huge typographic declaration over a white canvas, then uses photography, dark product mockups, trust logos, and generous empty space to make AI infrastructure feel controlled rather than speculative. Product pages invert the tone into deep green-black or dark navy bands, while blog and research pages move toward publishing-system clarity: large filters, thin rules, dense lists, and pale technical backgrounds.
What makes the system distinctive is the mix of austere black-and-white UI with bursts of tactile brand imagery. The site avoids decorative chrome in the normal interface; color arrives through photography, abstract 3D media, coral blog taxonomy chips, blue research links, and dark product environments. Cards are rounded but not cute. Type is large, tight, and almost monospaced in spirit, creating a research-lab cadence across marketing, product, and editorial surfaces.
Key Characteristics:
Monumental display headlines with very tight line height and negative tracking.
White editorial canvases interrupted by deep green, dark navy, and image-led CTA bands.
Rounded media cards and product cards, usually 8px to 22px.
Pill CTAs in near-black or white, with most secondary actions rendered as underlined text links.
Trust-logo strips with monochrome partner marks and very wide vertical spacing.
Agent-console mockups using dark panels, small status chips, and product integration badges.
Blog and research surfaces with prominent taxonomy chips, long rule-separated lists, and search fields.
Cohere Black (#000000): Announcement bar, highest-contrast text, and the global brand anchor.
Near-Black Primary (#17171c): Primary CTA buttons, dark footer, and deep UI cards.
Deep Enterprise Green (#003c33): Product hero bands for North and Command-style dark sections.
Dark Navy (#071829): Financial-services and security-oriented solution bands.
Action Blue (#1863dc): Editorial links, pagination, and secondary action emphasis.
Coral (#ff7759): Blog category chips, taxonomy outlines, and warm product markers.
Soft Coral (#ffad9b): Pale chip borders and segmented article-label details.
Canvas White (#ffffff): Dominant page background and form/card surface.
Soft Stone (#eeece7): Product cards, testimonial placeholders, and warm neutral surface blocks.
Pale Green Wash (#edfce9): North page section backdrop behind stacked dark capability panels.
Pale Blue Wash (#f1f5ff): Blog CTA surface behind abstract 3D imagery.
Card Border (#f2f2f2): Softest card containment line.
Ink (#212121): Default body text and most link text on light backgrounds.
Muted Slate (#93939f): Footer links, dates, metadata, and de-emphasized labels.
Slate (#75758a): Research separators and tertiary text.
Hairline (#d9d9dd): Standard list rules and section dividers.
Border Light (#e5e7eb): Secondary divider and utility rule.
Focus Blue (#4c6ee6): Keyboard focus and ring color.
Form Focus Violet (#9b60aa): Focus border for text inputs.
Error Red (#b30000): Extracted ring/shadow color associated with validation-like states.
Cohere does not use gradients as a generic UI fill. Gradients and color fields are media-led: abstract 3D hero imagery, deep blue open-science particle fields, red-orange product video posters, and dark green-to-black product environments. Keep UI surfaces flat; reserve gradient richness for large media panels and CTA image bands.
Display: CohereText, falling back to Space Grotesk, Inter, ui-sans-serif, and system-ui.
Body/UI: Unica77 Cohere Web, falling back to Inter, Arial, ui-sans-serif, and system-ui.
Technical labels: CohereMono, falling back to Arial, ui-sans-serif, and system-ui.
Icons: Cohere uses custom icon fonts and thin-line geometric illustrations.
Role Font Size Weight Line Height Letter Spacing Notes Hero Display CohereText 96px 400 1.00 -1.92px Home page declaration scale. Product Display CohereText 72px 400 1.00 -1.44px Product and research hero headlines. Section Display Unica77 60px 400 1.00 -1.2px Large product-page headings. Section Heading Unica77 48px 400 1.20 -0.48px Split hero and CTA headings. Card Heading Unica77 32px 400 1.20 -0.32px Feature card and list section titles. Feature Heading Unica77 24px 400 1.30 0 Cards, filters, and article titles. Body Large Unica77 18px 400 1.40 0 Lead text and larger paragraphs. Body Unica77 16px 400 1.50 0 Default copy and link text. Button Unica77 14px 500 1.71 0 Compact CTA labels. Caption Unica77 14px 400 1.40 0 Metadata and small explanatory text. Mono Label CohereMono 14px 400 1.40 0.28px Uppercase technical labels. Micro Unica77 12px 400 1.40 0 Footer, nav microcopy, and small links.
Use massive type sparingly; Cohere pages often have one oversized headline and then settle into restrained 16px-24px UI copy.
Keep display type tight. Hero copy should feel compact and carved, not airy.
Avoid heavy bold weights. Size, spacing, and surface contrast do most of the hierarchy work.
Use uppercase mono labels for category and system markers, especially on product and research pages.
Editorial pages can use coral chips and blue links, but the base typography remains black and measured.
The system uses an 8px base with many one-off alignment values: 2px, 6px, 8px, 10px, 12px, 16px, 20px, 22px, 24px, 28px, 32px, 36px, 40px, 56px, 60px, 64px, and 80px.
Large sections rely on dramatic vertical breathing room. The home page places a trust-logo strip far below the hero media. Product pages often hold dark panels inside fields of empty white space, then transition to dense forms or footers only near the end.
Global nav uses a three-zone layout: logo left, menu centered, sign-in/CTA right.
Home hero is centered text above a two-card media composition: a wide product mockup card beside a narrower photography card.
Feature sections commonly use 3-column cards on desktop.
Product pages alternate centered hero blocks, trust-logo strips, large single-feature bands, and 2- or 3-column card grids.
Research pages use full-width lists with date and chip columns instead of decorative cards.
Forms use two-column input rows inside a rounded white card on dark or stone section backgrounds.
Cohere uses whitespace as a trust signal. Large empty intervals separate the brand claim, customer proof, product proof, and CTA. Dense content appears only where it serves the information architecture: research paper rows, blog card grids, and contact form fields.
Cohere is mostly flat. Depth comes from surface alternation, media contrast, rounded corners, and thin borders rather than drop shadows.
Level Treatment Use Flat No shadow, white or dark field Hero copy, research lists, editorial surfaces Bordered 1px #d9d9dd, #e5e7eb, or dark translucent rules Research rows, forms, pale cards, footer inputs Media Lift Rounded image or video over contrasting section color Hero photo cards, product videos, CTA imagery Dark Product Field Deep green or navy full-width band Command, North, financial services, security sections
Token Value Role xs 4px Small images, search fields, article thumbnails, utility elements sm 8px Blog chips, cards, small media, dialogs md 16px Medium product cards and grouped blocks lg 22px Signature media-card and soft placeholder radius xl 30px Research/topic filter pills p
proprietary
Source: https://github.com/VoltAgent/awesome-design-md?ref=explainx
1,500+ AI skills, agents & workflows. Install in 30 seconds. Part of the Torly.ai family.
© 2026 Torly.ai. All rights reserved.