cohere___style_reference:
  info: "> Editorial monograph on cream paper — every screen is a spread, not a dashboard."

  theme: "light"

  info: "Cohere reads as an editorial product monograph: a cream-white canvas, near-black typography, and pill-shaped dark CTAs carry the entire hierarchy without ornament. The signature is restraint — one tri-color gradient (coral → violet → blue) appears only inside photography and decorative washes, never on UI controls, so the interface stays monochrome while imagery supplies chromatic warmth. Typography does the heavy lifting: Unica77 at every UI role with tight negative tracking, and a wider CohereText display face for hero headlines, creating editorial authority rather than SaaS density. Components are minimal and confident — 22px rounded image cards, hairline #e5e7eb borders, dark filled actions — letting photography, code snippets, and copy carry the narrative weight."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Canvas White | `#ffffff` | `--color-canvas-white` | Primary page background, card surfaces, button text |"
    info: "| Soft Cream | `#f0eee9` | `--color-soft-cream` | Subtle warm surface variant for alternating sections |"
    info: "| Hairline Mist | `#e5e7eb` | `--color-hairline-mist` | Default borders, dividers, card outlines, input strokes |"
    info: "| Silver Rule | `#d9d9dd` | `--color-silver-rule` | Secondary borders, nav dividers, subtle separators |"
    info: "| Fog | `#93939f` | `--color-fog` | Muted body text, helper text, secondary labels |"
    info: "| Slate Caption | `#75758a` | `--color-slate-caption` | Nav text, subdued annotations, breadcrumb-style labels |"
    info: "| Graphite Body | `#616161` | `--color-graphite-body` | Tertiary body text, metadata, timestamps |"
    info: "| Press Black | `#212121` | `--color-press-black` | Primary text, heading fill, icon stroke — the workhorse dark |"
    info: "| Inkwell | `#17171c` | `--color-inkwell` | Dark surfaces, filled pill buttons, footer background, code panels |"
    info: "| Charcoal Depth | `#2e2e2e` | `--color-charcoal-depth` | Deepest surface accent, overlay tint, code block background |"
    info: "| Coral Glow | `linear-gradient(to right, #ff7759, #7670c5, #4c6ee6)` | `--color-coral-glow` | Decorative gradient stop — appears only in photography washes and ornamental highlights, never on UI controls |"
    info: "| Iris Wash | `#7670c5` | `--color-iris-wash` | Decorative gradient midstop — transitional violet in the signature warm-to-cool sweep |"
    info: "| Signal Blue | `#4c6ee6` | `--color-signal-blue` | Decorative gradient endpoint — cool terminal in the signature gradient, also a faint illustration accent |"
    info: "| Lilac Mist | `#f0dff3` | `--color-lilac-mist` | Soft highlight wash, gradient surface tint for feature cards |"
    info: "| Orchid | `#d18ee2` | `--color-orchid` | Mid-saturation accent in decorative washes and tag backgrounds |"

  tokens___typography:

    unica77___primary_ui_and_body_typeface___weight_400_for_body__captions__buttons__and_nav__weight_700_for_subheadings_and_card_titles__the_custom_geometric_humanist_forms_give_cohere_a_distinctive_editorial_warmth_that_system_sans_serifs_cannot_replicate__letter_spacing__0_0100em_across_all_sizes_tightens_the_rhythm_and_keeps_the_display_sizes_from_feeling_airy_____font_unica77:
      - "**Substitute:** Inter, Söhne, or DM Sans"
      - "**Weights:** 400, 700"
      - "**Sizes:** 12, 14, 16, 18, 24, 32, 48"
      - "**Line height:** 1.20, 1.30, 1.40, 1.50"
      - "**Letter spacing:** -0.0100em"
      - "**Role:** Primary UI and body typeface — weight 400 for body, captions, buttons, and nav; weight 700 for subheadings and card titles. The custom geometric-humanist forms give Cohere a distinctive editorial warmth that system sans-serifs cannot replicate. Letter-spacing -0.0100em across all sizes tightens the rhythm and keeps the display sizes from feeling airy."

    coheretext___display_only_face_for_the_hero_headline__line_height_locked_at_1_00_and_tracking_at__0_0200em_create_a_monumental__tightly_stacked_wordmark_presence___the_first_thing_a_visitor_reads_sits_at_this_scale__reserved_exclusively_for_the_largest_statement_on_each_page__never_used_below_48px_____font_coheretext:
      - "**Substitute:** GT Sectra Display or Tiempos Headline"
      - "**Weights:** 400"
      - "**Sizes:** 60, 72"
      - "**Line height:** 1.00"
      - "**Letter spacing:** -0.0200em"
      - "**Role:** Display-only face for the hero headline. Line-height locked at 1.00 and tracking at -0.0200em create a monumental, tightly-stacked wordmark presence — the first thing a visitor reads sits at this scale. Reserved exclusively for the largest statement on each page; never used below 48px."

    coheremono___monospaced_accent_for_version_tags__code_like_metadata__and_micro_labels_in_the_nav__the_8px_size_with_0_0200em_tracking_gives_a_technical__almost_stamped_quality_that_contrasts_the_editorial_serif_adjacent_primary_face_____font_coheremono:
      - "**Substitute:** JetBrains Mono or IBM Plex Mono"
      - "**Weights:** 400"
      - "**Sizes:** 8, 14"
      - "**Line height:** 1.40"
      - "**Letter spacing:** 0.0200em"
      - "**Role:** Monospaced accent for version tags, code-like metadata, and micro-labels in the nav. The 8px size with 0.0200em tracking gives a technical, almost stamped quality that contrasts the editorial serif-adjacent primary face."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.4 | -0.12px | `--text-caption` |"
      info: "| body-sm | 14px | 1.4 | -0.14px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.16px | `--text-body` |"
      info: "| subheading | 18px | 1.4 | -0.18px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.3 | -0.24px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.3 | -0.32px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.2 | -0.48px | `--text-heading-lg` |"
      info: "| display | 72px | 1 | -1.44px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 128 | 128px | `--spacing-128` |"
      info: "| 144 | 144px | `--spacing-144` |"
      info: "| 160 | 160px | `--spacing-160` |"
      info: "| 176 | 176px | `--spacing-176` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 22px |"
      info: "| images | 22px |"
      info: "| buttons | 9999px |"
      info: "| small_ui | 4px |"
      info: "| nav_elements | 8px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 24px"
      - "**Element gap:** 16px"

  components:

    dark_pill_primary_button:
      role: "Primary action — the only filled button in the system"

      info: "Filled #17171c pill at 9999px border-radius. White (#ffffff) Unica77 16px weight 400 text. Horizontal padding 24px, vertical padding 12px. No visible border, no shadow — the solid dark fill on white canvas is the entire visual signal. Single CTA instance per viewport region."

    underline_text_link:
      role: "Secondary action / navigation affordance"

      info: "Inherits text color #212121, Unica77 16px weight 400. 1px solid underline at #212121 offset 4px below baseline. No background, no border, no padding. Sits inline with body text or as a standalone secondary CTA beside the dark pill."

    ghost_nav_button:
      role: "Tertiary nav-level action (e.g. 'Sign in')"

      info: "Transparent background, #212121 Unica77 14px weight 400 text, no border, 8px vertical / 12px horizontal padding. Becomes a filled #17171c pill when converted to a CTA (see Dark Pill Primary Button)."

    feature_image_card:
      role: "Large media-forward content card used in product showcase sections"

      info: "22px border-radius on all four corners. Full-bleed image or gradient wash filling the card; no visible border. Internal overlay panels (for code snippets or quotes) sit on #17171c with white text. Card-to-card gap: 16-24px."

    outlined_content_card:
      role: "Compact card for feature lists, product specs, pricing tiers"

      info: "White (#ffffff) surface, 1px solid #e5e7eb border, 22px border-radius. Internal padding 24-32px. Headings at Unica77 24px weight 700 #212121. No shadow — the hairline border is the only edge treatment."

    top_navigation_bar:
      role: "Primary site navigation"

      info: "White background, sits directly on canvas with no shadow or border. Logo left, nav links center, ghost button + dark pill right. Nav links at Unica77 14px weight 400 #212121 with 8px vertical / 16px horizontal padding and 8px border-radius on hover backgrounds. Vertically centered at ~64px height."

    trust_logo_strip:
      role: "Social proof — 'Trusted by' brand row"

      info: "Section heading in Unica77 16px weight 400 #212121 centered above. Brand logos rendered in monochrome #212121 on white, evenly distributed in a single row with 40-60px gaps. No card containers, no borders — logos float on the canvas."

    feature_icon_block:
      role: "Three-up value proposition (Security / Deployment / Customization)"

      stacked_layout: "thin-line icon at 48-64px in #212121 stroke, 16px gap to label below. Label in Unica77 18px weight 400 #212121. No background, no card, no border — the icon and label sit directly on the white canvas."

    code_snippet_panel:
      role: "Embedded code or AI response preview within cards"

      info: "Dark #17171c background, 12px border-radius, white #ffffff Unica77 14px text. Internal padding 16-24px. Often appears as an inset overlay on top of a larger image card."

    footer_multi_column:
      role: "Site-wide footer with link groups and newsletter"

      info: "Dark #17171c background spanning full width. Column headers in white Unica77 16px weight 700 with a small arrow glyph. Link items in white Unica77 14px weight 400 with 12px vertical spacing. Newsletter input: transparent background, 1px solid white bottom border, white placeholder text, arrow submit icon. Social icons bottom-right as 20px monochrome white strokes."

    newsletter_input:
      role: "Email capture in footer"

      info: "Transparent background, no surrounding box. Single 1px solid #ffffff bottom border. Placeholder text 'Enter your email' at Unica77 14px weight 400 white. Submit arrow → icon to the right, 16px width, white stroke."

    hero_headline:
      role: "Page-opening statement"

      info: "CohereText weight 400 at 60-72px, line-height 1.00, letter-spacing -0.0200em, color #212121. Centered on the canvas. The tight stacking and display weight create a print-poster presence — no decoration, no underline, no color."

    gradient_photography_wash:
      role: "Decorative hero image treatment"

      info: "Full-bleed editorial photograph with a soft coral→violet→blue gradient overlay (linear-gradient to right, #ff7759 → #7670c5 → #4c6ee6). 22px border-radius when used as a contained card. Functions as brand expression, not interface."

  do_s_and_don_ts:

    do:
      - "Use Unica77 weight 400 for all body, nav, caption, and button text — reserve weight 700 for card titles and section labels only."
      - "Use 9999px border-radius for every button, tag, and pill-shaped control — Cohere's interface never uses sharp or moderately rounded buttons."
      - "Use 22px border-radius for every card, image, and content surface — this is the signature softness of the system."
      - "Center the hero headline at CohereText 60-72px / line-height 1.00 with -0.0200em tracking — never left-align the primary statement."
      - "Keep the chromatic gradient (coral → violet → blue) confined to photography washes and decorative overlays; UI controls stay monochrome."
      - "Use 1px solid #e5e7eb hairlines for all card and divider borders — never use drop shadows to separate surfaces."
      - "Maintain 80px vertical rhythm between major sections; cards within a section use 16-24px gaps."

    don_t:
      - "Do not apply the signature gradient to buttons, links, or any interactive control — it belongs only in imagery."
      - "Do not use drop shadows on cards or panels — Cohere separates surfaces with hairline borders and background contrast, never elevation."
      - "Do not use colors from the gradient as text fills — #ff7759, #7670c5, and #4c6ee6 are never used for UI text or icons."
      - "Do not set type below 12px or above 72px — the system has no use for oversize or micro type."
      - "Do not use left-aligned hero headlines — Cohere's editorial voice requires centered display text."
      - "Do not introduce new border-radius values; use 4px for small UI, 8px for nav elements, 22px for cards, 9999px for pills — that's the complete set."
      - "Do not use a colored CTA button — the primary action is always #17171c fill with white text; secondary actions are underline links."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Canvas | `#ffffff` | Base page background, the default surface for all content |"
    info: "| 2 | Warm Cream | `#f0eee9` | Alternate section background for visual separation without contrast |"
    info: "| 3 | Lilac Wash | `#f0dff3` | Soft chromatic surface for feature cards and decorative blocks |"
    info: "| 4 | Code Panel | `#17171c` | Dark inset surface for code snippets, AI response previews, and the dark pill button |"
    info: "| 5 | Footer | `#17171c` | Full-bleed dark surface for site footer |"

  elevation:

    info: "Cohere deliberately avoids drop shadows as a separation mechanism. Surface hierarchy is communicated through background color shifts (white → cream → lilac → ink) and 1px hairline borders at #e5e7eb. The only dark surface that 'elevates' visually is the #17171c code panel or button, which achieves prominence through tonal contrast rather than shadow."

  imagery:

    info: "Photography is editorial and human — full-bleed lifestyle shots of people in workspaces, a woman in a green silk blouse at a laptop, intimate product close-ups. Images are treated with a soft chromatic gradient wash (coral → violet → blue) that bleeds across the surface, giving every photograph a Cohere-specific warmth. Cards use 22px rounding and often contain dark code panels or AI response overlays inset on top of the image. No flat illustration system — the brand relies on photography and typographic emphasis rather than drawn graphics. Icons are minimal thin-line strokes, monochrome, 1.5px weight."

  layout:

    info: "Max-width ~1200px centered, with full-bleed sections alternating between white and cream backgrounds. Hero is centered text stack: display headline → subtitle → primary pill + underline link, with no hero image. Below the hero, a two-column image card row (product screenshot left, lifestyle photo right) with 16-24px gap. Trust logo strip follows as a single centered row. Feature section uses a 3-column icon block layout (Security / Deployment / Customization). Footer is a full-bleed dark band with a 5-column link grid plus a newsletter column on the left. Navigation is a minimal top bar — logo left, centered links, ghost button + dark pill right. Vertical rhythm uses 80px between major sections, 24-32px card padding internally."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #212121"
    - "background: #ffffff"
    - "border: #e5e7eb"
    - "accent: #ff7759 (decorative gradient only, not for UI)"
    - "primary action: no distinct CTA color"

    info: "Example Component Prompts:"
    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."
    - "Create a hero headline: centered on white canvas, CohereText 72px weight 400, color #212121, line-height 1.00, letter-spacing -1.44px. One statement, no decoration."
    - "Create a feature image card: 22px border-radius, full-bleed photograph, dark #17171c code panel inset at 24px padding with white 14px Unica77 text, 12px border-radius on the code panel."
    - "Create an outlined content card: white background, 1px solid #e5e7eb border, 22px border-radius, 32px internal padding, heading in Unica77 24px weight 700 #212121, body in Unica77 16px weight 400 #212121."
    - "Create a top navigation bar: white background, no border, logo at left, three nav links centered in Unica77 14px #212121 with 8px vertical padding, ghost 'Sign in' button and a #17171c dark pill 'Request a demo' button on the right."

  gradient_system:

    info: "Cohere has exactly one signature gradient: linear-gradient(to right, #ff7759, #7670c5, #4c6ee6). It appears only as an overlay on photography and as a faint background wash on ornamental sections. The gradient flows warm-to-cool (coral → violet → blue) and is never used on interactive elements. A second decorative variant applies the same stops at 78° for diagonal compositions. Keep this gradient as a brand expression, not a UI accent."

  monochrome_discipline:

    info: "The interface is 99% achromatic. The five chromatic colors detected (#f0dff3, #d18ee2, #4c6ee6, #ff7759, and the mid violet) all appear in nav-adjacent or illustration contexts with very low frequency. The design rule is absolute: no chromatic color touches any text, button, border, or icon. Color exists in Cohere's world as photographic atmosphere, not as interface signal."

  similar_brands:

    - "**Linear** — Same minimalist monochrome interface with a single custom typeface and pill-shaped dark CTAs on white canvases"
    - "**Anthropic** — Similar editorial approach to an AI brand — restrained palette, large display headlines, hairline borders, and photography-driven hero sections"
    - "**Notion** — Shared pill-button geometry and the practice of letting a soft cream or warm-gray surface variant create section breaks without heavy contrast"
    - "**Vercel** — Same monospaced micro-type accent, hairline #e5e7eb borders, and dark filled button as the only primary action"
    - "**Stripe** — Similar gradient-as-illustration philosophy — chromatic color confined to decorative washes and imagery, never on functional UI"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-canvas-white: #ffffff;
          --color-soft-cream: #f0eee9;
          --color-hairline-mist: #e5e7eb;
          --color-silver-rule: #d9d9dd;
          --color-fog: #93939f;
          --color-slate-caption: #75758a;
          --color-graphite-body: #616161;
          --color-press-black: #212121;
          --color-inkwell: #17171c;
          --color-charcoal-depth: #2e2e2e;
          --color-coral-glow: #ff7759;
          --gradient-coral-glow: linear-gradient(to right, #ff7759, #7670c5, #4c6ee6);
          --color-iris-wash: #7670c5;
          --color-signal-blue: #4c6ee6;
          --color-lilac-mist: #f0dff3;
          --color-orchid: #d18ee2;
        
          /* Typography — Font Families */
          --font-unica77: 'Unica77', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-coheretext: 'CohereText', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-coheremono: 'CohereMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --tracking-caption: -0.12px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.4;
          --tracking-body-sm: -0.14px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.18px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: -0.24px;
          --text-heading: 32px;
          --leading-heading: 1.3;
          --tracking-heading: -0.32px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -0.48px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: -1.44px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-56: 56px;
          --spacing-80: 80px;
          --spacing-128: 128px;
          --spacing-144: 144px;
          --spacing-160: 160px;
          --spacing-176: 176px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 22px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 22px;
          --radius-images: 22px;
          --radius-buttons: 9999px;
          --radius-smallui: 4px;
          --radius-navelements: 8px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-warm-cream: #f0eee9;
          --surface-lilac-wash: #f0dff3;
          --surface-code-panel: #17171c;
          --surface-footer: #17171c;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-canvas-white: #ffffff;
          --color-soft-cream: #f0eee9;
          --color-hairline-mist: #e5e7eb;
          --color-silver-rule: #d9d9dd;
          --color-fog: #93939f;
          --color-slate-caption: #75758a;
          --color-graphite-body: #616161;
          --color-press-black: #212121;
          --color-inkwell: #17171c;
          --color-charcoal-depth: #2e2e2e;
          --color-coral-glow: #ff7759;
          --color-iris-wash: #7670c5;
          --color-signal-blue: #4c6ee6;
          --color-lilac-mist: #f0dff3;
          --color-orchid: #d18ee2;
        
          /* Typography */
          --font-unica77: 'Unica77', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-coheretext: 'CohereText', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-coheremono: 'CohereMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --tracking-caption: -0.12px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.4;
          --tracking-body-sm: -0.14px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.18px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: -0.24px;
          --text-heading: 32px;
          --leading-heading: 1.3;
          --tracking-heading: -0.32px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -0.48px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: -1.44px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-56: 56px;
          --spacing-80: 80px;
          --spacing-128: 128px;
          --spacing-144: 144px;
          --spacing-160: 160px;
          --spacing-176: 176px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 22px;
          --radius-full: 9999px;
        }