Finance / iOS / Android / Web

Monzo

Monzo writes in deep navy on a pale mint page, keeps its hot coral for the mark, and rounds every panel and button until the page feels soft.

Download
  • #091723
  • #112231
  • #FF4F40
  • #F2F8F3
  • #016B83
  • #FFFFFF

Color

Every color token in the file, grouped by role.

Brand

  • primary#091723
  • on primary#FFFFFF

Surfaces

  • canvas#FFFFFF

Text

  • ink#091723
  • on navy#FFFFFF
  • teal link#016B83

More

  • coral#FF4F40
  • navy panel#112231
  • mint page#F2F8F3

Typography

Each style is set with the file's own family, size, weight and spacing.

  • MonzoSansDisplayMonzoSansDisplay is private and not available in open fonts. Shown in DM Sans, the closest open match.
  • MonzoSansTextMonzoSansText is private and not available in open fonts. Shown in Onest, the closest open match.
  • display48.8px / 800 / 58.6px

    Monzo

  • headline39.1px / 800 / 46.9px

    Monzo

  • title31.2px / 700 / 37.5px

    Monzo

  • subtitle25px / 700 / 35px

    Pack my box with five dozen liquor jugs

  • lead20px / 400 / 28px

    Pack my box with five dozen liquor jugs

  • body16px / 400 / 22.4px

    The quick brown fox jumps over the lazy dog

  • button16px / 600 / 22.4px

    Continue to checkout

Shape

Corner radius tokens.

  • xs4px
  • sm8px
  • md16px
  • lg32px
  • xl64px
  • pill500px

Spacing

The spacing scale, drawn to size.

  • sm8px
  • md12px
  • base16px
  • lg24px
  • xl32px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button light
    button-light
  • button outline
    button-outline
  • nav pill
    nav-pill
  • navy card
    navy-card
  • mint section
    mint-section
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 115 lines
version: alpha
name: Monzo-design-analysis
description: "A UK bank in deep navy (#091723) on a pale mint page (#f2f8f3), with the hot coral (#ff4f40) logo, heavy Monzo Sans Display headlines at 800, Monzo Sans Text for reading, navy pill buttons and very round 32 to 64px panels."
status: Draft
appVersion: "measured in a browser, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#091723"
  on-primary: "#ffffff"
  coral: "#ff4f40"
  ink: "#091723"
  navy-panel: "#112231"
  on-navy: "#ffffff"
  mint-page: "#f2f8f3"
  canvas: "#ffffff"
  teal-link: "#016b83"

typography:
  # Font note: "MonzoSansDisplay" is a private font and is not available in open fonts. Closest open alternative: "DM Sans".
  # Font note: "MonzoSansText" is a private font and is not available in open fonts. Closest open alternative: "Onest".
  display:
    fontFamily: "MonzoSansDisplay, sans-serif"
    fontSize: 48.8px
    fontWeight: 800
    lineHeight: 58.6px
  headline:
    fontFamily: "MonzoSansDisplay, sans-serif"
    fontSize: 39.1px
    fontWeight: 800
    lineHeight: 46.9px
  title:
    fontFamily: "MonzoSansDisplay, sans-serif"
    fontSize: 31.2px
    fontWeight: 700
    lineHeight: 37.5px
  subtitle:
    fontFamily: "MonzoSansDisplay, sans-serif"
    fontSize: 25px
    fontWeight: 700
    lineHeight: 35px
  lead:
    fontFamily: "MonzoSansText, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
  body:
    fontFamily: "MonzoSansText, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 22.4px
  button:
    fontFamily: "MonzoSansText, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 22.4px

rounded:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 32px
  xl: 64px
  pill: 500px

spacing:
  sm: 8px
  md: 12px
  base: 16px
  lg: 24px
  xl: 32px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: 51px
    padding: 12px 24px
  button-light:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: 48px
    padding: 12px 24px
  button-outline:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    height: 48px
    padding: 0 24px
  nav-pill:
    backgroundColor: "{colors.mint-page}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    height: 40px
    padding: 8px 12px
  navy-card:
    backgroundColor: "{colors.navy-panel}"
    textColor: "{colors.on-navy}"
    typography: "{typography.subtitle}"
    rounded: "{rounded.lg}"
    padding: 32px
  mint-section:
    backgroundColor: "{colors.mint-page}"
    textColor: "{colors.ink}"
    typography: "{typography.headline}"
    rounded: "{rounded.xl}"
    padding: 32px

Overview

Monzo is a United Kingdom bank that runs entirely in its app. Its site is deep navy type on a pale mint page, with the hot coral logo, heavy display headlines and very round panels that alternate mint and navy. Buttons are navy pills. [Observed]

What defines the look:

  1. Navy, not black. #091723 sets headlines, buttons and outlines. Secondary text is the same navy at 60 percent. [Measured]
  2. A pale mint page. The main canvas is #f2f8f3, with white and navy #112231 sections laid on it. [Measured]
  3. Hot coral, for the mark. #ff4f40 fills the logo and a few bold hero backgrounds. It is not a button color. [Measured]
  4. Heavy display type. Monzo Sans Display at 800 for headlines and 700 for titles, with Monzo Sans Text for reading. [Measured]
  5. Very round. Feature sections use 64px corners, cards 32, buttons are pills, and help tiles are almost square at 5. [Measured]

Source for this file: the home page, the current accounts page and the help centre, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass. Monzo does not publish its design system. The app sits behind an account. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Navy#091723, 60 percent for secondary textText, pill buttons, outlines [Measured]
Navy panel#112231Feature sections and cards with white text [Measured]
Coral#ff4f40Logo and bold hero backgrounds [Measured]
Mint page#f2f8f3Main canvas, the nav switcher and help tiles [Measured]
White#ffffff, and white at 70, 30 and 20 percent on navySections, translucent chips [Measured]
Teal link#016b83Outlined link pills in the help centre [Measured]

Typography

Role1440 wide390 wideFace and weight
Display48.83 on 58.5940.67 on 48.8Monzo Sans Display 800 [Measured]
Headline39.06 on 46.8733.73 on 40.48Monzo Sans Display 800 [Measured]
Title31.25 on 37.527.99 on 33.59Monzo Sans Display 700 [Measured]
Subtitle25 on 3523.23 on 29.23Monzo Sans Display 700 [Measured]
Lead20 on 2819.28 on 26.99Monzo Sans Text 400 [Measured]
Body16 on 22.4sameMonzo Sans Text 400 [Measured]
Button16 on 22.413.28 on 18.59 in the headerMonzo Sans Text 600 [Measured]

Each headline step is 1.25 times the next (25, 31.25, 39.06, 48.83), with a 1.2 line height. [Measured]

Shape and spacing

Pills for every button (500 or 128 radius), 64px corners on feature sections (24 on mobile cards), 32 on cards, 16 and 8 on smaller tiles and 4 to 5 on help tiles. [Measured] Buttons carry 12 by 24 padding, header pills 8 by 12. [Measured]

Iconography and motion

Help centre categories carry an emoji at the start of each tile title. [Observed] Motion was not measured. [Inferred]

Themes

Light only. The dark color scheme pass changed nothing. [Measured]

Platform: iOS

How the Monzo iOS app looks and behaves was not captured. Monzo does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Not measured. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar for home, pots, payments and help is expected. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

Paying or moving money from the home screen. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share the navy, the coral mark and the heavy display type with the web. [Inferred]

Platform: Android

How the Monzo Android app looks and behaves was not captured. Monzo does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Not measured. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar for home, pots, payments and help is expected. [Inferred]

Main action

Expected on Android: Floating action button.

Paying or moving money from the home screen. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share the navy, the coral mark and the heavy display type with the web. [Inferred]

Platform: Web

The home page, current accounts page and help centre, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A top bar with a Personal and Business switcher in a 48 high mint pill (each option 40 high), product menus and a navy Sign up pill, 51 high on desktop and 37 on mobile. [Measured]

Main action

Expected on Web: Page-level button.

A navy #091723 pill with white 16px semibold text, 48 to 51 high with 12 by 24 padding. On navy panels, a white pill with navy text. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Second actions are outlined pills with a 2px navy border, 48 high on desktop and 36 on mobile. Help centre categories are large mint tiles, 183 high with a 5px corner and 32px semibold titles. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes follow a 1.25 scale and are smaller at 390 than at 1440, with fractional values at both. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons are 48 to 51 high on desktop. Mobile header and second buttons are 36 to 37, below 44. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Not applicable to the public pages measured. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

A responsive site that keeps its pill buttons and round panels at every width, with smaller corners on mobile (64 to 24). [Measured]

Cross-platform consistency

Consistent across platforms: the navy, the coral mark, Monzo Sans and pill buttons. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use navy for text and buttons, and navy at 60 percent for secondary text.
  • Lay sections on a pale mint page, alternating with navy panels.
  • Set headlines heavy (800) on a 1.25 scale.
  • Round sections generously: 64 for features, 32 for cards.

Don't

  • Don't use coral for buttons. It belongs to the logo and bold hero moments.
  • Don't use pure black.
  • Don't use square buttons.

Known Gaps

  • The app, cards and payments sit behind an account and were not measured.
  • The iOS and Android apps were not captured, and Monzo publishes no design system, so every mobile topic is inferred.
  • Motion, icons and modals were not measured.
  • Mobile header buttons are 36 to 37 high, below the 44 and 48 touch minimums. That is the shipped size.
  • Monzo Sans Display and Monzo Sans Text are private. DM Sans (within 1 percent at 800) and Onest (within 1 percent at 20px) were chosen by comparing the same line side by side. Plus Jakarta Sans and Noto Sans were close seconds.
  • Account deletion and store policy rules were not verified.