# Munropartners Com Au · Design system migration spec

> Source: https://www.munropartners.com.au  ·  Curated by OpenDesign  ·  en

> The site successfully bridges premium editorial aesthetics with complex financial data by using strong photographic anchors and rigorous typographic restraint.

## 1. Identity DNA

The system treats financial guidance as a form of cartography, mapping an investor's path through complex terrain with clarity and assurance. Its identity is built on the principles of premium **growth**, **guidance**, and **longevity**, translating these abstract values into a tangible visual language anchored by landscape imagery.

**One-liner:** A premium wealth management firm presenting investment growth as a guided journey through a natural landscape.
**Keywords:** premium · growth · guidance · landscape · longevity
**Analogy:** A topographic map guiding investors through a complex financial terrain.

## 2. Color

The palette is fundamentally photographic, composed of warm, earthy neutrals designed to recede and let the hero imagery establish the mood. This restraint ensures maximum legibility for the financial data that forms the core of the experience.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#fff9ee` | main background |
| `--ink` | `#3f322a` | body text |
| `--ink-soft` | `rgba(63,50,42,0.5)` | secondary text |
| `--muted` | `rgba(63,50,42,0.5)` | placeholder |
| `--line` | `rgba(63,50,42,0.1)` | divider |

**Color principle:** Warm, earthy neutrals that let the photographic hero drive visual interest while maintaining maximum readability for financial data.

Color serves as a stable, readable foundation rather than a primary communicator of emotion or action.

## 3. Typography

A modern, grotesque sans-serif provides a clean, objective voice, its neutrality perfectly suited for presenting financial data with authority. Typographic hierarchy is achieved through measured scale and weight, not decorative contrast, maintaining a consistent tone of professional calm.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1px | Hero headline and main section titles |
| body | 22px | 1.6 | 400 | 0.2px | Introductory narrative and supporting text |
| small | 14px | 1.3 | 400 | 0.2px | Disclaimers and fine print |

**Type rules:**
- Use uppercase with wide tracking for secondary labels and table headers
- Maintain a clean, neutral typographic hierarchy that prioritizes clarity for financial data
- Reserve heavier weights strictly for emphasis or interactive states

## 4. Spacing

Spacing follows an open, generous rhythm that mirrors the expansive quality of the landscape photography, creating pauses and allowing content to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical spacing that mirrors the open, expansive feeling of the landscape imagery.

## 5. Surfaces

The design avoids depth through shadow, instead using subtle, earthy borders to define sections and separate data. This creates a flat, grounded interface where structure is communicated through clean, linear division.

- **Radius:** sm 2px · md 15px · lg 20px · pill 999px
- **Borders:** 1px solid lines using a muted earthy brown to separate rows and define sections.

## 6. Layout

The layout begins with immersive, full-bleed photographic statements that establish context and tone. Content then flows into a disciplined, single-column structure, switching to clean tabular formats where financial data requires precise, horizontal alignment.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 20px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-bleed hero followed by generous single-column content blocks with a clean horizontal tabular layout for financial data.

## 7. Motion & Interaction

Motion is deliberately minimal and functional, using subtle linear transitions to confirm interactions without distraction. The philosophy is one of smooth, predictable change, ensuring the interface feels steady and reliable rather than playful or dynamic.

- **Durations:** micro 200ms · small 300ms · medium 400ms
- **Easing:** `linear`
- **Patterns:**
  - Subtle linear transitions on interactive elements for a calm, steady feel.

- **Hover:** Opacity changes or background-color shifts on a linear timeline.
- **Click:** Subtle visual feedback followed by smooth navigation.
- **Transition:** Linear timing functions for predictable, non-distracting state changes.
- **Keyboard:** Standard focusable elements with standard browser outlines.

## 8. Voice & Don'ts

The editorial voice is authoritative, calm, and reassuringly professional, focusing on long-term perspective with grounded, aspirational headlines. Calls to action are understated and direct, relying on clear labels and clean styling rather than aggressive urgency.

- **Tone:** Authoritative, calm, and reassuringly professional.
- **Headline style:** Aspirational yet grounded, focusing on long-term perspective.
- **CTA style:** Understated and direct, relying on clear labels rather than aggressive styling.
- **Avoid:** Hyperbolic marketing speak / Aggressive or loud calls to action / Complex financial jargon without context / Neon or highly saturated accent colors / Cluttered or busy layouts

### Don'ts
- ❌ Don't use bright, saturated accent colors — the screenshot shows a restrained palette of earthy browns and warm off-whites.
- ❌ Don't use heavy drop shadows on components — the design relies on subtle borders and clean spacing for definition.
- ❌ Don't use serif or decorative fonts — the screenshot exclusively uses a clean grotesque sans-serif typeface.
- ❌ Don't crowd the interface with dense grids — the layout uses generous whitespace and a single-column narrative flow.
- ❌ Don't use rounded pill buttons for primary actions — interactive elements appear as subtle text links or simple outlined rectangles.
- ❌ Don't use stark, cold white backgrounds — the base background is consistently a warm, creamy off-white (#fff9ee).

It deliberately avoids the clutter of hyperbolic marketing, decorative typography, and busy layouts in favor of focused, tranquil presentation.

## System Prompt (paste into AI tool)

```
This is a premium wealth management website that visualizes financial growth through a journey metaphor. The design relies on a warm, earthy color palette anchored by a creamy off-white background (#fff9ee) and deep brown ink (#3f322a), allowing the large, dramatic landscape photography to be the primary visual focus. The typography is strictly modern grotesque sans-serif, creating a clean, objective, and highly readable interface for financial data. Critical constraints include avoiding overly bright accent colors, rejecting heavy shadows in favor of subtle border definitions, and maintaining generous spacing to reflect a calm, authoritative brand voice that prioritizes long-term perspective over urgent, aggressive conversion tactics.
```