---
version: alpha
name: Monzo
description: Friendly British fintech where a heavyweight custom grotesque (MonzoSansDisplay at 800) shouts the headlines, hot-coral signals the brand, and every button is a full pill — banking that feels approachable, confident, and unmistakably warm rather than corporate.

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f7f6f4"           # muted off-white section bands
  surface-dark: "#091723"      # deep navy-ink hero overlays, dark sections, primary button

  # Ink / text
  ink: "#091723"               # near-black navy headings, body, primary button fill
  ink-soft: "#11202e"          # primary-button hover (deepened navy)
  ink-secondary: "#54595f"     # supporting paragraph copy
  ink-muted: "#84888c"         # captions, metadata, faint labels
  on-dark: "#ffffff"           # text on navy surfaces and the dark CTA

  # Brand accent — the singular Monzo hot coral
  primary: "#ff4f40"           # the wordmark, accent CTAs, highlight moments
  primary-hover: "#e63d30"     # accent-button hover (deepened coral)
  primary-strong: "#cc2f24"    # pressed coral
  primary-soft: "#ff8478"      # decorative coral tints
  primary-container: "#ffe3df" # soft coral pill / badge fills
  on-primary: "#ffffff"

  # Supporting brand hue (used in product gradients / hot-card accents)
  brand-blue: "#0000ee"        # legacy link blue, occasional product accent

  # Borders
  border: "#e4e2dd"            # hairline dividers, card edges
  border-strong: "#cfccc5"     # input + secondary-button outlines

  # Shadow tints (opaque approximations for the elevation table)
  shadow-soft: "#000000"       # was rgba(0,0,0,0.1) — Google format requires hex
  shadow-ambient: "#000000"    # was rgba(0,0,0,0.16) — Google format requires hex

typography:
  display-hero:
    fontFamily: "MonzoSansDisplay, Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif"
    fontSize: 61px
    fontWeight: 800
    lineHeight: 1.0
    letterSpacing: -1.2px
  display:
    fontFamily: "MonzoSansDisplay, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 49px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: -0.8px
  heading:
    fontFamily: "MonzoSansDisplay, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 39px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: -0.4px
  heading-sub:
    fontFamily: "MonzoSansDisplay, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 25px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.2px
  title:
    fontFamily: "MonzoSansDisplay, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0px
  body-large:
    fontFamily: "MonzoSansText, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body:
    fontFamily: "MonzoSansText, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body-strong:
    fontFamily: "MonzoSansText, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0px
  button:
    fontFamily: "MonzoSansText, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: 0px
  caption:
    fontFamily: "MonzoSansText, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px
  5xl: 96px
  6xl: 128px

rounded:
  sm: 4px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 64px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 14px 24px
  button-primary-hover:
    backgroundColor: "{colors.ink-soft}"
    textColor: "{colors.on-dark}"

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 14px 24px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  button-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 14px 24px
  button-accent-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-feature:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.2xl}"
    padding: 32px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-strong}"
    padding: 16px 24px

  link:
    textColor: "{colors.ink}"
    typography: "{typography.body-strong}"
    padding: 0px
  link-accent:
    textColor: "{colors.primary}"
    typography: "{typography.body-strong}"
    padding: 0px

  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary-strong}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
---

# Monzo Design System

## Overview

Monzo's site is what a bank looks like when it decides to be likable. The canvas is clean white (`{colors.background}`) with the occasional warm off-white band (`{colors.surface}`), but the thing that announces the brand before you read a word is the type: **MonzoSansDisplay** set heavy at weight 800, headlines like "Monzo for all your money" stacked tight (`{typography.display-hero}` at -1.2px tracking, line-height 1.0). That density of weight is unusual for finance — most banks reach for a thin, austere serif to signal trust. Monzo does the opposite. It signals warmth and confidence by being loud and friendly in equal measure.

The signature visual move is the **full-pill geometry**. Every interactive surface — buttons, tabs, toggles, the "Open a free bank account" CTA — is rounded to a complete pill (`{rounded.pill}`), and cards round generously to 24-64px (`{rounded.lg}`–`{rounded.2xl}`). Nothing on the page has a sharp corner. Combined with the heavy display type, the effect is rounded, soft, and physical — banking that feels like a consumer app, not a spreadsheet. The hot coral (`{colors.primary}`, the famous `#ff4f40`) is the brand's stamp: it owns the wordmark, accents the highlight moments, and tints soft pills, but it is used with restraint so it never tips into alarm.

There's a deliberate color discipline underneath the friendliness. The primary call-to-action — "Sign up", "Continue" — is **near-black navy** (`{colors.ink}`, a deep `#091723` rather than pure black), not coral. Coral is reserved as the *accent* and brand-identity color; the navy does the heavy lifting on CTAs and as the dark-section canvas. That inversion (navy does the work, coral does the signaling) keeps the system feeling premium and intentional rather than candy-bright. The hero photography — warm lifestyle imagery of people with their phones — sits inside one of those big-radius rounded frames, the most physical, three-dimensional element on the page.

**Key Characteristics:**
- Clean white canvas (`{colors.background}`) with warm off-white section bands (`{colors.surface}`) — light-first, friendly rather than austere
- **MonzoSansDisplay at weight 800** for all headlines (`{typography.display-hero}`) — heavy, confident, tightly tracked
- MonzoSansText for body and UI copy (`{typography.body}`) — clean humanist sans, normal weights
- Hot coral (`{colors.primary}`, `#ff4f40`) as the singular brand accent: wordmark, highlights, soft pills — used sparingly
- Primary CTA is **near-black navy** (`{colors.ink}`), not coral — the brand inverts the expected hierarchy
- **Every button is a full pill** (`{rounded.pill}`) — zero sharp corners anywhere on the page
- Generous card radii of 24-64px (`{rounded.lg}`–`{rounded.2xl}`) — soft, rounded, app-like
- Deep navy `{colors.surface-dark}` for dark sections and image overlays, never pure black
- Lifestyle photography in rounded frames carries the emotional weight; the page itself stays mostly flat
- Soft, low shadows reserved for floating cards (`{colors.shadow-soft}`) — separation comes mostly from rounding and color

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The dominant canvas; most content sits on pure white.
- **Warm Off-White** (`{colors.surface}`): Muted section bands and feature-card fills — a barely-warm shift from white.
- **Deep Navy** (`{colors.surface-dark}`): Dark sections, hero image overlays, and the primary button fill. A near-black with a hint of blue, never pure `#000000`.

### Ink / Text
- **Navy Ink** (`{colors.ink}`): Headings, body copy, and the primary CTA fill — the workhorse near-black.
- **Soft Navy** (`{colors.ink-soft}`): Primary-button hover state.
- **Slate** (`{colors.ink-secondary}`): Supporting paragraph copy.
- **Muted Slate** (`{colors.ink-muted}`): Captions, metadata, and the lowest-emphasis labels.

### Brand Accent
- **Hot Coral** (`{colors.primary}`): The singular brand color — the wordmark, accent CTAs, and highlight moments. Used sparingly to keep its charge.
- **Coral Hover / Strong** (`{colors.primary-hover}`, `{colors.primary-strong}`): Deepened coral for hover and pressed accent states and badge text.
- **Coral Soft / Container** (`{colors.primary-soft}`, `{colors.primary-container}`): Light tints for soft pills, badges, and decorative coral moments.

### Borders & Shadow Tints
- **Hairline** (`{colors.border}`): Card edges and dividers — warm-tinted to match the off-white surfaces.
- **Strong Border** (`{colors.border-strong}`): Input and secondary-button outlines.
- **Soft / Ambient** (`{colors.shadow-soft}`, `{colors.shadow-ambient}`): Opaque stand-ins for the low card shadows (originals were rgba — flattened for the Google spec).

## Typography

### Font Family
- **Display**: `MonzoSansDisplay` — a custom heavyweight grotesque used exclusively at weights 700-800 for headlines. Fallback stack `Inter, -apple-system, system-ui, sans-serif`.
- **Text**: `MonzoSansText` — a humanist sans for body, links, and UI labels, at weights 400-600. Same fallback stack.
- **Tracking**: large display sizes use moderate negative tracking (-1.2px at 61px); body sits at 0.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 61px / 800 / -1.2px — the marquee headline |
| `display` | 49px / 800 / -0.8px — major section titles |
| `heading` | 39px / 800 — feature headings |
| `heading-sub` | 25px / 700 — sub-section headings |
| `title` | 20px / 600 — card titles, small headings |
| `body-large` | 20px / 400 — lead paragraphs |
| `body` | 16px / 400 — standard body copy |
| `body-strong` | 16px / 600 — emphasized copy, nav links |
| `button` | 16px / 600 / line-height 1.15 — pill button labels |
| `caption` | 14px / 400 — metadata, helper text, badge text |

### Principles
- **Heavy display is the voice**: weight 800 MonzoSansDisplay carries the personality — confident and warm, not austere. Don't water it down to a regular weight.
- **Two families, clear jobs**: Display for headlines, Text for everything readable. Never set body copy in the display face.
- **Tighten the big, leave the small**: moderate negative tracking on display sizes; near-zero on body.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px, with a 4px sub-step for tight internals. Generous vertical rhythm (`{spacing.5xl}`–`{spacing.6xl}`) separates major marketing sections; component internals stay in the `{spacing.md}`–`{spacing.2xl}` range.

### Grid & Container
- Max content width: ~1200px, centered
- Common pattern: a full-bleed rounded hero image with overlaid headline and a single pill CTA
- Feature sections alternate text-and-image rows; product cards sit in 2-3 column grids

### Whitespace Philosophy
- **Rounded and roomy**: big radii plus generous padding make every block feel soft and breathable
- **Photography does the feeling**: warm lifestyle imagery in rounded frames carries the emotional load
- **Flat page, physical cards**: the page is mostly flat; the lifted, rounded image cards are the dimensional moments

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, hairline `{colors.border}` only | Section bands, most page content |
| Subtle (Level 1) | `0 0 10px` at ~10% black (`{colors.shadow-soft}`) | Resting cards, floating chips |
| Card (Level 2) | `0 8px 32px` at ~16% black (`{colors.shadow-ambient}`) | Lifted product cards, dialogs |
| Focus Ring | 2px navy (`{colors.ink}`) ring on inputs | Form focus |

**Shadow Philosophy**: Monzo's shadows are soft, low, and rare. Separation comes primarily from generous rounding and the warm/white surface contrast, not from drop shadows. When elevation appears, it's a gentle, diffuse cast under a rounded card — never a hard, tight shadow. The page reads as a stack of soft rounded panels rather than floating boxes.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 4px | Tiny tags, inline chips |
| `md` | 16px | Inputs, small containers |
| `lg` | 24px | Cards — the default surface radius |
| `xl` | 32px | Dialogs, large containers, detail panels |
| `2xl` | 64px | Hero image frames, big feature cards, footer top |
| `pill` | 9999px | **All buttons, tabs, and toggles** |

The radius philosophy is the brand: round everything. Buttons are full pills, cards are deeply rounded (24-64px), and even the footer caps its top corners at 64px. There is essentially no sharp corner in the system — roundness is the friendliness signal.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Near-black navy (`{colors.ink}`) fill, white text, full-pill radius. The main CTA ("Sign up", "Continue"). Hover deepens to `{colors.ink-soft}`.
- **`button-secondary`** — White fill, navy text, `{colors.border-strong}` outline, full pill. The "Open a free bank account" pattern. Hover fills `{colors.surface}`.
- **`button-accent`** — Hot coral (`{colors.primary}`) fill, white text, full pill. Reserved for high-energy accent CTAs. Hover deepens to `{colors.primary-hover}`.

### Cards
- **`card`** / **`card-feature`** — White or warm off-white surface, 24-32px radius. The feature variant uses `{colors.surface}` and a larger 64px radius for hero and product moments.

### Inputs
- **`input`** — White fill, `{colors.border-strong}` outline, 16px radius. **`input-focus`** swaps to a crisp navy (`{colors.ink}`) border, no coral ring.

### Navigation
- **`nav-bar`** — White, hairline bottom border, MonzoSansText labels at weight 600. The coral wordmark sits at the left; a black pill CTA persists at the right.

### Links & Badges
- **`link`** — Navy text, weight 600, underline on hover. **`link-accent`** carries coral for highlight links.
- **`badge`** — Soft coral-container fill, coral-strong text, full pill — the "New" / category tag.

## Do's and Don'ts

### Do
- Set headlines in **MonzoSansDisplay at weight 800** (`{typography.display-hero}`) — the heavy display is the brand voice
- Round **every button to a full pill** (`{rounded.pill}`) and cards to 24-64px (`{rounded.lg}`–`{rounded.2xl}`)
- Keep the primary CTA **near-black navy** (`{colors.ink}`) — the coral is an accent, not the button color
- Reserve hot coral (`{colors.primary}`) for the wordmark, highlights, and accent CTAs — use it sparingly
- Use deep navy (`{colors.surface-dark}`) for dark sections and image overlays, never pure black
- Carry the emotional weight with warm lifestyle photography in rounded frames
- Keep shadows soft, low, and rare — let rounding and surface contrast do the separating
- Use MonzoSansText for all body and UI copy (`{typography.body}`)

### Don't
- Don't set body copy in the display face — MonzoSansText is for everything readable
- Don't make coral the primary button color — it's an accent; the CTA is navy
- Don't reach for sharp corners or small radii on buttons — buttons are full pills, period
- Don't water the display weight down to 400-500 — the heavy 800 is what makes it feel like Monzo
- Don't use pure black (`#000000`) for surfaces — the brand's dark is the navy `{colors.surface-dark}`
- Don't scatter hard, tight drop shadows — elevation is soft and rare
- Don't go austere/serif to "look like a bank" — Monzo's warmth is deliberate

---

## Responsive Behavior

### Breakpoints
*(The site surfaced 22 breakpoints; the values below are the meaningful stops it behaves to.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column; hero text scales 61px → ~34px; nav collapses to a menu; hero image goes full-width with reduced radius; CTA pill goes full-width |
| Tablet | 640–1023px | Two-column feature rows begin; image and copy sit side by side at reduced sizes |
| Desktop | 1024–1279px | Full layout; overlaid hero headline on a rounded full-bleed image |
| Large | ≥1280px | Max ~1200px container, centered; generous section padding (`{spacing.5xl}`–`{spacing.6xl}`) |

### Touch Targets
- Pill buttons run ~48px tall with `14px 24px` padding — comfortable, thumb-friendly
- Tab and toggle pills carry generous horizontal padding for easy tapping

### Collapsing Strategy
- **Navigation**: full horizontal nav → menu toggle on mobile; the black pill CTA persists
- **Hero**: overlaid headline on image → headline stacks above or below a reduced image on mobile
- **Type**: display drops from 61px toward ~34px while keeping the heavy 800 weight
- **Spacing**: section padding compresses from ~96-128px toward ~48px

### Image Behavior
- Lifestyle imagery stays in rounded frames; corner radius reduces on small screens (64px → ~24px) to preserve content area
- Full-bleed hero images crop to maintain the subject as the viewport narrows

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Text: Navy Ink (`{colors.ink}`)
- Brand accent: Hot Coral (`{colors.primary}`, `#ff4f40`)
- Secondary text: Slate (`{colors.ink-secondary}`)
- Border: Hairline (`{colors.border}`)
- Primary CTA: **Navy** (`{colors.ink}`) — not coral

### Example Component Prompts

- "Create a hero on white (`{colors.background}`) with a 61px navy (`{colors.ink}`) headline in a heavy 800-weight grotesque (MonzoSansDisplay), letter-spacing -1.2px, sitting over a full-bleed warm lifestyle photo framed at `{rounded.2xl}` (64px), with a single black pill CTA (`{colors.ink}` fill, white text, `{rounded.pill}`)"
- "Build a primary button: navy (`{colors.ink}`) fill, white text, full-pill radius (`{rounded.pill}`), `14px 24px` padding, MonzoSansText 16px weight 600 — hover deepens to `{colors.ink-soft}`"
- "Build a secondary button: white fill, navy text, `{colors.border-strong}` 1px outline, full pill, hover fills `{colors.surface}` — the 'Open a free bank account' pattern"
- "Create a feature card: warm off-white (`{colors.surface}`) surface, `{rounded.2xl}` (64px) radius, 32px padding, a 25px weight-700 title and 16px body, with a soft low shadow (`0 0 10px` at ~10% black via `{colors.shadow-soft}`)"
- "Design a 'New' badge: soft coral-container (`{colors.primary-container}`) fill, coral-strong (`{colors.primary-strong}`) text, full pill, 14px caption — coral as accent only"

### Iteration Guide

1. Start on clean white (`{colors.background}`) with warm off-white bands (`{colors.surface}`) for sections. Avoid austere grays.
2. Headlines must be the heavy display face at weight 800 (`{typography.display-hero}`). If it reads thin, you're using the wrong weight.
3. Round everything: buttons to `{rounded.pill}`, cards to `{rounded.lg}`–`{rounded.2xl}`. If you see a sharp corner, fix it.
4. Coral (`{colors.primary}`) is an accent only — wordmark, highlights, accent CTAs. If it's filling your primary button, recolor that button navy (`{colors.ink}`).
5. Use deep navy (`{colors.surface-dark}`) for dark sections, never pure black.
6. Keep shadows soft and rare — let rounding and surface contrast separate elements.
7. Carry the emotion with warm lifestyle photography inside rounded frames — it's central to the brand, not decoration.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Monzo. Brand names and trademarks belong to their respective owners.