---
title: "Munro Partners design system"
variant: extended
source: https://www.munropartners.com/
captured_at: 2026-10-12
theme: light
industry: fintech
generator: Design DNA (https://four.wiralomi.com/style/munropartners-com-au)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Munro Partners · Design System

> Growth investing, grounded in a landscape of possibility.

**Theme:** light · **Industry:** fintech · **Source:** https://www.munropartners.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Munro Partners presents global growth investing through a restrained editorial layout and immersive landscape photography. Warm ivory, deep brown typography, fine rules, and generous open space keep the focus on the investment journey.

## North star

Let expansive landscape imagery introduce the story, then keep every informational section quiet, spacious, and finely ruled.

## Overview

The page pairs a warm ivory canvas (#fff9ee) with dark brown text (#3f322a), creating a softer, less institutional feel than a stark white financial site. A full-width mountain-road photograph opens the experience; its saturated greens and blue sky provide the strongest colour, while oversized vertical Munro lettering and a small lower-left headline make the image feel like a campaign cover. Below, the interface returns to a quiet, single-colour field. Large, light Neue Haas Grotesk Display typography carries the editorial voice, with compact uppercase labels and restrained buttons providing navigation cues. Sections are separated by fine warm-gray rules rather than cards or shadows. The long scroll moves from brand story to fund information, areas of interest, and news, with ample blank space preserving a calm, considered pace. Small plum, teal, pale blue, and yellow accents appear sparingly; they should not overpower the ivory-and-brown identity.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Ivory | `#fff9ee` | `--color-gallery-ivory` | brand | Dominant page canvas and background for the long editorial sections. |
| Walnut Ink | `#3f322a` | `--color-walnut-ink` | brand | Primary heading, body, navigation, and link text on light backgrounds. |
| Linen Stone | `#ebe5da` | `--color-linen-stone` | surface | Muted surface and occasional filled topic-link treatment. |
| Pencil Rule | `#c5bdb3` | `--color-pencil-rule` | neutral | Fine separators and outlined button or link borders. |
| Mulberry Ink | `#560e4b` | `--color-mulberry-ink` | accent | Occasional accent text, headings, and links; secondary to the warm neutral palette. |
| Glacier Blue | `#bfebfe` | `--color-glacier-blue` | surface | Pale blue input surface and occasional muted text or link detail. |
| Mushroom Gray | `#786d64` | `--color-mushroom-gray` | neutral | Muted supporting copy and secondary explanatory text. |
| Marigold Signal | `#feed5a` | `--color-marigold-signal` | accent | Small highlight or link accent; use sparingly against the ivory canvas. |
| Media Pewter | `#b2aea6` | `--color-media-pewter` | semantic | Minor media or miscellaneous measured detail, not a defining interface colour. |
| Deep Eucalyptus | `#004e4e` | `--color-deep-eucalyptus` | accent | Occasional inverse surface or link accent, used in limited areas. |
| Orchid Violet | `#a56eff` | `--color-orchid-violet` | accent | Sparse accent text or link colour; not a dominant brand field. |
| Amber Ochre | `#c67700` | `--color-amber-ochre` | semantic | Minor link detail in measured data, not a central palette colour. |
| Cobalt Note | `#3074f9` | `--color-cobalt-note` | semantic | Rare text detail in measured data; avoid using as a major interface colour. |
| Weathered Taupe | `#9f958c` | `--color-weathered-taupe` | neutral | Occasional subdued navigation or supporting-text detail. |

### Semantic aliases

`--color-canvas` → `#fff9ee` (Gallery Ivory) · `--color-surface` → `#ebe5da` (Linen Stone) · `--color-surface-2` → `#004e4e` (Deep Eucalyptus) · `--color-surface-3` → `#bfebfe` (Glacier Blue) · `--color-text` → `#3f322a` (Walnut Ink) · `--color-text-muted` → `#786d64` (Mushroom Gray) · `--color-text-subtle` → `#bfebfe` (Glacier Blue) · `--color-border` → `#c5bdb3` (Pencil Rule) · `--color-accent` → `#560e4b` (Mulberry Ink) · `--color-accent-2` → `#a56eff` (Orchid Violet) · `--color-accent-3` → `#004e4e` (Deep Eucalyptus)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#3f322a` | `#fff9ee` | 11.78:1 | AAA |
| `#3f322a` | `#ebe5da` | 9.85:1 | AAA |
| `#3f322a` | `#004e4e` | 1.29:1 | fail |
| `#3f322a` | `#bfebfe` | 9.72:1 | AAA |
| `#786d64` | `#fff9ee` | 4.8:1 | AA |
| `#786d64` | `#ebe5da` | 4.02:1 | AA-large |
| `#786d64` | `#004e4e` | 1.9:1 | fail |
| `#786d64` | `#bfebfe` | 3.96:1 | AA-large |
| `#bfebfe` | `#fff9ee` | 1.21:1 | fail |
| `#bfebfe` | `#ebe5da` | 1.01:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| neue-haas-grotesk-display | `--font-body` | webfont | 400, 600 | Primary display, headings, body copy, navigation, captions, and links. | Inter |
| neue-haas-grotesk-text | `--font-neue-haas-grotesk-text` | webfont | 500 | Small uppercase button labels. | Inter |

- **neue-haas-grotesk-display:** Use mostly regular weight with occasional 600; large calm headlines, compact uppercase section labels, and lightly tracked body text.
- **neue-haas-grotesk-text:** Measured at medium weight; keep button text compact, uppercase, and visually secondary.

### Type scale — Golden Ratio (ratio ≈ 1.62, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 68px | 400 | 1 | 0 | — | neue-haas-grotesk-display | Oversized hero or campaign-style display lettering. |
| h1 | 30px | 400 | 1.2 | 0 | — | neue-haas-grotesk-display | Primary page and section headline text. |
| h2 | 22px | 400 | 1.09 | 0 | — | neue-haas-grotesk-display | Secondary section and content headlines. |
| body | 16px | 400 | 1.5 | 0.013em | — | neue-haas-grotesk-display | Introductory narrative and long-form supporting copy. |
| caption | 12px | 400 | 1.17 | 0.008em | — | neue-haas-grotesk-display | Small fund notes, dates, and legal details. |
| nav | 22px | 400 | 1.09 | 0 | — | neue-haas-grotesk-display | Navigation labels and menu text. |
| link | 16px | 400 | 1.5 | 0 | — | neue-haas-grotesk-display | Fund, topic, report, and news links. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 3, 4, 5, 6, 8, 10, 20, 40 px.
- Section rhythm 40px · element gap 10px · card padding — · max content width 1400px.

The page uses a broad desktop canvas, measured to a maximum width of 1400px, with left-aligned content and occasional multi-column areas. The hero image spans the viewport; following sections return to the warm canvas and are divided by thin horizontal rules. Content density is deliberately low, with long gaps around the who-we-are and fund areas. The fund area is more tabular and multi-column, while interest topics and news remain editorial rather than card-heavy. Maintain a compact component rhythm within sections, but preserve generous overall breathing room.

## Shape & elevation

- Radius: button `2px` · media `15px` · link `15px` · xs `2px` · sm `15px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is predominantly flat: no measured shadows, raised cards, or prominent layered panels. Use thin warm-gray rules to define section boundaries and table rows, plus restrained outlined controls. Image composition provides the main depth; keep surfaces flush with the canvas and avoid floating-card effects.

## Imagery

Use high-quality, full-bleed landscape photography as the defining brand image: a winding road crossing green mountain terrain, framed wide enough to read as a destination. Keep the photo natural and unembellished, with its own greens and sky blues supplying colour contrast. Place large white vertical brand lettering at the right edge and a light headline low on the left. Supporting sections should not introduce decorative illustration or 3D treatments.

## Components

### Hero image

Full-width mountain landscape with a low-left headline and oversized vertical white Munro lettering along the right edge.

### Menu strip

A slim ivory navigation band with a small menu icon and label on the left, brand wordmark on the right, and a fine lower rule.

### Intro statement

Large, regular-weight dark-brown copy set left-aligned on ivory, followed by substantial open space and a horizontal separator.

### Fund links

Editorial fund information and return figures with thin borders, compact notes, and links rather than elevated cards.

### See more button

Small uppercase label in medium text weight, outlined with a 1px #c5bdb3 border, subtle 2px radius, and compact padding.

### Topic links

Interest-area names presented as simple links, with occasional #ebe5da filled pill styling and a 15px radius.

### News list

Latest updates arranged as a restrained editorial feed with dates, prominent headlines, and understated links.

### Measured component styles

- **Primary button** (“SEE MORE”): transparent background · text #3f322a · border 1px solid #c5bdb3 · radius 2px · padding 8px 12px · 500 10px neue-haas-grotesk-text · uppercase
- **Link** (“Munro Global Growth Fund Long / short ab”): transparent background · text #3f322a · border 1px solid #c5bdb3 · radius 0px · padding 20px 8px · 400 16px neue-haas-grotesk-display
- **Input**: background #bfebfe · text #3f322a · border 1px solid #bfebfe · radius 0px · padding 15px 20px · 400 16px neue-haas-grotesk-display
- **Navigation item** (“Invest in the journey MENU Our funds Mun”): transparent background · text #3f322a · radius 0px · padding 0px · 400 16px neue-haas-grotesk-display

## Do

- Use #fff9ee as the principal canvas.
- Set core text in #3f322a.
- Lead with authentic, expansive landscape photography.
- Separate content with thin #c5bdb3 rules.
- Use Neue Haas Grotesk-style typography with calm weights.
- Keep generous open space between major content groups.

## Don't

- Do not turn every section into a bordered card.
- Do not use pure white as the main canvas.
- Do not let accent colours compete with the landscape.
- Do not add shadows or floating UI layers.
- Do not center all content or over-tighten the layout.
- Do not treat photographic greens as the interface palette.

## Agent prompt

Build a new page in the Munro Partners visual style. Use Gallery Ivory (#fff9ee) as the main canvas and Walnut Ink (#3f322a) for primary text. Introduce the page with a wide, natural landscape photograph and restrained, large Neue Haas Grotesk-style typography. Keep navigation quiet and compact; use fine Pencil Rule (#c5bdb3) separators rather than cards or shadows. Structure content as spacious editorial sections with clear left alignment, occasional data columns, and small uppercase labels. Use Linen Stone (#ebe5da), Deep Eucalyptus (#004e4e), or Glacier Blue (#bfebfe) only as limited supporting accents. Preserve long stretches of breathing room, especially around section transitions. Keep controls understated, with thin outlines, small labels, and no decorative elevation.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed landscape hero with a low-left headline and vertical brand lettering at the right. | brand introduction, menu access, fund navigation | mountain-road photography, oversized vertical wordmark, light headline |
| 2 | other | Single-column statement on ivory, followed by open space and a thin rule. | brand positioning | large regular text, left alignment, hairline divider |
| 3 | feature-split | Open single-column section with extensive whitespace and compact supporting data toward the right. | company overview, investment context | small uppercase label, quiet metrics, fine horizontal rules |
| 4 | product-grid | Fund information spans multiple columns with rows of linked names, performance figures, and notes. | fund discovery, performance comparison | tabular links, fine rules, compact captions |
| 5 | category-nav | Editorial topic links sit within a broad single-column section, with a small see-more control. | topic exploration, see more | simple text links, occasional muted pill, outlined button |
| 6 | content-feed | Single-column editorial news feed with dates, headlines, and links. | news browsing, report access | date labels, prominent headlines, subtle dividers |

## Source CSS custom properties (selected)

```css
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--color--fl-heading-text: #3f322a;
--wp--preset--color--fl-body-bg: #fff9ee;
--wp--preset--color--fl-body-text: #3f322a;
--wp--preset--color--fl-accent: #3f322a;
--wp--preset--color--fl-accent-hover: #3f322a;
--wp--preset--color--fl-topbar-bg: #ffffff;
--wp--preset--color--fl-topbar-text: #000000;
--wp--preset--color--fl-topbar-link: #2b7bb9;
--wp--preset--color--fl-topbar-hover: #2b7bb9;
--wp--preset--color--fl-header-bg: #ffffff;
--wp--preset--color--fl-header-text: #000000;
--wp--preset--color--fl-header-link: #2b7bb9;
--wp--preset--color--fl-header-hover: #2b7bb9;
--wp--preset--color--fl-nav-bg: #ffffff;
--wp--preset--color--fl-nav-link: #2b7bb9;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/munropartners-com-au