# DESIGN REFERENCE: cohere.com --- ## METADATA ```yaml version: 1.0.0 generated: 2026-07-10 source_url: https://cohere.com analysis_timestamp: 2026-07-10T17:30:00Z design_epoch: 2026 accessibility_level: WCAG 2.1 AA (inferred) mobile_first: true framework_detected: React (inferred) design_system_used: Cohere Design System (custom) core_philosophy: enterprise AI command center, stark white editorial space with deep green-black product bands and distinctive type split ``` --- ## BRAND IDENTITY ### Brand Essence ``` 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. ``` ### Visual Hierarchy Principles ``` - Primary weight: Monumental display headlines (CohereText) — massive, tight, carved - Secondary weight: Dark product bands (deep green, dark navy) — immersive product storytelling - Tertiary weight: Editorial surfaces — research lists, blog grids, white canvas - Media cards and photography provide warmth and human connection - Coral taxonomy chips (blog) and blue links (research) provide editorial voltage ``` ### Emotional Tone ``` Primary emotion: Controlled Secondary emotion: Trustworthy Overall mood: Sober, editorial, research‑lab cadence — enterprise AI infrastructure that feels precise rather than speculative ``` --- ## TYPOGRAPHY SYSTEM ### Primary Font Family (Display) ```yaml name: CohereText (custom monospaced‑feeling display face) fallback: Space Grotesk, Inter, ui-sans-serif, system-ui weights_used: 400 styles_used: normal usage: Hero and product display headlines — massive, tight, carved ``` ### Secondary Font Family (Body + UI) ```yaml name: Unica77 Cohere Web (custom UI face) fallback: Inter, Arial, ui-sans-serif, system-ui weights_used: 400, 500 styles_used: normal usage: Body text, UI elements, navigation, buttons, captions ``` ### Tertiary Font Family (Technical Labels) ```yaml name: CohereMono fallback: Arial, ui-sans-serif, system-ui weights_used: 400 styles_used: normal usage: Uppercase technical labels, category markers ``` ### Typographic Scale ```yaml hero_display: { size: 6rem, weight: 400, line-height: 1, tracking: -0.12rem } # 96px, CohereText product_display: { size: 4.5rem, weight: 400, line-height: 1, tracking: -0.09rem } # 72px, CohereText section_display: { size: 3.75rem, weight: 400, line-height: 1, tracking: -0.075rem } # 60px, Unica77 section_heading: { size: 3rem, weight: 400, line-height: 1.2, tracking: -0.03rem } # 48px, Unica77 card_heading: { size: 2rem, weight: 400, line-height: 1.2, tracking: -0.02rem } # 32px, Unica77 feature_heading: { size: 1.5rem, weight: 400, line-height: 1.3, tracking: 0 } # 24px, Unica77 body_large: { size: 1.125rem, weight: 400, line-height: 1.4, tracking: 0 } # 18px, Unica77 body: { size: 1rem, weight: 400, line-height: 1.5, tracking: 0 } # 16px, Unica77 button: { size: 0.875rem, weight: 500, line-height: 1.71, tracking: 0 } # 14px, Unica77 caption: { size: 0.875rem, weight: 400, line-height: 1.4, tracking: 0 } # 14px, Unica77 mono_label: { size: 0.875rem, weight: 400, line-height: 1.4, tracking: 0.0175rem } # 14px, CohereMono micro: { size: 0.75rem, weight: 400, line-height: 1.4, tracking: 0 } # 12px, Unica77 ``` ### Letter Spacing Classes ```yaml tight: -0.12rem to -0.02rem (scales with display sizes) normal: 0 wide: 0.0175rem (mono labels) ``` --- ## COLOR ARCHITECTURE ### Primary Palette (Brand Anchors) ```yaml primary: { hex: #17171C, rgb: (23,23,28), usage: Primary CTAs, dark footer, near‑black UI cards } cohere_black: { hex: #000000, rgb: (0,0,0), usage: Announcement bar, highest‑contrast text } ink: { hex: #212121, rgb: (33,33,33), usage: Default body text, most link text } ``` ### Surface Colors (White + Mineral) ```yaml canvas: { hex: #FFFFFF, rgb: (255,255,255), usage: Page background, form/card surface } soft_stone: { hex: #EEE CE7, rgb: (238,236,231), usage: Product cards, testimonial placeholders, warm neutral surfaces } pale_green: { hex: #EDFCE9, rgb: (237,252,233), usage: North page section backdrops } pale_blue: { hex: #F1F5FF, rgb: (241,245,255), usage: Blog CTA surfaces } card_border: { hex: #F2F2F2, rgb: (242,242,242), usage: Softest card containment lines } ``` ### Text Colors ```yaml muted: { hex: #93939F, rgb: (147,147,159), usage: Footer links, dates, metadata, de‑emphasized labels } slate: { hex: #75758A, rgb: (117,117,138), usage: Research separators, tertiary text } body_muted: { hex: #616161, rgb: (97,97,97), usage: Muted body text } hairline: { hex: #D9D9DD, rgb: (217,217,221), usage: List rules, section dividers } border_light: { hex: #E5E7EB, rgb: (229,231,235), usage: Secondary dividers, utility rules } on_primary: { hex: #FFFFFF, rgb: (255,255,255), usage: Text on primary buttons } on_dark: { hex: #FFFFFF, rgb: (255,255,255), usage: Text on dark surfaces } ``` ### Accent Colors (Action + Editorial) ```yaml action_blue: { hex: #1863DC, rgb: (24,99,220), usage: Editorial links, pagination, secondary actions } focus_blue: { hex: #4C6EE6, rgb: (76,110,230), usage: Keyboard focus ring color } coral: { hex: #FF7759, rgb: (255,119,89), usage: Blog category chips, taxonomy outlines, warm product markers } coral_soft: { hex: #FFAD9B, rgb: (255,173,155), usage: Pale chip borders, segmented article label details } form_focus: { hex: #9B60AA, rgb: (155,96,170), usage: Focus border for text inputs } error: { hex: #B30000, rgb: (179,0,0), usage: Error states, validation rings } ``` ### Dark Product Bands ```yaml deep_green: { hex: #003C33, rgb: (0,60,51), usage: Product hero bands for North/Command dark sections } dark_navy: { hex: #071829, rgb: (7,24,41), usage: Financial services, security‑oriented solution bands } ``` ### Color Relationships ```yaml contrast_ratios: text_on_primary: 15.4:1 (white on #17171C) text_on_canvas: 12.1:1 (#212121 on #FFFFFF) text_on_deep_green: 14.5:1 (white on #003C33) text_on_dark_navy: 15.2:1 (white on #071829) color_harmony: restrained monochromatic with warm editorial accents (coral + blue) accessibility_compliance: fully_compliant ``` ### Gradient System ```yaml usage: Media‑led only — not a generic UI fill examples: - Abstract 3D hero imagery - Deep blue open‑science particle fields - Red‑orange product video posters - Dark green‑to‑black product environments principle: Keep UI surfaces flat; reserve gradient richness for large media panels and CTA image bands ``` --- ## SPACING & LAYOUT SYSTEM ### Base Unit ```yaml base_unit: 8px scaling_factor: variable (system uses many one‑off values) ``` ### Spacing Scale ```yaml spacing_xxs: { value: 2px, usage: Tiny gaps } spacing_xs: { value: 6px, usage: Small paddings } spacing_sm: { value: 8px, usage: Element gaps } spacing_md: { value: 12px, usage: Standard spacing } spacing_lg: { value: 16px, usage: Medium spacing } spacing_xl: { value: 24px, usage: Large spacing } spacing_xxl: { value: 32px, usage: XL spacing } spacing_section: { value: 80px, usage: Section spacing (major bands) } additional_values: [10px, 20px, 22px, 28px, 36px, 40px, 56px, 60px, 64px] ``` ### Breakpoints ```yaml small_mobile: { min: 0px, max: 425px, columns: 4, gutter: 16px } mobile: { min: 426px, max: 640px, columns: 4, gutter: 16px } large_mobile: { min: 641px, max: 768px, columns: 6, gutter: 20px } tablet: { min: 769px, max: 1024px, columns: 8, gutter: 24px } desktop: { min: 1025px, max: 1440px, columns: 12, gutter: 24px } large_desktop: { min: 1441px, max: 2560px, columns: 12, gutter: 32px } ``` ### Container Widths ```yaml default: { max_width: 1280px, padding: 24px } full: { max_width: 100%, padding: 0 } ``` ### Layout Structure ```yaml global_nav: { three‑zone layout: logo left, menu centered, sign‑in/CTA right } home_hero: { centered text above two‑card media composition } feature_sections: { common 3‑column cards on desktop } product_pages: { alternating centered hero blocks, trust strips, 2‑3 column grids } research_pages: { full‑width lists with date and chip columns } forms: { two‑column input rows inside rounded white card } ``` ### Whitespace Philosophy ``` 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. ``` --- ## COMPONENT LIBRARY ### Navigation Components #### Global Navigation ```yaml type: three‑zone (logo left, menu center, actions right) position: static or sticky (top) height: 64px background: #FFFFFF (canvas) components: - logo: { size: 32px, link to home } - menu: [Products, Solutions, Developers, Research, Blog, Company] - actions: [Sign In, Get Started (button-primary)] ``` #### Announcement Bar ```yaml background: #000000 (cohere_black) text: #FFFFFF (on_dark) height: 36px typography: micro (12px) components: [centered microcopy, "Learn more" underlined link, close control (far right)] ``` ### Button System #### Primary Button (Pill) ```yaml default: { bg: #17171C, text: #FFFFFF, padding: 12px 24px, radius: 32px } hover: { bg: #000000, text: #FFFFFF } active: { bg: #000000, text: #FFFFFF } focus: { outline: 2px solid #4C6EE6, offset: 2px } disabled: { bg: #93939F, text: #FFFFFF, opacity: 0.6 } usage: "Request a demo", "Submit", hero CTAs ``` #### Secondary Button (Text) ```yaml default: { bg: transparent, text: #212121, padding: 8px 0, text-decoration: underline } hover: { bg: transparent, text: #1863DC } active: { bg: transparent, text: #1863DC } focus: { outline: 2px solid #4C6EE6, offset: 2px } usage: "Explore products", "Try the Playground", newsletter signup ``` #### Pill Outline Button ```yaml default: { bg: transparent, text: #17171C, border: 1px solid #17171C, padding: 6px 12px, radius: 30px } hover: { bg: #17171C, text: #FFFFFF } active: { bg: #17171C, text: #FFFFFF } focus: { outline: 2px solid #4C6EE6, offset: 2px } usage: Research filters, topic tags, taxonomy controls ``` ### Cards & Containers #### Hero Photo Card ```yaml background: #FFFFFF (canvas) rounded: 22px (lg) content: Photography or abstract imagery with overlaid dark agent‑console module usage: Home hero, solution pages ``` #### Agent Console Card ```yaml background: #17171C (primary) or near‑black text: #FFFFFF (on_dark) rounded: 8px (sm) padding: 24px components: [agent names, status chips, integration badges, prompt fields, generated response cards] ``` #### Trust Logo Strip ```yaml background: #FFFFFF (canvas) text: #212121 (ink) typography: caption (14px) content: Centered copy above row of monochrome customer logos style: No cards, no borders — just wide horizontal spacing ``` #### Capability Card ```yaml background: #FFFFFF (canvas) text: #212121 (ink) typography: body (16px) padding: 24px style: Thin‑line geometric illustration, 24px heading, body copy, text link — often only top rule, not full boxing ``` #### Dark Feature Band ```yaml background: #003C33 (deep_green) or #071829 (dark_navy) text: #FFFFFF (on_dark) rounded: 22px (lg) padding: 80px vertical content: Product capabilities, security claims, feature breakdowns style: Cards use darker translucent surfaces, pale borders, abstract line illustrations ``` #### Product Card ```yaml background: #EEE CE7 (soft_stone) text: #212121 (ink) rounded: 8px (sm) padding: 32px usage: Product/model summaries, 3‑column on desktop components: [small pill button, divider line, checkmark bullet rows] ``` #### Blog Filter Chip (Coral) ```yaml inactive: background: transparent text: #FF7759 (coral) border: 1px solid #FFAD9B (coral_soft) rounded: 8px (sm) padding: 8px 14px typography: card_heading (32px, 400) active: background: #FF7759 (coral) text: #212121 (ink) rounded: 8px (sm) padding: 8px 14px typography: card_heading (32px, 400) ``` #### Research Table ```yaml background: #FFFFFF (canvas) text: #212121 (ink) typography: body_large (18px) style: Rule‑separated publication list, title left, topic pills center, date right components: [filter pills above, tall white rows] ``` #### Contact Form Card ```yaml background: #FFFFFF (canvas) text: #212121 (ink) rounded: 22px (lg) padding: 32px style: Set against dark green or warm stone sections components: [rectangular inputs, thin gray borders, 12‑16px padding, near‑black pill submit] ``` ### Form Elements #### Text Input ```yaml background: #FFFFFF (canvas) text: #212121 (ink) border: 1px solid #D9D9DD (hairline) rounded: 4px (xs) padding: 12px 16px typography: body (16px) focused: { border: 2px solid #9B60AA (form_focus) } disabled: { bg: #F2F2F2, opacity: 0.6 } ``` ### Footer #### Footer Newsletter ```yaml background: #17171C (primary) text: #FFFFFF (on_dark) typography: micro (12px) components: - coral label: "AI moves fast" - white headline - muted legal microcopy - single‑line email field - arrow submit marker style: Dark footer subscription block ``` #### Main Footer ```yaml background: #17171C (primary) text: #93939F (muted) padding: 64px vertical layout: Multi‑column link list with white section labels and muted links ``` --- ## LAYOUT PATTERNS ### Page Structures ```yaml homepage: - announcement_bar: { full‑width black strip } - global_nav: { three‑zone } - hero: { centered text above two‑card media composition } - trust_logo_strip: { monochrome customer logos } - capability_cards: { 3‑column } - dark_feature_band: { deep green product showcase } - cta_section: { image‑led CTA } - footer: { dark, newsletter + columns } product_pages: - hero: { product_display headline + subhead } - trust_logo_strip: { smaller, compact } - feature_grid: { 2‑3 column } - dark_feature_band: { deep green or navy } - pricing: { tier cards } - cta_band: { image or dark } - footer: { dark } blog_index: - hero: { centered, with search } - filter_chips: { coral taxonomy, oversized } - blog_grid: { 3‑column cards } - pagination: { blue action links } - footer: { dark } research_page: - hero: { display headline + search } - filter_pills: { compact outlined pills } - research_table: { rule‑separated publication list } - cta_band: { pale blue with 3D imagery } - footer: { dark } ``` ### Grid Systems ```yaml standard: { columns: 12, gap: 24px, alignment: center } capability_grid: { columns: 3 (desktop) / 2 (tablet) / 1 (mobile), gap: 32px } product_grid: { columns: 3 (desktop) / 2 (tablet) / 1 (mobile), gap: 24px } blog_grid: { columns: 3 (desktop) / 2 (tablet) / 1 (mobile), gap: 24px } ``` ### Section Patterns ```yaml hero: { height: auto, alignment: center (text) + split (media), bg: #FFFFFF } features: { columns: 3, alignment: center, card_variant: capability } dark_band: { columns: flexible, alignment: center, bg: deep_green or dark_navy } trust_strip: { layout: centered copy + logo row, no cards } cta: { layout: centered, image‑led or dark band } ``` --- ## MOTION & INTERACTION ### Transition Durations ```yaml instant: 50ms micro: 150ms fast: 200ms default: 300ms slow: 500ms macro: 750ms ``` ### Easing Curves ```yaml linear: cubic-bezier(0, 0, 1, 1) ease: cubic-bezier(0.25, 0.1, 0.25, 1) ease_out: cubic-bezier(0, 0, 0.58, 1) ease_in_out: cubic-bezier(0.42, 0, 0.58, 1) ``` ### Hover States ```yaml scale: { value: 1.02, duration: 150ms } # cards, media lift: { value: -2px, duration: 150ms } # cards color_shift: { speed: 150ms } # links, buttons ``` ### Scroll Interactions ```yaml sticky_nav: { position: sticky, offset: 0 } fade_in: { trigger: on_view, animation: fade + slide-up (200ms) } # cards lazy_load: { images, media cards } ``` --- ## MEDIA & ICONOGRAPHY ### Icon System ```yaml library: Custom icon font + thin‑line geometric illustrations style: Outline (UI), custom (brand elements) size: small: 16px, medium: 20px, large: 24px color: inherit (uses currentColor or specific hex) ``` ### Image Treatment ```yaml default_ratio: 16:9 (product screenshots), 4:3 (photography), 1:1 (thumbnails) rounded_corners: 22px (large media), 8px (small thumbnails) object_fit: cover (most images), contain (product UI) overlay: { gradient: dark to transparent for text readability on images } usage: Not decorative backdrops — imagery sits as rounded cards with visible corners ``` ### 3D Abstract Imagery ```yaml usage: Hero media, CTA bands, product showcases style: Rounded cards with visible corners examples: [open‑science particle fields, product video posters, abstract renders] ``` --- ## RESPONSIVE BEHAVIORS ### Priority of Elements ```yaml mobile_priority: [announcement bar, hero headline, CTA, capability cards, footer] tablet_priority: [hero split media, trust strip, capability grid 2‑up, dark band] desktop_priority: [hero media composition, capability grid 3‑up, product grid 3‑up, research table full] ``` ### Collapse Points ```yaml navigation: 768px (full horizontal → compact mobile menu) hero_media: 768px (split cards → stacked cards) capability_grid: 768px (3 cols → 2 cols), 480px (2 cols → 1 col) product_grid: 768px (3 cols → 2 cols), 480px (2 cols → 1 col) form_fields: 768px (paired rows → single column) research_rows: { preserve structure, metadata stacks below titles on smaller widths } ``` ### Touch Targets ```yaml minimum_size: 44x44px (buttons, pills, filter chips) spacing_between: 12px tap_feedback: scale (buttons), highlight (cards) note: Research filter chips and blog category chips are larger than standard tags ``` --- ## ACCESSIBILITY FEATURES ### Semantic HTML Structure ```yaml landmarks: [
,