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

# Monzo · Design System

> Friendly banking, framed by bold simplicity

**Theme:** light · **Industry:** fintech · **Source:** https://monzo.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._

Monzo pairs confident, rounded typography with bright open layouts and a distinctive coral accent. Lifestyle photography and product-led cards make practical banking features feel approachable, while deep navy anchors calls to action and selected sections.

## North star

Keep the interface calm and legible, then use rounded components, candid lifestyle imagery, and sparing coral to make banking feel human.

## Overview

The page is built on a white canvas, with pale green-tinted panels creating gentle breaks between long runs of content. Coral is a recognizable brand accent, most visible in the wordmark and product imagery, rather than a dominant interface fill. Deep navy carries primary buttons, inverse cards, and high-contrast text; muted gray handles supporting copy and navigation. MonzoSansDisplay gives headings a bold, rounded presence, while MonzoSansText keeps body copy and controls straightforward and readable. The layout alternates spacious, centered introductions with multi-column feature cards and asymmetric split sections. Large lifestyle photographs and videos provide warmth and context, while close-up phone and card imagery explains the product. Rounded cards, pill-shaped controls, and restrained hairlines soften the interface. The overall strategy balances friendly personality with clear financial information: keep the canvas calm, make the hierarchy obvious, and let imagery supply most of the color and emotion.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas and light text on dark buttons or inverse sections. |
| Slate Mist | `#6b747b` | `--color-slate-mist` | neutral | Muted supporting copy, secondary links, and navigation text. |
| Mint Haze | `#f2f8f3` | `--color-mint-haze` | surface | Soft feature-card and section backgrounds, especially savings and account content. |
| Midnight Ink | `#091723` | `--color-midnight-ink` | brand | Primary text, dark CTA fills, and outlines on secondary buttons. |
| Deep Harbour | `#112231` | `--color-deep-harbour` | surface | Inverse feature panels and dark promotional sections. |
| Quiet Silver | `#e8e9eb` | `--color-quiet-silver` | semantic | Subtle dividers, hairlines, and restrained component borders. |
| Hot Coral | `#ff4f40` | `--color-hot-coral` | accent | Brand wordmark and selective product or card imagery; not a dominant page background. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f2f8f3` (Mint Haze) · `--color-surface-2` → `#112231` (Deep Harbour) · `--color-text` → `#091723` (Midnight Ink) · `--color-text-muted` → `#6b747b` (Slate Mist) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#e8e9eb` (Quiet Silver) · `--color-accent` → `#ff4f40` (Hot Coral)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#091723` | `#ffffff` | 18.13:1 | AAA |
| `#091723` | `#f2f8f3` | 16.83:1 | AAA |
| `#091723` | `#112231` | 1.12:1 | fail |
| `#6b747b` | `#ffffff` | 4.76:1 | AA |
| `#6b747b` | `#f2f8f3` | 4.42:1 | AA-large |
| `#6b747b` | `#112231` | 3.4:1 | AA-large |
| `#ffffff` | `#f2f8f3` | 1.08:1 | fail |
| `#ffffff` | `#112231` | 16.19:1 | AAA |
| `#ff4f40` | `#ffffff` | 3.26:1 | AA-large |
| `#ff4f40` | `#f2f8f3` | 3.03:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| MonzoSansText | `--font-body` | webfont | 400, 600, 700 | Body copy, navigation, buttons, links, and captions. | Nunito Sans |
| MonzoSansDisplay | `--font-display` | webfont | 700, 800, 600 | Large headings and section titles. | Nunito Sans |

- **MonzoSansText:** Use a clean, friendly sans-serif; body copy is regular, with semibold navigation and natural sentence case.
- **MonzoSansDisplay:** Bold to extra-bold display weight, rounded forms, and sentence case; avoid uppercase styling.

### Type scale — Perfect Fourth (ratio ≈ 1.323, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 49px | 800 | 1.2 | 0 | — | MonzoSansDisplay | Hero headline; bold display type over the opening film. |
| h2 | 44px | 800 | 1.2 | 0 | — | MonzoSansDisplay | Main section titles introducing feature and product groups. |
| h3 | 39px | 800 | 1.2 | 0 | — | MonzoSansDisplay | Subsection headings and prominent feature-card titles. |
| h4 | 31px | 700 | 1.2 | 0 | — | MonzoSansDisplay | Smaller card and supporting section headings. |
| body | 16px | 400 | 1.4 | 0 | — | MonzoSansText | Explanatory paragraphs and primary interface copy. |
| caption | 13px | 400 | 1.4 | 0 | — | MonzoSansText | Legal notes, image captions, and compact supporting labels. |
| nav | 16px | 600 | 1.38 | 0 | — | MonzoSansText | Header navigation and account controls. |
| link | 16px | 400 | 1.4 | 0 | — | MonzoSansText | Inline links and secondary text actions. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 12, 16, 24, 32, 48, 64 px.
- Section rhythm 64px · element gap 8px · card padding 26px · max content width 1312px.

A broad, centered page uses a measured maximum width of 1312px, with a comfortable rhythm and section gaps measured at 64px. The page moves between full-width media, centered section introductions, multi-column card grids, and two-column feature splits. Headings generally align to the start in informational sections and center above promotional or carousel content. Cards have generous internal breathing room, and the long page stays varied through changes in alignment and media placement rather than dense decoration.

## Shape & elevation

- Radius: button `9999px` · input `10px` · card `32px` · media `4px` · nav `9999px` · xs `4px` · sm `8px` · md `12px` · lg `16px` · xl `32px` · 2xl `64px` · pill `9999px`
- Shadow `hairline` (nav): `rgba(0, 0, 0, 0) 0px 1px 1px 0px`
- Motion: standard transition `0.3s cubic-bezier(0, 0, 1, 1)` on interactive elements.

The interface is mostly flat, with white space and pale panels separating content instead of pronounced shadows. Fine gray hairlines appear sparingly, while dark and pale filled cards create the main depth. Layering is reserved for hero text over video and product screens within their image compositions; pill controls and rounded card shapes provide most of the visual softness.

## Imagery

Lifestyle photography and video lead the page, showing people in everyday settings and giving banking features a human context. Large hero media is cropped into a broad rounded frame, with white text layered over darker footage. Product imagery focuses on coral Monzo cards and phone screens, often placed inside clean cards or colored mock-up backgrounds. Photos and device visuals are vivid and varied; the surrounding interface remains restrained.

## Components

### Primary CTA

A dark, pill-shaped button with white MonzoSansText copy; used repeatedly for account-opening actions.

### Outlined action

A light or transparent pill control with a dark outline and dark text for secondary actions such as learning more.

### Feature card

A large rounded pale-green panel with dark heading and body copy, often paired with lifestyle or product media.

### Product tile

A rounded card combining a vivid image or coral product mock-up with a concise title and descriptive copy.

### Inverse promotional panel

A deep navy rounded section using white text and product or award imagery for high-contrast promotion.

### Carousel controls

Minimal circular arrow and pagination controls placed near horizontal feature-card sequences.

### Measured component styles

- **Primary button** (“Open a free Monzo account”): background #091723 · text #ffffff · radius 128px · padding 0px 24px · 400 16px MonzoSansText
- **Secondary button** (“Learn more”): transparent background · text #091723 · border 2px solid #091723 · radius 128px · padding 0px 16px · 400 12.8px MonzoSansText
- **Link** (“Personal account Our signature Hot Coral”): transparent background · text #091723 · radius 0px · padding 0px · 400 16px MonzoSansText
- **Input** (“Switch to Belgium Switch to Bulgaria Swi”): background #efefef · text #000000 · border 1px solid #b2b2b2 · radius 10px · padding 16px 48px 16px 16px · 400 16px MonzoSansText
- **Card** (“Personal account Our signature Hot Coral”): background #f2f8f3 · text #091723 · border 2px solid · radius 32px · padding 32px 24px 24px 24px · 400 16px MonzoSansText
- **Navigation item** (“Skip to Content Personal Business Sign u”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px MonzoSansText

## Do

- Use white as the default canvas.
- Reserve coral for brand accents and product moments.
- Set headings in bold, rounded display typography.
- Use deep navy for primary actions and strong contrast.
- Alternate card grids with split and centered sections.
- Pair feature explanations with relevant lifestyle or product imagery.

## Don't

- Do not fill every section with coral.
- Do not crowd the page with dense decoration.
- Do not use heavy shadows as the main separation method.
- Do not make every section follow the same grid.
- Do not use all-caps display headings.
- Do not let supporting copy compete with the main headline.

## Agent prompt

Build a new Monzo-style banking page with a calm white canvas (#ffffff), pale Mint Haze panels (#f2f8f3), and Midnight Ink (#091723) for headline text and primary pill CTAs. Use Hot Coral (#ff4f40) as a selective brand signal, not a blanket section fill. Use bold rounded display headings and clear, regular sans-serif body copy. Keep the layout broad and airy, alternating centered introductions, feature grids, and asymmetric text-and-image splits. Use rounded cards, subtle hairlines, and minimal elevation. Let candid lifestyle photography and close-up phone or card imagery provide warmth and product context. Keep navigation simple, make the main action easy to spot, and use Deep Harbour (#112231) for occasional inverse promotional panels. Preserve clear hierarchy and concise, readable financial explanations.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Wide rounded video hero with left-aligned text overlay and a compact CTA. | Account-opening CTA, Trust badges | Full-bleed video, White overlay text, Rounded media frame |
| 2 | feature-grid | Section introduction above a multi-column row of image-led product cards. | Explore account types, Learn-more actions | Product cards, Image tiles, Carousel arrows |
| 3 | product-showcase | Centered heading and CTA above a horizontally navigable, mixed-media feature carousel. | Carousel pagination, Next and previous controls | Alternating pale and dark cards, Lifestyle media, Rounded panels |
| 4 | product-grid | Centered introduction and CTA above a three-column product-card grid. | Compare account options, View-all action | Pale-green cards, Small card imagery, Rounded outlines |
| 5 | feature-grid | Left-aligned introduction followed by a multi-column row of travel feature tiles. | Explore travel, Browse feature cards | Travel photography, Product mock-ups, Carousel controls |
| 6 | product-grid | Centered content inside a pale rounded panel, with an introduction above three product cards. | Explore savings, Compare savings options | Pale-green section band, Three image cards, Dark primary CTA |
| 7 | feature-split | Text-led copy and action alongside a large phone and card product visual. | Explain salary benefit, Explore Double Payday | Asymmetric split, Oversized device mock-up, Coral product backdrop |
| 8 | feature-grid | Centered heading and CTA surrounded by a loose two-column arrangement of benefit cards. | Highlight support and safety, Account-opening CTA | Mixed coral and navy tiles, Product images, Rounded cards |
| 9 | stats | Wide dark rounded banner with awards on one side and copy plus CTA on the other. | Show social proof, Account-opening CTA | Inverse navy panel, Award badges, White typography |
| 10 | how-it-works | Centered heading and CTA above a numbered process with supporting product imagery. | Numbered application steps, Set expectations | Pale rounded section, Step labels, Card imagery |
| 11 | feature-grid | Centered section introduction with a central phone mock-up and supporting feature copy on both sides. | Explain protection tools, Link to security details | Central device image, Short feature blocks, Open white canvas |
| 12 | comparison | Explanatory text column beside stacked regional ranking panels. | Compare regional results, Open full survey results | Pale-green ranking cards, Ranked provider rows, Progress bars |
| 13 | content-feed | Compact, left-aligned editorial content block with publication date and inline link. | Read regulatory information, Follow inline link | Plain text layout, Publication label, Minimal decoration |

## Source CSS custom properties (selected)

```css
--font-stack-title: "MonzoSansDisplay",sans-serif;
--font-stack-body: "MonzoSansText",sans-serif;
--text-billboard: clamp(2.986rem,2.6276rem + 1.7918vw,3.8147rem);
--text-heading-1: clamp(2.4883rem,2.2447rem + 1.2182vw,3.0518rem);
--text-heading-2: clamp(2.0736rem,1.9145rem + 0.7953vw,2.4414rem);
--text-heading-3: clamp(1.728rem,1.6306rem + 0.4868vw,1.9531rem);
--text-heading-4: clamp(1.44rem,1.387rem + 0.2649vw,1.5625rem);
--text-heading-5: clamp(1.2rem,1.1784rem + 0.1081vw,1.25rem);
--text-body-large: clamp(1.2rem,1.1784rem + 0.1081vw,1.25rem);
--text-body: clamp(1rem,1rem + 0vw,1rem);
--text-body-small: clamp(0.8rem,0.8477rem + -0.0721vw,0.8333rem);
--text-body-xsmall: clamp(0.8rem,0.8477rem + -0.0721vw,0.8333rem);
--default-font-stack: "MonzoSansText",sans-serif;
--nav-toggle-color: #fff;
--nav-pill-background: hsla(0,0%,100%,.7);
```

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