munro_partners___style_reference:
  info: "> Editorial parchment under alpine light — a warm cream canvas holding generous whitespace, a whisper-weight grotesque, and full-bleed mountain photography where the landscape does the talking and the interface stays nearly invisible."

  theme: "light"

  info: "Munro Partners operates in a quiet, editorial register: a warm cream canvas (#fff9ee) holds generous whitespace, with every interface element trimmed in a single warm dark brown (#3f322a) that reads as ink rather than black. The Neue Haas Grotesk typography is set tight and small, with a 68px display headline at weight 400 that whispers against full-bleed mountain photography rather than shouting. A single deep teal (#004e4e) is reserved for the most important interactive moments, while muted violets, aubergine, and ice blue appear as thin accent borders on cards and data treatments. The system feels less like a financial product and more like a printed annual report — calm, spacious, and confident enough to let landscape imagery carry the emotional weight."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Cream Parchment | `#fff9ee` | `--color-cream-parchment` | Page canvas, section backgrounds, card surfaces, nav bar fill — the warm off-white that defines the entire mood and replaces what would normally be pure white |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Elevated card surfaces, video embed containers, contrast panels against the cream canvas |"
    info: "| Bark Brown | `#3f322a` | `--color-bark-brown` | Primary text, all borders, nav links, body copy, headings — replaces black throughout the system, giving every line a warm ink-like quality |"
    info: "| Warm Gray | `#9f968c` | `--color-warm-gray` | Secondary text, subtle borders, nav dividers — the mid-tone that bridges Bark Brown headings and lighter dividers |"
    info: "| Stone | `#c5bdb3` | `--color-stone` | Hairline dividers, image borders, subtle separators between sections |"
    info: "| Driftwood | `#b3aea7` | `--color-driftwood` | Input field borders, form element outlines |"
    info: "| Earth | `#796e65` | `--color-earth` | Secondary headings, muted label text |"
    info: "| Light Stone | `#e5e5e5` | `--color-light-stone` | Lightest border tone, disabled states, subtle structure lines |"
    info: "| Ink | `#000000` | `--color-ink` | Input text color, high-contrast form text — the only context where true black appears |"
    info: "| Deep Teal | `#004e4e` | `--color-deep-teal` | Primary action buttons, filled CTAs — the single chromatic fill color permitted for interactive moments, creating quiet authority against the cream |"
    info: "| Aubergine | `#560e4b` | `--color-aubergine` | Decorative card borders, heading accent strokes, editorial highlight containers |"
    info: "| Iris | `#a56eff` | `--color-iris` | Decorative card borders, accent strokes on data containers |"
    info: "| Cobalt | `#3074f9` | `--color-cobalt` | Link accents, decorative borders on blue-themed content blocks |"
    info: "| Ice Blue | `#bfebfe` | `--color-ice-blue` | Input field backgrounds, soft highlight washes on data rows, subtle surface tint |"
    info: "| Saffron | `#feed5a` | `--color-saffron` | Occasional button accent for editorial highlight CTAs |"
    info: "| Amber | `#c67700` | `--color-amber` | Occasional button accent for warm-themed CTAs |"

  tokens___typography:

    neue_haas_grotesk_display___primary_typeface_for_all_headings__body_copy__nav__and_ui_text___the_premium_editorial_grotesque_that_carries_the_entire_interface__weight_400_for_display_headlines_creates_a_whisper_rather_than_a_shout__weight_600_for_subheadings_and_emphasis__weight_700_reserved_for_section_labels_and_small_caps_headers____font_neue_haas_grotesk_display:
      - "**Substitute:** Inter, Helvetica Neue, Neue Haas Grotesk Text Pro (closest free alternative: Inter at matched tracking)"
      - "**Weights:** 400, 600, 700"
      - "**Sizes:** 12, 13, 14, 16, 22, 24, 30, 43, 68"
      - "**Line height:** 0.75, 0.81, 1.00, 1.05, 1.09, 1.10, 1.13, 1.17, 1.20, 1.30, 1.41, 1.43, 1.50"
      - "**Letter spacing:** 0.008em at 68px (0.54px), 0.009em at 43px (0.39px), 0.013em at 30px (0.39px), 0.015em at 22px (0.33px), 0.017em at 16px (0.27px)"
      - "**OpenType features:** `\"ss01\" on, \"tnum\" on`"
      - "**Role:** Primary typeface for all headings, body copy, nav, and UI text — the premium editorial grotesque that carries the entire interface. Weight 400 for display headlines creates a whisper rather than a shout; weight 600 for subheadings and emphasis; weight 700 reserved for section labels and small-caps headers"

    neue_haas_grotesk_text___secondary_typeface_for_small_utility_text__nav_micro_copy__fine_print___slightly_more_compact_than_the_display_variant_for_10_12px_sizes____font_neue_haas_grotesk_text:
      - "**Substitute:** Inter, Helvetica Neue"
      - "**Weights:** 400, 500"
      - "**Sizes:** 10, 11, 12"
      - "**Line height:** 1.00, 1.50, 1.80"
      - "**Letter spacing:** 0.018em at 12px (0.22px)"
      - "**OpenType features:** `\"tnum\" on`"
      - "**Role:** Secondary typeface for small utility text, nav micro-copy, fine print — slightly more compact than the Display variant for 10–12px sizes"

    font_awesome_5_brands___font_awesome_5_brands___detected_in_extracted_data_but_not_described_by_ai____font_font_awesome_5_brands:
      - "**Weights:** 400"
      - "**Sizes:** 18px"
      - "**Line height:** 1"
      - "**Role:** Font Awesome 5 Brands — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.8 | 0.18px | `--text-caption` |"
      info: "| body | 14px | 1.43 | 0.24px | `--text-body` |"
      info: "| heading-sm | 22px | 1.2 | 0.33px | `--text-heading-sm` |"
      info: "| heading | 30px | 1.13 | 0.39px | `--text-heading` |"
      info: "| heading-lg | 43px | 1.09 | 0.39px | `--text-heading-lg` |"
      info: "| display | 68px | 1.05 | 0.54px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 80 | 80px | `--spacing-80` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 2px |"
      info: "| links | 15px |"
      info: "| badges | 2px |"
      info: "| images | 15px |"
      info: "| inputs | 2px |"
      info: "| buttons | 2px |"

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 64px"
      - "**Card padding:** 20px"
      - "**Element gap:** 20px"

  components:

    full_bleed_hero_image:
      role: "Section opening visual that fills the entire viewport width"

      info: "Full-bleed landscape photograph (mountains, winding roads, open terrain) spanning 100% viewport width and 60–80vh height. No border-radius. Text overlay sits at bottom-left in white (#ffffff) using display weight 400 at 68px. A large vertical wordmark in white at 100–200px weight 700 anchors the right edge."

    editorial_wordmark:
      role: "Brand identity mark used as both logo and decorative element"

      info: "The text 'MUNRO' set in Neue Haas Grotesk Display weight 700, all uppercase, letter-spacing 0.09em. Functions as nav logo at 16px (top-right) and as oversized decorative element at 100–200px (right edge of hero). White on dark photography, Bark Brown (#3f322a) on cream."

    slim_navigation_bar:
      role: "Persistent top header"

      info: "Full-width bar on Cream Parchment (#fff9ee) background, 48–56px height. Left: hamburger menu icon + 'MENU' label in Neue Haas Grotesk Text 12px weight 500, letter-spacing 0.018em, color Bark Brown. Right: 'MUNRO' wordmark. No background fill change on scroll, no shadow — the bar is flat and barely visible."

    filled_teal_cta_button:
      role: "Primary action trigger — the only filled chromatic button in the system"

      info: "Background Deep Teal (#004e4e), text white, Neue Haas Grotesk Display 12px weight 600, letter-spacing 0.018em, uppercase. Padding 10px vertical, 20px horizontal. Border-radius 2px. No shadow. This is the system sole filled action color — use it for exactly one primary action per view."

    ghost_text_button:
      role: "Secondary action or link-style trigger"

      info: "No background, no border. Text only in Bark Brown (#3f322a), Neue Haas Grotesk Display 12px weight 600, uppercase, letter-spacing 0.018em. Padding 10px vertical, 12px horizontal. Underline on hover."

    section_label:
      role: "Small-caps heading introducing a content block"

      info: "Neue Haas Grotesk Display 12px weight 700, uppercase, letter-spacing 0.017em, color Bark Brown (#3f322a). No accent line or decorative element — the typography weight and casing does all the work. Examples: 'OUR GLOBAL GROWTH FUNDS'."

    display_headline:
      role: "Hero or section-opening statement"

      info: "Neue Haas Grotesk Display 68px weight 400, line-height 1.05, letter-spacing 0.54px. White when overlaid on photography, Bark Brown (#3f322a) on cream. The weight-400 choice is the signature — it whispers rather than shouts, creating authority through restraint."

    video_embed_card:
      role: "Embedded media container (YouTube, etc.)"

      16: "9 aspect ratio container with Paper White (#ffffff) background, 2px border-radius. Video thumbnail fills the container. Title overlaid top-left in white Neue Haas Grotesk Display 22px weight 400 with a subtitle at 12px. Play button centered."

    financial_data_table:
      role: "Stacked data rows showing metrics with right-aligned values"

      info: "Full-width rows separated by 1px Stone (#c5bdb3) hairline borders. Left column: label in Neue Haas Grotesk Display 14px weight 400, color Earth (#796e65). Right column: value in same size, color Bark Brown (#3f322a), right-aligned. No table header, no alternating row colors — pure hairlines and typography do the work."

    editorial_body_paragraph:
      role: "Long-form descriptive text"

      info: "Neue Haas Grotesk Display 16px weight 400, line-height 1.41, color Bark Brown (#3f322a) on Cream Parchment (#fff9ee). Max-width 680px for readability. Generous margin-bottom (24–32px) between paragraphs."

    underlined_input_field:
      role: "Form input — text entry"

      info: "No visible box, no background fill. Bottom border 1px in Ink (#000000) or Driftwood (#b3aea7). Placeholder text in Warm Gray (#9f968c) at 14px. On focus: bottom border thickens to 2px in Deep Teal (#004e4e). No border-radius — sharp bottom edge only."

    accent_border_card:
      role: "Content card with thin chromatic border"

      info: "Cream Parchment (#fff9ee) background, 1px border in a chromatic accent (Aubergine #560e4b, Iris #a56eff, Cobalt #3074f9, or Ice Blue #bfebfe). Border-radius 2px. Padding 20px. No shadow, no fill change. The colored border is the differentiator — multiple cards on a page may use different accent colors."

    hairline_divider:
      role: "Section separator"

      info: "1px horizontal line in Stone (#c5bdb3), full container width, 1px height. No margin — sits flush within section spacing rhythm."

    image_container:
      role: "Photograph or illustration frame"

      info: "Images sit in containers with 15px border-radius. No border. Full-bleed within container. Used for editorial photography, team portraits, and landscape shots."

  do_s_and_don_ts:

    do:
      - "Set body text in Neue Haas Grotesk Display 14px/1.43 in Bark Brown (#3f322a) on Cream Parchment (#fff9ee) — never invert this pairing"
      - "Use 2px border-radius for all buttons, badges, inputs, and accent-border cards — the near-square edge is a signature"
      - "Use 15px border-radius exclusively for image containers and decorative links"
      - "Reserve Deep Teal (#004e4e) for the single primary action per view — filled buttons in any other chromatic color are forbidden"
      - "Set display headlines at 68px weight 400 with letter-spacing 0.54px — the whisper-weight is the defining typographic choice"
      - "Separate content blocks with 1px Stone (#c5bdb3) hairlines, not card containers or background fills"
      - "Use full-bleed landscape photography as section heroes with white text overlays — let imagery carry emotional weight"
      - "Set section labels in 12px weight 700 uppercase with letter-spacing 0.017em — the casing and weight do the hierarchy work"

    don_t:
      - "Never use #000000 for body text, headings, or borders — Bark Brown (#3f322a) replaces black throughout the system"
      - "Never use pure white (#ffffff) as the page canvas — Cream Parchment (#fff9ee) is the only acceptable base"
      - "Never use border-radius greater than 2px on buttons, badges, or inputs — large radii break the editorial register"
      - "Never stack multiple chromatic accent colors within a single component — one accent per container"
      - "Never use weight 700 for editorial body copy or long-form text — reserve 700 for labels and wordmarks"
      - "Never apply box-shadows or drop-shadows to cards or surfaces — the system is flat, separated only by hairlines"
      - "Never use gradients of any kind — the system is entirely flat color"
      - "Never use #feed5a or #c67700 for primary CTAs — these are one-off editorial accents, not system action colors"
      - "Never set body text larger than 16px or smaller than 14px — the editorial scale stays tight"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Cream Parchment | `#fff9ee` | Page canvas and section backgrounds — the base warm tone |"
    info: "| 1 | Paper White | `#ffffff` | Elevated card and video embed surfaces sitting above the cream |"
    info: "| 2 | Ice Blue Wash | `#bfebfe` | Tinted surface for input fields and data row highlights |"

  imagery:

    info: "Full-bleed landscape photography dominates the visual language — Scottish Highland mountains, winding single-lane roads through green valleys, open terrain under overcast skies. Treatment is naturalistic, high-resolution, and unfiltered; no duotone, no color grading overlays, no vignettes. Images are always full-bleed (no rounded corners when used as heroes) but use 15px radius when inset as content images. Photography is the primary visual content; illustration and abstract graphics are absent. Icon style is minimal line icons (hamburger menu visible in nav) with thin strokes. Density is image-heavy at section openings, text-dominant in body sections. The imagery role is emotional atmosphere and brand storytelling — nature as metaphor for long-term investing."

  layout:

    info: "Full-bleed hero photography at the top of the page, then a transition to a max-width 1280px centered content area on Cream Parchment. The hero is a full-viewport-width image with overlaid text at bottom-left and a large vertical wordmark at the right edge. Below the hero, content flows in a single editorial column or a two-column split (video left, data table right) with generous vertical spacing (64px between sections). Section rhythm is consistent: hairline divider, then a section label in small-caps, then content. No alternating dark/light bands — the entire body is cream. Navigation is a minimal slim bar at the top with hamburger menu left and wordmark right. Grid usage is minimal — mostly single-column editorial flow with occasional 2-column splits. The overall density is spacious, magazine-like, and unhurried."

  agent_prompt_guide:

    quick_color_reference:
    - "Text: #3f322a (Bark Brown)"
    - "Background: #fff9ee (Cream Parchment)"
    - "Border: #c5bdb3 (Stone) for hairlines, #3f322a for structure"
    - "Accent: #004e4e (Deep Teal) for primary action"
    - "primary action: #a56eff (filled action)"

    example_component_prompts:

    - "**Hero section**: Full-bleed landscape photograph filling 100vw × 70vh. Headline 'Invest in the journey' overlaid bottom-left in white, Neue Haas Grotesk Display 68px weight 400, letter-spacing 0.54px. Vertical 'MUNRO' wordmark on right edge in white, weight 700, 120px size, letter-spacing 0.09em. No border-radius on the image."

    - "**Section label + body**: Section label 'OUR GLOBAL GROWTH FUNDS' in Neue Haas Grotesk Display 12px weight 700, uppercase, letter-spacing 0.017em, color #3f322a. Below it, body paragraph in 16px weight 400, line-height 1.41, color #3f322a, max-width 680px. 1px #c5bdb3 hairline divider above the label."

    - "**Data table**: Stacked rows, each separated by 1px #c5bdb3 border. Left column label in 14px weight 400, color #796e65. Right column value in 14px weight 400, color #3f322a, right-aligned. No header row, no alternating fills."

    - "Create a Primary Action Button: #a56eff background, #3f322a text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."

    - "**Accent border card**: Background #fff9ee, 1px border in #560e4b (Aubergine), border-radius 2px, padding 20px. Content inside in 14px weight 400, color #3f322a. No fill change, no shadow."

  elevation_philosophy:

    info: "This system intentionally avoids shadows as a design principle. All surface separation is achieved through three mechanisms: (1) hairline 1px borders in Stone (#c5bdb3) or Bark Brown (#3f322a), (2) contrast between Cream Parchment (#fff9ee) and Paper White (#ffffff) surfaces, and (3) the visual edge where full-bleed photography meets the cream canvas. Never apply box-shadow, drop-shadow, or any blur-based elevation — it would break the flat editorial register."

  border_radius_system:

    info: "The system uses exactly two border-radius values to create a deliberate tension: 2px for all interactive and structural elements (buttons, badges, inputs, accent-border cards) — this near-square edge reads as editorial, typeset, printed. 15px for all image containers and decorative links — this generous rounding softens photography and gives visual assets warmth. Never mix these radii on the same element type. The contrast between the two is part of the identity: the page feels both sharply editorial and warmly human."

  similar_brands:

    - "**Stewart Investors** — Same warm cream canvas and restrained editorial typography approach to investment management branding"
    - "**Orbis** — Same full-bleed landscape photography + whisper-weight grotesque headline pattern, treating investing as a long journey"
    - "**Walter Scott Investment Partners** — Same cream parchment background, minimal chrome, and editorial restraint in financial communications"
    - "**First Sentier Investors** — Same warm off-white palette and premium grotesque typography in Australian investment management context"
    - "**Magellan Asset Management** — Same editorial publication feel with landscape photography and generous whitespace as brand differentiator"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-cream-parchment: #fff9ee;
          --color-paper-white: #ffffff;
          --color-bark-brown: #3f322a;
          --color-warm-gray: #9f968c;
          --color-stone: #c5bdb3;
          --color-driftwood: #b3aea7;
          --color-earth: #796e65;
          --color-light-stone: #e5e5e5;
          --color-ink: #000000;
          --color-deep-teal: #004e4e;
          --color-aubergine: #560e4b;
          --color-iris: #a56eff;
          --color-cobalt: #3074f9;
          --color-ice-blue: #bfebfe;
          --color-saffron: #feed5a;
          --color-amber: #c67700;
        
          /* Typography — Font Families */
          --font-neue-haas-grotesk-display: 'Neue Haas Grotesk Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-neue-haas-grotesk-text: 'Neue Haas Grotesk Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-font-awesome-5-brands: 'Font Awesome 5 Brands', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.8;
          --tracking-caption: 0.18px;
          --text-body: 14px;
          --leading-body: 1.43;
          --tracking-body: 0.24px;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: 0.33px;
          --text-heading: 30px;
          --leading-heading: 1.13;
          --tracking-heading: 0.39px;
          --text-heading-lg: 43px;
          --leading-heading-lg: 1.09;
          --tracking-heading-lg: 0.39px;
          --text-display: 68px;
          --leading-display: 1.05;
          --tracking-display: 0.54px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-20: 20px;
          --spacing-40: 40px;
          --spacing-80: 80px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 64px;
          --card-padding: 20px;
          --element-gap: 20px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-xl: 15px;
          --radius-2xl: 20px;
        
          /* Named Radii */
          --radius-cards: 2px;
          --radius-links: 15px;
          --radius-badges: 2px;
          --radius-images: 15px;
          --radius-inputs: 2px;
          --radius-buttons: 2px;
        
          /* Surfaces */
          --surface-cream-parchment: #fff9ee;
          --surface-paper-white: #ffffff;
          --surface-ice-blue-wash: #bfebfe;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-cream-parchment: #fff9ee;
          --color-paper-white: #ffffff;
          --color-bark-brown: #3f322a;
          --color-warm-gray: #9f968c;
          --color-stone: #c5bdb3;
          --color-driftwood: #b3aea7;
          --color-earth: #796e65;
          --color-light-stone: #e5e5e5;
          --color-ink: #000000;
          --color-deep-teal: #004e4e;
          --color-aubergine: #560e4b;
          --color-iris: #a56eff;
          --color-cobalt: #3074f9;
          --color-ice-blue: #bfebfe;
          --color-saffron: #feed5a;
          --color-amber: #c67700;
        
          /* Typography */
          --font-neue-haas-grotesk-display: 'Neue Haas Grotesk Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-neue-haas-grotesk-text: 'Neue Haas Grotesk Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-font-awesome-5-brands: 'Font Awesome 5 Brands', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.8;
          --tracking-caption: 0.18px;
          --text-body: 14px;
          --leading-body: 1.43;
          --tracking-body: 0.24px;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: 0.33px;
          --text-heading: 30px;
          --leading-heading: 1.13;
          --tracking-heading: 0.39px;
          --text-heading-lg: 43px;
          --leading-heading-lg: 1.09;
          --tracking-heading-lg: 0.39px;
          --text-display: 68px;
          --leading-display: 1.05;
          --tracking-display: 0.54px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-20: 20px;
          --spacing-40: 40px;
          --spacing-80: 80px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-xl: 15px;
          --radius-2xl: 20px;
        }