# Monzo: brand book and build spec

Hot coral on soft white and deep navy, a puffy extra-bold grotesk for short staggered headlines over a friendly house sans, sun-drenched photography and flat app screens with a midday shadow; words that are kind first and witty by channel.

From unfairly.ai/brand-guidelines/monzo, checked 2026-10-29. Unofficial study; not affiliated with Monzo.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** One hot colour, always present, never forced: Monzo makes the first impression in hot coral, soft white and deep navy, then rewards people with more colour, more wit and more magic the deeper they go. Based on: The guide's primary-first rule and "the further in you go, the more colours you see" (pp.21-23), the three colour moods (p.18), and the Writing Principles dial that raises magic and wit by channel.

## Purpose

Mission: To build the best bank account in the world. (published; https://monzo.com/press)

Story: Founded in early 2015, a regulated bank since August 2016, now used by more than 16 million personal and business customers. (published)

| Value | What it means in the work | Source |
|---|---|---|
| Straightforward kindness | Clear, inclusive, reader-first; make complex things simple | published: https://monzo.com/tone-of-voice |
| Everyday magic | Transform the mundane with unexpected delight; celebrate and commiserate | published: https://monzo.com/tone-of-voice |
| Warm wit | Humour as seasoning; people feel part of the joke, never its target | published: https://monzo.com/tone-of-voice |

## Fixed and flexible

Never changes:
- The lowercase monzo wordmark in hot coral, soft white or deep navy
- Hot coral present in every piece
- Oldschool Grotesk-style big headlines, Monzo Sans for everything functional, sentence case
- Warm, sunny photography of real people and the product in context
- Flat app screens and card with the midday shadow
- Straightforward kindness in every word

The one thing that varies: Colour mood and voice dial together: from all-out hot coral with high wit (campaigns, social) to deep navy and soft white with no wit (websites deeper in, operational comms); secondary colours open up the deeper people go.

## Positioning

- **Statement**: Monzo is building a new kind of bank, one built for your smartphone and designed for the way we live today. (published)
- **Category**: UK app-based bank (regulated since August 2016) for personal and business customers. (published)
- **Audience**: Everyday people from a diverse range of backgrounds; personal, joint, under-16s and business customers. (our reading)
- **Problem**: Banking feels cold, formal and complicated. (our reading)
- **Promise**: Banking made easy, brighter and more human. (published)
- **Differentiators**: The hot coral card: an instantly recognisable physical icon.; An app customers love: features shown off as product visuals, not stock imagery.; Plain, kind, witty language in a category known for legalese.
- **Alternatives**: Traditional high-street banks (not named by Monzo).

## Messaging

Boilerplate (published): At Monzo we're building a new kind of bank, built for your smartphone and designed for the way we live today. Founded in early 2015 with a mission to build the best bank account in the world; a regulated bank since August 2016; more than 16 million personal and business customers.

Taglines:
- Banking made easy (hero typeface specimen and closing spreads (pp.34, 72, 81); also the M-icon ad title "Online Banking Made Easy" (p.11))
- Brighter Banking (logo usage spread; the guide also calls Oldschool Grotesk "Brighter Banking with the right level of distinction" (p.33))
- Spend your money on life, not your life on money (live homepage hero H1)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Hot coral card + award-winning app | The app and the hot coral card are the product and the icon. | "Award winning app with the hot coral card" (guide sample headline; the awards themselves are not named).; The hot coral debit card carries the wordmark; hot coral is "our most iconic asset". | our reading |
| Money sorted, everyday | Spend, save and manage money in one place: Pots, round-ups, bill splitting, trends. | Pots for separating money, round-ups, bill splitting, spending trends (guide samples and live homepage).; More than 16 million personal and business customers (press page, 2026). The 2022 guide's samples say 6 million. | our reading |
| A bank for everyone | A real, regulated bank that is human, warm and inclusive. | Became a regulated bank in August 2016.; More than 16 million personal and business customers (press page, 2026). The 2022 guide's samples say 6 million. | our reading |

They never claim:
- Don't make ourselves the victim or look reckless: we're a big bank that protects people's money.
- Be self-assured but never arrogant or above customers.
- Never make light of money stress, shame or mental health.
- Do not cite customer counts from the 2022 guide (6 million); use the current press figure.

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "Banking made easy" | style guide | Monzo style guide (Aug 2022, press kit) p.34 |
| "Brighter Banking" | style guide | Monzo style guide (Aug 2022, press kit) p.8 |
| "Award winning app with the hot coral card" | web / print sample | Monzo style guide (Aug 2022, press kit) p.61 |
| "Different accounts for different needs" | website sample | Monzo style guide (Aug 2022, press kit) p.22 |
| "Join more than 6 million people with a Monzo bank account" | website sample | Monzo style guide (Aug 2022, press kit) p.76 |
| "Over 6 million people bank with Monzo" | paid social sample | Monzo style guide (Aug 2022, press kit) p.17 |
| "A new way to bank" | ad sample | Monzo style guide (Aug 2022, press kit) p.68 |
| "Organise your life with pots" | ad sample | Monzo style guide (Aug 2022, press kit) p.69 |
| "Leave the maths to Monzo" | paid social sample | Monzo style guide (Aug 2022, press kit) p.74 |
| "Spend, save and manage money." | social sample | Monzo style guide (Aug 2022, press kit) p.21 |
| "Put money in your hands" | sample | Monzo style guide (Aug 2022, press kit) p.39 |
| "Money, managed" | app store sample | Monzo style guide (Aug 2022, press kit) p.79 |
| "Spending, sorted" | app store sample | Monzo style guide (Aug 2022, press kit) p.79 |
| "Sharing, simple" | app store sample | Monzo style guide (Aug 2022, press kit) p.79 |
| "Our world is always sunny and bright." | style guide | Monzo style guide (Aug 2022, press kit) p.43 |
| "Spend your money on life, not your life on money" | homepage | https://monzo.com/ |
| "Quit the app juggling act" | homepage | https://monzo.com/ |
| "It all starts with a Hot Coral card" | homepage | https://monzo.com/ |
| "Get the most out of Monzo" | homepage | https://monzo.com/ |
| "Spend your money on life, not your life on money" | website homepage | https://monzo.com/ |
| "Get the most out of Monzo" | website homepage | https://monzo.com/ |
| "Quit the app juggling act" | website homepage | https://monzo.com/ |
| "It all starts with a Hot Coral card" | website homepage | https://monzo.com/ |
| "The bank made for travel" | website homepage | https://monzo.com/ |
| "Save like a superhero" | website homepage | https://monzo.com/ |
| "Make payday twice as nice" | website homepage | https://monzo.com/ |
| "A regulated bank with 24/7 support" | website homepage | https://monzo.com/ |
| "Which? recommended 2 years in a row" | website homepage | https://monzo.com/ |
| "Apply for an account in 10 minutes" | website homepage | https://monzo.com/ |
| "Security you can bank on" | website homepage | https://monzo.com/ |
| "Independent service quality survey results" | website homepage | https://monzo.com/ |
| "Authorised push payment (APP) fraud rankings in 2024" | website homepage | https://monzo.com/ |

## Voice

Tone words: Straightforward kindness, Everyday magic, Warm wit.

Traits:
- Straightforwardly kind, but not formal or distant (published)
- Everyday magic, but not literal magic (published)
- Warmly witty, but not punching down (published)
- Self-assured, but not arrogant (published)
- Bright and warm, but not cold (published)
- Inclusive, but not stereotyping (published)

- Every word matters: for a bank that lives on a phone, words are the brand.
- Straightforward kindness applies to all writing, all the time: clear, inclusive, reader-first, complex made simple.
- Everyday magic mostly belongs to brand and marketing writing: celebrate small wins, draw on relatable money moments.
- Warm wit is seasoning, almost only in brand and marketing; people are in on the joke, never the target.
- Lead with the impact on the reader, then the reasoning.
- Serious is not the same as formal: plain English even for bad news.
- Headlines short and punchy, set big and bold (guide p.34); copy always in sentence case (p.36).

Rules a copy check enforces:
- Sentence case headlines
- Never set Monzo Sans in all caps
- Headlines short and punchy: short phrase, big impact
- Say what it means for the reader before why we did it
- Swap formal, Latin-rooted business words for the ones you would say out loud
- Write in the active voice; say who is responsible
- No unexplained financial jargon or internal acronyms
- When we are at fault, say "We're sorry" once and sincerely; do not apologise when we did nothing wrong
- Inclusive language: no gendered or ableist terms, careful with idioms for non-native readers
- No literal references to magic (no "hey presto", no wand emoji)
- Cut empty adjectives and marketing cliches like "discover" and "so much more"
- A pinch of humour, not a dollop: pick the best one joke (maybe two)
- Never joke at others' expense or put ourselves down as reckless
- No first-to-mind seasonal puns
- Starting a sentence with But, And, So or Because is fine
- Stay out of politics and sensitive topics (celebrity health, big court cases)

Their words: We're sorry, blocklist, allowlist, Pots, Hot Coral card.
Never: We'd like to apologise, blacklist, whitelist, hey presto, wand emoji, Eggcellent, all wrapped up (Christmas), no tricks, just treats, discover (as filler), so much more, "even your mum could use it" jokes.

Tone matrix (published; https://monzo.com/tone-of-voice):
|  | Straightforward kindness | Everyday magic | Warm wit |
|---|---|---|---|
| Operational comms | Maxed out | Low | None |
| Customer service | High | Low | None |
| Marketing comms | High | Medium | Medium |
| Campaigns | High | High | High |
| Paid social | High | High | High |
| Organic social | High | High | Maxed out |

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Hot coral | #FF4F40 | accent | The brand colour: card, wordmark, first impressions; always present somewhere, but need not dominate (pp.15, 17). |
| Soft white | #F2F8F3 | paper | Light ground: panels, account cards, nav track. On coral and navy the live homepage sets white #FFFFFF text, not soft white; the guide (2022, p.19) uses soft white type there. |
| Deep navy | #112231 | night | Dark ground (footer, navy slides and panels). Text on the live homepage is #091723, not #112231; the guide (2022, p.18) also uses deep navy as text. |
| Mid orange | #FE6B1B | secondary | Secondary palette, expressive and deeper touchpoints (pp.20-21). |
| Pale pink | #FFD7F0 | secondary | Secondary palette; panels behind product visuals (pp.20, 61). |
| Neon yellow | #C3FF34 | secondary | Secondary palette; art direction openers and highlight panels (pp.20, 43). |
| Mid teal | #016B83 | secondary | Secondary palette; dark expressive panels (pp.20, 69). |
| Pale blue | #BBF6E2 | secondary | Secondary palette; the guide's own section-divider ground (pp.3, 20). |
| Deep khaki | #3A4920 | secondary | Secondary palette; dark expressive grounds (pp.20, 22). |
| Action blue | #218FB7 | ui | UI palette: primary buttons in the product, light and dark mode (pp.25-26). |
| Grey 1 | #75817E | guide, 2022 (UI grey) | UI palette grey (guide, 2022, p.25). Not the homepage muted text: that is #091723 at 60% (observed 2026-10-29). |
| Navy 2 | #2C3A43 | ui | UI palette navy tint; dark-mode surfaces as shown on p.28. |
| Positive green 1 | #5AC87F | status | UI palette positive state (p.25). |
| Destructive red 1 | #F5430B | status | UI palette destructive state (p.25). |
| Navy 900 (live site) | #091723 | ink | All homepage text and the primary button fill; muted text is this at 60% (observed, https://monzo.com/, 2026-10-29). Not in the 2022 guide. |
| Ink 60% (live site) | #09172399 | ink_muted | Muted text: intros, card text, legal lines, inactive nav labels. rgba(9,23,35,0.6) (observed, https://monzo.com/, 2026-10-29). |

Proportion (our reading; Our reading, not published. The guide says hot coral and soft white or deep navy and soft white "can be used in either proportion" (p.19) and that coral "doesn't always need to dominate" (p.17). These numbers sketch the website mood ("more deep navy", p.18); adverts may run all-out coral.): Deep navy 45%, Soft white 35%, Hot coral 15%, Secondary palette 5%.

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | MonzoSansDisplay | proprietary Monzo face, self-hosted woff2 from static-assets.monzo.com; not licensed to us | Raleway | "Arial Narrow", "Helvetica Neue", Arial, sans-serif |
| body | Monzo Sans | proprietary Monzo face, not licensed to us | Onest | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero headline h1 (real MonzoSansDisplay 800; set Raleway 900) | --text-hero-headline-* | display | 48.83px | 40.67px | 1.2 | 0px | 900 |
| Section headline h2 (real MonzoSansDisplay 800; set Raleway 900) | --text-section-headline-h2-* | display | 39.06px | 33.73px | 1.2 | 0px | 900 |
| Regulatory headline h2 (real MonzoSansDisplay 800; set Raleway 900) | --text-regulatory-headline-* | display | 44px | 32px | 1.2 | 0px | 900 |
| Step numeral, desktop only (real MonzoSansDisplay 800; set Raleway 900) | --text-step-numeral-* | display | 61.04px | 61.04px | 1.2 | 0px | 900 |
| Slide title h3 (real MonzoSansDisplay 700; set Raleway 750, letter-spacing -0.02em) | --text-slide-title-* | display | 31.25px | 27.99px | 1.2 | -0.63px | 750 |
| Carousel card and step title h3 (real MonzoSansDisplay 700; set Raleway 750, -0.02em) | --text-carousel-card-title-* | display | 25px | 23.23px | 1.4 | -0.5px | 750 |
| Account card title, footer heading h3 (real MonzoSansDisplay 700; set Raleway 750, -0.02em) | --text-account-footer-title-* | display | 25px | 23.23px | 1.2 | -0.5px | 750 |
| Spotlight item title (real MonzoSansDisplay 600; set Raleway 675, -0.02em) | --text-spotlight-item-title-* | display | 20px | 19.28px | 1.4 | -0.4px | 675 |
| Lead / intro (real MonzoSansText 400; set Onest 350) | --text-lead-intro-* | body | 20px | 19.28px | 1.4 | 0px | 350 |
| Body (real MonzoSansText 400; set Onest 350) | --text-body-* | body | 16px | 16px | 1.4 | 0px | 350 |
| Emphasis: tile text, footer links, prices, tags, nav labels (real MonzoSansText 600; set Onest 550) | --text-emphasis-body-* | body | 16px | 16px | 1.4 | 0.16px | 550 |
| Button label (real MonzoSansText 600; set Onest 550, letter-spacing 0.01em) | --text-button-label-* | body | 16px | 16px | 1.4 | 0.16px | 550 |
| Mega-menu group, desktop only (real MonzoSansText 600; set Onest 550) | --text-mega-menu-group-* | body | 20px | 20px | 1.15 | 0.2px | 550 |
| Ranking subtitle (real MonzoSansText 600; set Onest 550) | --text-ranking-subtitle-* | body | 24px | 20px | 1.4 | 0.24px | 550 |
| Legal small print, in cards and the footer paragraph (real MonzoSansText 400; set Onest 350) | --text-legal-small-print-* | body | 12.8px | 13.28px | 1.4 | 0px | 350 |

## Layout

Measured on https://monzo.com/ (2026-10-29): computed styles read with Playwright at 1440x900 and 390x844, cookies rejected, geo locale banner closed, scrolled to top.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 64px | 16px |
| Section padding | 64px | 32px |
| Container max width | 1440px | full |
| Grid columns | no fixed 12-column grid observed; layouts are flex rows of fixed-width cards (320, 379, 421, 560, 624) |  |
| Card gap | 24px | 24px |
| Navigation height | 87px | 87px |

At every width (observed, 2026-10-29):
| What | 390px | 1440px |
|---|---|---|
| hero headline | 40.67px/48.8 800 | 48.83px/58.59 800 |
| section h2 | 33.73px/40.48 | 39.06px/46.87 |
| lead | 19.28px/26.99 | 20px/28px |
| page margin | 16px | 64px (24px for hero/footer panels) |
| panel radius | 32px (hero bottom 34px) | 64px |
| buttons | full width 358px when stacked, primary first | auto width, outline before primary |
| feature slides | stacked cards | carousel, next slide peeking |

Breakpoints from Monzo's CSS: 480, 768, 820, 1024, 1041, 1440px.

Homepage bands, top to bottom (observed):
1. Sticky translucent white nav, 87px: coral wordmark, Personal/Business pill track, navy Sign up pill
   - Desktop: 87px, white at 70%; logo 118x24 x 33; track 297x48 at x 176; Sign up 108x51 at x 1300
   - Phone: 65px: hamburger 24 at x 8, logo 94x16, Sign up 83x37
   - Personal opens a #F2F8F3 mega-menu panel 884x753 on hover
   - Business is a plain link
2. Rounded full-width video hero with white headline left and trust badges on the media
   - Desktop: panel 1392x750 at x 24, radius 64px; h1 48.83px/800 white at x 100, y 376; subline 20px; white pill CTA 264x48 at y 597; badges top right and bottom right; legal line right-aligned below
   - Phone: full-bleed 390x750, bottom corners 34px; h1 40.67px; badges row at the bottom
   - Resting frame: a woman holding a red sorbet cone among large green leaves (hero-frame-desktop.jpg); the phone paying over peaches is one of the loop's other scenes
   - Video loops: animation only
3. Product carousel: left h2 + CTA, arrows right, 320px cards with media, title, text, Learn more
   - Desktop: h2 at 64px top padding; cards 320 wide, 24px gap, media radius 32px, row bleeds to the right page edge
   - Phone: cards 320, arrows centered below, CTA full width
   - 6 cards
   - Legal small print block under the row
4. Wide slide carousel of 64px-radius split panels, alternating #F2F8F3 and #112231
   - Desktop: slides 1141x571 centered, next slide peeks at x 1315; text half + 571px square image; play, dots, next below
   - Phone: slides stack vertically as 358px cards
   - 5 slides
   - Not auto-playing at rest
5. Account and plan cards, 3-up #F2F8F3, radius 32px, with View all
   - Desktop: 421px cards, 24px gaps, 2 rows visible
   - Phone: 320px horizontal row
   - Card illustration + circled arrow, title 25px, price pill on plans, text, legal line
6. Travel carousel: same pattern as the product carousel, outline + primary buttons
   - Desktop: buttons outline then primary; 5 cards
   - Phone: primary above outline, full width
   - No Learn more buttons on these cards
7. Inset #F2F8F3 savings band, radius 64px, 3 cards
   - Desktop: panel 1312 wide at x 64, padding 64px; cards 379
   - Phone: full-bleed, 320px carousel
   - Centered h2, intro, two buttons
8. Split feature: text left, 624px square coral media right
   - Desktop: two 624px columns at x 64 and 752
   - Phone: text then media
   - 20px body at 60%
   - Legal small print under the button
9. Feature grid: centered h2 + app icon, 4 coral/navy cards in a checkerboard
   - Desktop: cards 340x320 at x 64 and 1036, 64px row gap; center column 480
   - Phone: cards become a 340px carousel with dots
   - Card: media, translucent tag pill, 16px 600 white text
10. Navy proof band, radius 64px: Which? badges left, white text and white CTA right
   - Desktop: 1312x554 at x 64, padding 64px; image 568x426
   - Phone: 358x576 radius 32px, image on top
   - Primary CTA inverts to white
11. Inset #F2F8F3 steps band: 3 step cards left, media right
   - Desktop: 1312x919 radius 64px; steps 560x139 radius 16px; media 560x560
   - Phone: stacked step cards with media
   - Step 1 active at rest: white card, coral 61px numeral
12. Security spotlight: phone screenshot centered, three items each side
   - Desktop: phone 395x790 at x 523; items 395 wide
   - Phone: phone then carousel of items
   - Active item #F2F8F3 radius 16px
13. Regulatory ranking: sticky text left, #F2F8F3 ranking cards right
   - Desktop: description sticky top 54px; cards 550x665 radius 64px at x 866
   - Phone: stacked, cards radius 16px
   - h2 44px 800
   - coral 24px subtitle
14. APP fraud note: tag, one-line 44px h2, paragraph
   - Desktop: padding 64px 24px, text at x 88
   - Phone: h2 32px
   - Bold underlined link
15. Navy footer panel, 64px top corners: 5 link columns, locale pill, full-width coral wordmark, legal, socials and store badges
   - Desktop: x 24, 1392 wide, padding 64px 64px 0
   - Phone: radius 32px top, padding 32px 16px, columns stacked
   - Wordmark 1264x220 #FF4F40

## Page anatomy

How Monzo's own landing pages are built, part by part (observed; https://monzo.com/, 2026-10-29). A homepage pattern, not a brand law: follow it for landing pages.

**Announcement bar**
- at rest: none for UK visitors (non-UK visitors get a dismissible locale banner, closed here)

**Navigation**
- summary: White bar 87px: coral wordmark left, a #F2F8F3 pill track holding Personal (active, white pill with chevron) and Business, navy pill Sign up at the right edge
- ground: #FFFFFF at 70% opacity (rgba(255,255,255,0.7)) over the page; no border
- height: 87px at 1440; 65px at 390
- border: none
- logo: monzo wordmark SVG (wordmark-nav.svg, viewBox 0 0 138 24, #FF4F40), 118x24 at x 33, y 32 (94x16 at x 47, y 25 on phones). It links to / (observed, https://monzo.com/, 2026-10-29)
- links: 2: 'Personal' (button: person glyph 24px + label + chevron 24px, opens the mega-menu on hover) and 'Business' (link to /business-banking, briefcase glyph 24px). Icons are SOLID filled glyphs (icon-nav-personal.svg, icon-nav-business.svg), not outlines. Labels MonzoSansText 16px 600 (Onest 550). Colour: icon, label and chevron all #091723 at 60% at rest, the active Personal item too (it is marked only by its white pill); hover #091723. Track #F2F8F3 297x48 at x 176, y 20, radius 100px, 4px inset. Personal white pill 152x40, padding 8px 8px 8px 12px; Business 125x40, padding 8px 12px. Left-aligned 25px after the logo (observed, https://monzo.com/, 2026-10-29)
- actions: 'Sign up' to https://monzo.com/sign-up: #091723 pill 108x51 at x 1300, y 18, MonzoSansText 16px 600 white, padding 12px 24px, radius 500px; hover #2C3A43
- sticky: yes, header position sticky top 0
- mega menu: trigger hover on Personal (aria-label 'Open Personal navigation'); Business has no menu; panel 884x753 at x 32, y 87, #F2F8F3, radius 0 0 16px 16px, under the header; the page behind is dimmed by a fixed rgba(0,0,0,0.3) curtain. Left column 422px holds the group list (48px padding); right column (x 502, 366px wide) shows the hovered group; groups in order Current accounts and plans,Why Monzo?,Savings and ISAs,Investments and pensions,Credit cards and loans,Insurance,Mobile plans (link /mobile, with a 'New' badge: 16px 600 white on #009ACE),Help and support,Refer a friend (link /refer-a-friend),Switch to Monzo (link /switch); group style MonzoSansText 20px 600; hovered group #091723 on a white 8px-radius row with a chevron, others #091723 at 60%; rows 62px apart; group contents Current accounts and plans: Heading 'Current accounts' (20px 600, 60%) + 'It all starts with our personal current account' (16px 400); tiles: Personal account, Joint account, Under 16s account, 16-17s account (2-up 175x107/130), See all current accounts (366 wide). Heading 'Plans' + 'Upgrade your personal account from £3 a month'; tile Compare plans. Tiles are #F2F8F3 radius 8px with a card illustration above a 16px 600 label, centered,Why Monzo?: 'Bank on an award-winning app': Organise with Pots, Earn cashback, Travel without fees, Get paid into Monzo, Protect your money, Connect your mortgage,Savings and ISAs: 'Put your money to work with flexible ways to save.': Instant Access, Select Access, Fixed Rate, Cash ISAs, Under 16s Savings, Junior ISA, See all savings and ISAs,Investments and pensions: Investments: 'Explore a range of ways to invest with Monzo': Investments, Stocks and Shares ISA, Junior ISA. Pensions: 'Build for your future with a Monzo Pension': Pensions,Credit cards and loans: All credit cards, Aura credit card (New), Flex Purchase credit card, Flex Build credit card, Loans, Overdrafts,Insurance: Home insurance, Contents insurance,Help and support: Help centre, Security at Monzo, Staying safe from fraud, Support with money worries, Switching to Monzo, Plus help, Premium help
- phone: 65px: hamburger icon 24x24 at x 8, y 20 (aria 'Open Personal navigation'), wordmark 94x16 at x 47, Sign up pill 83x37 at x 304, y 14 (13.28px 600, padding 8px 16px, aria-label 'Open a Monzo account'). No Business link in the bar

**Hero**
- summary: A full-width rounded media panel (looping video, poster at rest) with a two-line white 48.8px headline, a 20px white two-line subline and a white pill CTA at left; three trust badges float on the media; a right-aligned 'UK residents. Ts&Cs apply.' line under the panel
- desktop: Section 0-955 (padding 0 24px 64px). Media panel 1392x750 at x 24, y 87 (directly under the 87px header, which overlaps nothing), radius 64px, object-fit cover. Text column left at x 100 (76px inside the panel), max 640px: h1 top y 376 (620x117, two lines), subline y 517 (640x56), CTA y 597. Which? badge 135x107 at x 1217, y 151 (top right); Switch Guarantee 143x70 at x 1141, y 703 and FSCS 53x70 at x 1300, y 703 (bottom right). Legal line 16px #091723 right-aligned at y 853 (16px below the panel). The hero section ends at y 955: the legal line's box ends at 875, then 80px to the next section (not 64)
- phone: Media full-bleed 390x750 from y 65, radius 0 0 34px 34px, poster crop is the portrait mobile file. Text left at x 40, width 310: h1 40.67px/48.8 at y 132 (four lines), subline 19.28px/27 at y 351, CTA 264x48 at y 483 (not full width). Badges in one row at y 705: Which? 88x70 at x 38, Switch Guarantee 143x70 at x 141, FSCS 53x70 at x 300. Legal line centered at y 831. Section padding-bottom 48px
- at rest: Resting frame (what a still shows): a woman in a white dress holding a red sorbet cone among large green leaves, a second cone held toward her from the right edge (assets hero-frame-desktop.jpg / hero-frame-mobile.jpg, the video at 6.5s). The loop also shows a phone paying over peaches, an arcade hug, a dinner and a woodland scene: animation only, never the still. Scrim: a ::after over the media, desktop linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 75%); phone linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 75%). No other overlay (observed, https://monzo.com/, 2026-10-30)
- media: <video loop> with webm + mp4 sources (get-busy-living-hero-desktop / -mobile) over an <img> poster; the poster image file is study.slot_assets hero.media.poster.desktop / .phone (hero-frame-desktop.jpg / hero-frame-mobile.jpg)
- type: h1 MonzoSansDisplay 48.83px/58.59px 800 #FFFFFF, letter-spacing normal (40.67px/48.80px on phones); subline MonzoSansText 20px/28px 400 #FFFFFF (19.28px/26.99px on phones)
- cta: 'Open a free Monzo account' to https://monzo.com/sign-up: white pill 264x48, 1px white border, label MonzoSansText 16px 600 #091723, padding 12px 24px, radius 500px; hover fill white at 80%
- proof: Which? Recommended Provider November 2025 roundel (PNG), Current Account Switch Guarantee lockup (SVG), FSCS Protected padlock (SVG), all on the media
- headline breaks: Desktop: 'Spend your money on life, / not your life on money' (break after the comma; h1 box 620px, max-width 12.7em). Phone 390: four lines 'Spend your / money on / life, not your / life on money' in a 310px column. Set these breaks with explicit <br>s; the stand-in's word widths differ, so wrapping alone gives other breaks. Subline desktop: two lines, 'Your salary sorted into Pots. Your spare change turned into savings.' / 'Your money, doing what it should with Monzo.' in 640px (observed, https://monzo.com/, 2026-10-29)
- copy:
  - h1: Spend your money on life, not your life on money
  - subline: Your salary sorted into Pots. Your spare change turned into savings. Your money, doing what it should with Monzo.
  - CTA: Open a free Monzo account
  - legal line under the panel: UK residents. Ts&Cs apply.

**Get the most out of Monzo (product carousel)**
- summary: Left-aligned h2 + 20px intro + primary CTA, arrows at the right, then a row of product cards (image, title, text, small outline button) that scrolls horizontally, then a block of legal small print
- ground: #FFFFFF
- desktop: Section y 955-1932. h2 at x 64, y 1019 (64px top padding), max 592px; intro y 1082 #091723 at 60%; primary CTA 262x48 at y 1170; prev/next arrows 48x48 at x 1264 and 1328, same row. Cards start y 1266: 320px wide, 24px gap (x 64, 408, 752, 1096 visible, the 4th ends at 1416 so the row bleeds to the 24px page edge); 6 cards in all (Current accounts, Savings, Credit, Investments, Pensions, Homeownership). Media 320x320 radius 32px; title 24px below the media; text 8px below; 'Learn more' small outline button 16px below. Legal block at y 1843: 16px/22.4 #091723 at 60%, the middle line bold
- phone: Section padding 32px top. h2 33.73px/40.48 left at x 16 (two lines); intro 19.28px; primary CTA full width 358x48; cards 320px wide, 24px gap starting x 16, media radius 24px; arrows centered under the row (48x48 at x 139 and 203); legal block above them
- anatomy:
  - Card: media 320x320 (photo or coral product animation), radius 32px; h3 MonzoSansDisplay 25px/35px 700 #091723; text MonzoSansText 16px/22.4px 400 #091723 at 60%; 'Learn more' 36px outline pill, 12.8px, 2px #091723 ring, padding 0 16px
  - Arrows: 48px circles, 2px ring; previous disabled at rest (ring #091723 at 10%, icon at 30%), next active (#091723)
  - Media alternate: photo cards (current accounts, credit, pensions) and flat #FF4F40 cards with a UI fragment that animates on view (savings, investments); at rest the coral card shows its first frame
- components: carousel_arrows, button_primary, button_small_outline, product_card
- copy:
  - h2: Get the most out of Monzo
  - intro: Whatever stage of life you're at, we've got your money covered.
  - CTA: Open a free Monzo account
  - Current accounts: From joint accounts and accounts for kids, to accounts with worldwide travel insurance – choose one that works for you.
  - Savings: Grow your money in Monzo with up to 3.65% AER interest (variable), paid monthly.
  - Credit: Get a credit card with Monzo magic. Whether you're new to credit or a seasoned pro, there's something to suit you. Age 18+.
  - Investments: Choose from a range of options to suit your interests and the level of risk you’re happy with. Starting with as little as £1.
  - Pensions: Track down and bring your old pensions together under one roof, and top up whenever you like. Ages 18-70.
  - Homeownership: Connect a mortgage from any lender in 60 seconds. And get insights that could save you thousands.
  - small buttons: 'Learn more'
  - legal block, three lines: UK residents. Individual product Ts&Cs apply. / The value of investments and pensions could go up or down, and you could get back less than you invest. / UK current account needed for: investments, pensions, savings accounts, mortgage tool, and Flex. Flex eligibility criteria applies. Missed payments may negatively impact credit scores.
- phone breaks: h2 'Get the most / out of Monzo' (358px)

**Quit the app juggling act (feature slides)**
- summary: Centered h2 + intro + primary CTA, then a wide slide carousel: each slide is a 64px-radius panel split into a text half and a square image half; the next slide peeks in from the right; play/dots/next controls centered below
- ground: #FFFFFF
- desktop: Section y 1932-2942. h2 centered (466px, y 1996), intro centered max 720px, TWO lines (720x56 at y 2059; if the stand-in fits it on one line, narrow the box until it wraps to two), CTA centered y 2147. Slides 1141x571 radius 64px, first slide LEFT-aligned at x 125 (not centered: 125+1141 = 1266; the 49px of white on the right shows the next slide peeking at x 1315), the next starts at x 1315 (48px gap, cropped by the viewport). Slide: text column x 173 (48px inside), 475px wide, vertically centered: h3 31.25px/37.5 700, 16px body, outline CTA 48px tall 24px below; image 571x571 flush right (x 696). Grounds alternate #F2F8F3 (Sort your salary, Round up your spare change, Invest automatically) and #112231 with white text (Put bills in their place, Earn cashback on brands you love). Controls at y 2830: play button 48x48, 5 dots (active is a 52x32 hit area with a wide bar), next arrow 48x48. Slide media 571x571 at x 696 with its own radius 64px on all four corners: the photo's left corners are rounded, so there is a soft notch where photo meets the text half, never a straight seam
- phone: Not a carousel on phones: the 5 slides stack vertically, each a 358px-wide card radius 32px, image 358x358 on top, text below with 32px padding (h3 27.99px/33.59), 48px between cards
- anatomy:
  - Slide text on #F2F8F3: h3 #091723 31.25px/37.5px; body 16px/22.4px #091723 at 60% (rgba(9,23,35,0.6)), NOT full ink; on #112231 slides h3 #FFFFFF and body #FFFFFF at 90% (observed, https://monzo.com/, 2026-10-30)
  - Slide text on #112231: h3 #FFFFFF, body #FFFFFF at 90%, outline button with a 2px #FFFFFF ring
  - Slides do not auto-play at rest: the control shows a play icon ('Start auto-playing slides')
  - Images are square photos with the Monzo app or cards in them; the first slide's photo is a picnic with Monzo cards
- components: slide_panel, carousel_controls, button_secondary_outline
- copy:
  - h2: Quit the app juggling act
  - intro: From everyday spending to bigger goals, it's the one app to fit your finances.
  - CTA: Open a free Monzo account
  - Sort your salary: Use Salary Sorter to divide up your income or student loan into separate Pots for bills, spending and whatever else you need to budget for. Set it up once, and we’ll take it from there. Button: Explore Salary Sorter
  - Put bills in their place: You don’t enjoy paying bills, but we enjoy making it easier. Set up Direct Debits and standing orders to come directly from a dedicated bills Pot. Button: Explore Pots
  - Round up your spare change: Want to save without even thinking about it? Automatically send spare change to your savings every time you spend.
  - Earn cashback on brands you love: Pick your offers, shop in person or online, and earn 2-10% cashback every time. It’s that simple. Button: Explore cashback
  - Invest automatically: Auto invest features help you set investing habits and let them tick along in the background. You can also automatically invest any interest you earn on your savings each month. Button: Explore investments. Legal under the button: The value of your investments could go up or down and you could get back less than you put in. 18+, Monzo current account required.
- phone breaks: h2 'Quit the app / juggling act', centred in 358px (desktop: one line, 466px wide inside a 720px max column)

**It all starts with a Hot Coral card (accounts and plans)**
- summary: Centered h2 + CTA, then a 3-column grid of light account cards with a card illustration, a circled arrow, title, optional price tag, short text and legal line; 'View all' outline button under 2 rows
- ground: #FFFFFF
- desktop: Section y 2942-3933. h2 centered y 3006; CTA centered y 3085. Grid at y 3181: cards 421px wide, 24px gaps (x 64, 509, 955), rows 281-287px, 24px row gap. Third row (Aura credit card, Flex, Business) exists but is collapsed at rest; 'View all' 113x48 outline button centered at y 3821
- phone: Cards become a horizontal row 320px wide (16px gap), 386px tall, with arrows below; CTA full width
- anatomy:
  - Card: #F2F8F3, radius 32px, padding 32px 24px 24px, the whole card is a link (Personal account, Joint account, Under 16s account, Extra, Perks, Max)
  - Top row: card image left in a 48px-tall box at x 26, y 34 inside the card: a 55-56x35 miniature bank card with a soft shadow (Personal coral, Joint white with JOINT, Under 16s three fanned cards blue/pink/yellow 92px wide, Extra coral gradient, Perks blue gradient, Max deep red). Files: the account-card-<name> images in study.slot_assets (4x, transparent, 8px margin around the 48px box). Right: 36x36 circled arrow, 2px #091723 ring, 24px arrow icon, at x 359, y 46 inside the card. NOT 48px (observed, https://monzo.com/, 2026-10-29)
  - Title row: a flex row, justify-content space-between, gap 8px, 369px wide (card 421 minus 26px each side). Title MonzoSansDisplay 25px/30px 700 (Raleway 750) at the left; on plans only, the price label sits at the RIGHT end of the row (its right edge 26px from the card's right edge): Extra '£3 a month' 107x34, Perks '£9 a month' 108x34, Max 'From £19 a month' 159x34. Label: white #FFFFFF fill, radius 8px (a rounded rectangle, not a 100px pill), padding 4px 8px, 2px transparent border, MonzoSansText 16px/22.4px 600 #091723 (Onest 550) (observed, https://monzo.com/, 2026-10-30)
  - Text 16px/22.4 #091723 at 60%; legal line pinned to the bottom 12.8px/17.92 at 60%
- components: account_card, button_secondary_outline
- copy:
  - h2: It all starts with a Hot Coral card
  - CTA: Open a free Monzo account
  - Personal account: Our signature Hot Coral current account that fits your finances. Legal: UK residents. Ts&Cs apply.
  - Joint account: A shared bank account that helps you manage joint costs. Legal: You'll both need a Monzo current account. Aged 18+. UK residents. Ts&Cs apply.
  - Under 16s account: A free account for kids that keeps up as they grow up. Set spending limits and see what they're up to with instant notifications. Legal: Ages 6-15. 18+ parent/guardian account needed first. UK residents. Ts&Cs apply.
  - Extra, price pill £3 a month: Unlock more money tools, see your other banks and credit cards in Monzo, and create custom spending categories. Legal: Age 18+. UK residents. Ts&Cs apply.
  - Perks, price pill £9 a month: Enjoy the best of Monzo with a boosted savings rate and added benefits like an annual Railcard and weekly Greggs treat. Legal: Age 18+. UK residents. Ts&Cs apply.
  - Max, price pill From £19 a month: Protect the things that matter with worldwide travel and phone insurance, UK & Europe breakdown cover, and more. Legal: Ages 18-69. 3-month minimum term. UK residents. Ts&Cs apply.
  - button: View all
- phone breaks: h2 'It all starts with / a Hot Coral card' (358px; desktop one line, 607px)

**The bank made for travel (feature carousel)**
- summary: Same pattern as 'Get the most out of Monzo': left h2, intro, an outline button then a primary button, arrows right, row of 320px cards without buttons
- ground: #FFFFFF
- desktop: Section y 3933-4762. h2 y 3997; buttons at y 4148: 'Explore travel' outline 160x48 at x 64, then primary 262x48 at x 240 (16px gap). Cards at y 4244: 5 cards (Fee-free spending abroad, Live exchange rates, No surprises at checkout, Card freeze, Multi-trip travel cover), media 320x320, h3 25px, text 16px with inline underlined links
- phone: Primary CTA first, outline below it, both 358x48 full width, 16px apart; cards 320px; arrows centered below
- anatomy:
  - Inline links in card text: same color as the text (#091723 at 60%), underlined
- components: product_card, carousel_arrows
- copy:
  - h2: The bank made for travel
  - intro: No foreign transaction fees or added costs – so travel feels lighter from the start.
  - buttons: Explore travel (outline), Open a free Monzo account (primary)
  - Fee-free spending abroad: Pay anywhere, in any currency – on your debit or credit card – with no foreign transaction fees.
  - Live exchange rates: As soon as you pay, we’ll show you the amount in pounds in the app. No waiting, no guessing, and no more napkin maths.
  - No surprises at checkout: See the price of things before you go with our currency converter. ('currency converter' is an underlined link)
  - Card freeze: Freeze and unfreeze your card at any time if it goes exploring without you.
  - Multi-trip travel cover: Get multi-trip insurance with Max. From £19 a month. Ages 18-69. UK residents. 3 month minimum term. Ts&Cs apply. ('multi-trip insurance' is an underlined link)
- phone breaks: h2 'The bank made / for travel' (358px)

**Save like a superhero (savings band)**
- summary: An inset #F2F8F3 band with 64px corners: centered h2, intro, outline + primary buttons, three cards with square media
- ground: #F2F8F3 panel on #FFFFFF
- desktop: Panel 1312x1006 at x 64, y 4762, radius 64px, padding 64px, but the h2 top sits 112px inside the panel (y 4874 = 4762 + 112): use padding-top 112px, sides 64px, bottom 64px. h2 centered y 4874, intro y 4937 (720 wide, two lines); buttons centered at y 5025 ('Explore savings' outline 174 then primary 262, 16px gap). Three cards at y 5121, 379px wide, 24px gaps: media 379x379, h3 25px/35px, text 16px
- phone: Panel full-bleed (no radius), padding 32px 16px; primary then outline stacked full width; cards become a 320px carousel with arrows
- anatomy:
  - Card media are product UI over coral or photos: Instant Access (person with Pots overlay), Select Access (phone on coral), Fixed Rate / ISA (photo)
- components: product_card, button_primary, button_secondary_outline
- copy:
  - h2: Save like a superhero
  - intro: Keep your money at your fingertips in personalised Savings Pots, or earn tax-free interest with an ISA.
  - buttons: Explore savings (outline), Open a free Monzo account (primary)
  - Instant Access Savings: The most flexible way to save. Earn from 2.75% to 3.25% AER interest (variable) paid monthly, depending on your subscription plan. ('subscription plan.' is an underlined link)
  - Select Access Savings: Grow your money faster without locking it away and get a higher rate for making 2 (or fewer) withdrawals a year. Earn up to 3.65% AER interest (variable), paid monthly. £500 minimum deposit.
  - Fixed Rate Savings: Earn our best rate of 4.70% AER (fixed) by setting your savings aside for 1 year. £500 minimum deposit, interest paid at maturity. No withdrawals, closure only.
- phone breaks: h2 one line 'Save like a superhero' (358px)

**Make payday twice as nice (split feature)**
- summary: Two equal columns: text left (h2, two 20px paragraphs, primary button, legal small print), square media right
- ground: #FFFFFF
- desktop: Section y 5768-6520. Text column x 64, 624px, vertically centered (h2 y 5944); media 624x624 at x 752, y 5832: coral panel with an iPhone showing a coral Monzo card and the Activity list. Legal 16px at 60% with underlined links. Media radius 32px. Legal y 6299 (2 lines, 45px)
- phone: Text first (h2 33.76px), full-width primary, legal, then media 358x358 below
- anatomy:
  - Body copy is ONE <p> (20px/28px, #091723 at 60%, 624px wide) holding TWO sentences groups split by <br><br>, so it reads as two paragraphs with one empty 28px line between them: 'Get paid into Monzo through Bacs and get your salary one business day early.' (2 lines) <br><br> 'You could also land a Double Payday...' (4 lines). 7 line-heights in all, 196px tall, y 6007-6203 (observed, https://monzo.com/, 2026-10-30)
  - Button: 'Explore Double Payday' primary
- components: button_primary, split_feature
- copy:
  - h2: Make payday twice as nice
  - body (one <p>, 20px/28px, #091723 at 60%, 624px; <br><br> after the first sentence): Get paid into Monzo through Bacs and get your salary one business day early.<br><br>You could also land a Double Payday. It works like this: if you earn £1,500, we'll add an extra £1,500 to your account. It’s yours to spend, save or invest – and you won’t pay tax on your winnings. There are 10 lucky customers every month.
  - button: Explore Double Payday
  - legal 16px at 60%: UK residents. 18+. Eligibility based on previous month’s salary. Current Account and Double Payday Ts&Cs apply. ('Current Account' and 'Double Payday Ts&Cs' are underlined links)
- phone breaks: h2 'Make payday / twice as nice' (358px)

**A regulated bank with 24/7 support (feature grid)**
- summary: Centered h2 and CTA under an 80px animated app icon, flanked by two columns of two cards each, coral and navy in a checkerboard
- ground: #FFFFFF
- desktop: Section y 6520-7352. Left column x 64, right column x 1036; cards 340x320, radius 32px, 64px between rows (y 6584 and 6968). Order: left 24/7 support (#FF4F40), Deposit cash and cheques (#112231); right No hidden fees (#112231), FSCS protected (#FF4F40). Center: Monzo app icon (app-icon.png; video homepage-monzo-app-icon) 80x80 at y 6793, h2 480px centered (two lines), primary CTA y 7031
- phone: Icon, h2, CTA first, then the cards as a 340px carousel with 4 dots ('Card 1 of 4')
- anatomy:
  - Card: media on top 340x156-178 (animated UI), then a tag pill (MonzoSansText 16px 600 white on a translucent white pill) and a 16px/22.4px 600 white sentence, 24px side padding
- components: feature_tile, button_primary
- copy:
  - h2: A regulated bank with 24/7 support
  - CTA: Open a free Monzo account
  - 24/7 support (coral): You can speak to us through our in-app chat – whenever, wherever. We're here for you 24/7.
  - Deposit cash and cheques (navy): Add cash to your account at any PayPoint or Post Office (£1 per deposit), and pay in cheques via the app.
  - No hidden fees (navy): Our current accounts are free and we don’t charge monthly fees or surprise you with hidden costs.
  - FSCS protected (coral): Your eligible money in Monzo is protected by the FSCS up to £120,000 per person.
- phone breaks: h2 'A regulated bank / with 24/7 support' on both widths (480px max column on desktop, centred)

**Which? recommended 2 years in a row (proof band)**
- summary: Inset navy panel: the two Which? roundels left, white h2 + line + white CTA right
- ground: #112231 panel on #FFFFFF
- desktop: Panel 1312x554 at x 64, y 7416, radius 64px, padding 64px. Image 568x426 at x 128, radius 32px (the two badges on navy). Text column x 744, 568px: h2 39.06px white two lines (y 7584), line 20px white at 90%, white CTA 262x48
- phone: Panel 358x576, radius 32px, padding 24px; image 310x233 on top (radius 24px), h2 33.76px three lines, full-width white CTA
- anatomy:
  - Primary CTA inverts on navy: white fill, #091723 label
- components: proof_band, button_white
- copy:
  - h2: Which? recommended 2 years in a row
  - line: Join 16 million people already banking with Monzo.
  - CTA: Open a free Monzo account (white)
- phone breaks: h2 three lines 'Which? / recommended / 2 years in a row' (310px, panel padding 24px). Desktop two lines 'Which? recommended / 2 years in a row' in 568px

**Apply for an account in 10 minutes (steps)**
- summary: Inset #F2F8F3 panel: centered h2, a two-line 20px intro, a primary CTA, then three numbered step cards left and one large media right, with vertical pager dots
- ground: #F2F8F3 panel on #FFFFFF
- desktop: Panel 1312x919 at x 64, y 8098, radius 64px, padding 64px. h2 centered y 8162 (720 wide, 47 tall, one line). Intro centered at y 8225, max 720, 20px/28px #091723 at 60%, two lines (break after 'changed the'); CTA 262x48 centered at y 8313. Steps column x 128, 560 wide: three step buttons 139px tall, radius 16px, padding 24px, 24px apart. Media 560x560 at x 752, y 8393. Vertical dots at x 1336 (active bar 24x60)
- phone: Panel without the inset; each step is a stacked card 358 wide radius 24px: media 358x358 on top, then 'Step 1' 19.28px 600, title 23.23px 700, text 16px
- anatomy:
  - Resting state (what a still shows): step 1 active: white card, 'Step' 16px 600 and numeral MonzoSansDisplay 61px/73px 800 in #FF4F40, title 25px 700 #091723, description 16px shown. Steps 2 and 3: no fill, all text #091723 at 60%, descriptions collapsed (height 0)
  - Step card inner layout (step 1, card 560x139 at x 128, y 8441, padding 24px): a 60px-wide left column centered at x 178 holding 'Step' (16px/17.6 600, y 8465) over the numeral (61px/73px 800, y 8482); text column at x 236, 428px wide: title 25px/27.5px 700 at y 8470, description 16px/22.4 at 60% at y 8506 (two lines). Steps 2 and 3 have the same columns; their descriptions are height 0 (observed, https://monzo.com/, 2026-10-30)
  - Steps advance as the reader scrolls and the media swaps (animation only). Step 1 media: two coral Monzo cards with '♥ Join 16 million customers'
  - Titles: Open a free Monzo account / Fill out a few questions / Add your Hot Coral card to your digital wallet
- components: step_list, button_primary
- copy:
  - h2: Apply for an account in 10 minutes
  - intro: Join over 16 million personal and business customers who've changed the way they bank.
  - CTA: Open a free Monzo account
  - Step 1, Open a free Monzo account: It takes just 10 minutes to apply, and comes with innovative features to help you manage your money.
  - Step 2, Fill out a few questions: We'll ask you some questions to help us set up your account, but there's no lengthy paperwork to fill in. In fact, it only takes a few minutes.
  - Step 3, Add your Hot Coral card to your digital wallet: Once your account's open, you can start using your card straight away with your digital wallet.
- spacing after: Panel ends at y 9017 (8098 + 919). Then 64px of white page, then the security section starts at y 9081 with 64px top padding, so the security h2 is at y 9145: 128px below the panel's bottom edge. Don't start the next section flush against the panel (observed, https://monzo.com/, 2026-10-29)
- phone breaks: h2 'Apply for an account / in 10 minutes' (358px; desktop one line)

**Security you can bank on (UI spotlight)**
- summary: Centered h2, a two-line 20px intro, CTA; a phone screenshot in the middle with three feature items on each side; the active item gets a light card
- ground: #FFFFFF
- desktop: Section y 9081-10262. h2 y 9145 (477 wide, one line); intro centered at y 9208, max 720, 20px/28px #091723 at 60%, two lines (break after '24/7'); CTA 'How we protect your money' y 9296. Phone image 395x790 at x 523, y 9392. Left items x 64, right items x 981, each 395 wide, padding 16px, radius 16px. Left: Call status, Instant notifications, Card freeze; right: Biometric login, Extra security controls, Emergency logout. Item titles (20px/28px) at y 9588, 9777, 9922 on the left (x 80) and 9565, 9710, 9900 on the right (x 997); text 8px below each title; item boxes start 16px above their titles. Left items are 299-363px wide text blocks, staggered rather than evenly spaced (observed, https://monzo.com/, 2026-10-30)
- phone: Phone image first, then the items as a 320px carousel with 6 dots
- anatomy:
  - Resting state: 'Call status' active: #F2F8F3 card radius 16px, phone shows the call-status screen. Others have no fill
  - Item title MonzoSansDisplay 20px/28px 600; text 16px/22.4 at 60%
  - 'Industry first' round coral sticker 56x56 at the item's top right (Call status, Extra security controls)
- components: spotlight_item, button_primary
- copy:
  - h2: Security you can bank on
  - intro: We help keep your money safe with industry-first fraud protection and 24/7 support.
  - CTA: How we protect your money
  - Call status: This feature tells you if you're really speaking to Monzo, or if it could be a scammer. It helps prevent around 1,000 fraud attempts a month.
  - Instant notifications: Get notified the second you spend, so you’re in the know wherever you go.
  - Card freeze: Instantly freeze your card in the app if it gets lost, stolen or you suspect fraud.
  - Biometric login: Switch on face or fingerprint ID to unlock your app and authorise payments.
  - Extra security controls: Add an extra layer of protection when making large payments. Use known locations, a secret QR code or trusted contacts to verify it’s you.
  - Emergency logout: If your phone’s lost or stolen, log into your account from another device to freeze and unfreeze your accounts and remotely log out of all your devices.
- phone breaks: h2 'Security you / can bank on' (358px; desktop one line, 477px)

**Independent service quality survey results (regulatory ranking)**
- summary: Regulatory block: sticky description left, two ranking cards right (Great Britain, Northern Ireland), each with the bar chart image and a primary button
- ground: #FFFFFF
- desktop: Section y 10263-11786, padding 64px 24px. Left description 778px wide at x 24, position sticky top 54px: 'Published August 2026' tag (16px 600 #091723 at 60% on a #F2F8F3 label), h2 MonzoSansDisplay 44px/52.8 800 (two lines, 650 wide), subtitle 'Personal current accounts' 24px/33.6 600 #FF4F40, text 16px at 60%. Right: cards 550x665 at x 866, radius 64px, padding 64px, #F2F8F3, 64px apart; card h3 16px 600 MonzoSansDisplay; chart image 422x430; button 'View full results for Great Britain' 305x48 primary
- phone: Stacked: tag 14px, h2 32px/38.4, subtitle 20px, text, then cards 358 wide radius 16px padding 24px, button 13.28px 245x44
- anatomy:
  - Resting state: the description sits at the top beside the first card
- components: ranking_card, button_primary
- copy:
  - tag: Published August 2026
  - h2: Independent service quality survey results
  - subtitle: Personal current accounts
  - text: As part of a regulatory requirement, independent surveys were conducted to ask customers of the largest personal current account providers in Great Britain and Northern Ireland if they would recommend their provider to friends and family. The results represent the view of customers who took part in the survey.
  - cards: Great Britain (button: View full results for Great Britain), Northern Ireland (button: View full results for Northern Ireland)
- phone breaks: h2 'Independent service / quality survey results' on both widths (650px box desktop, 358px phone)

**APP fraud rankings (regulatory note)**
- summary: Tag, one-line h2 and one paragraph with a bold underlined link
- ground: #FFFFFF
- desktop: Section y 11786-12098, padding 64px 24px. Tag 'Published February 2026' at x 100; h2 44px 800 one line, 1264 wide at x 88; text 16px at 60% with a 700 #091723 underlined link to the PSR PDF
- phone: h2 32px three lines, text 16px
- anatomy:
- components: text_block
- copy:
  - tag: Published February 2026
  - h2: Authorised push payment (APP) fraud rankings in 2024
  - text: Authorised push payment (APP) scams happen when someone is tricked into transferring money to a fraudster’s bank account. Information about Monzo’s performance prior to the introduction of the reimbursement requirement in October 2024 can be found in PSR's latest APP Scams Performance Report published in February 2026. (link 700 #091723 underlined: PSR's latest APP Scams Performance Report)
- phone breaks: h2 'Authorised push / payment (APP) fraud / rankings in 2024' (358px; desktop one line, 1264px)

**Footer**
- summary: A navy #112231 panel with 64px top corners, inset 24px: five link columns, a locale pill, the coral wordmark set the full content width, the legal paragraph, then social icons and app-store badges
- ground: #112231
- anatomy:
  - Panel x 24, width 1392, from y 12162, 1577 tall at 1440; radius 64px 64px 0 0; padding 64px 64px 0 (content x 88-1352). Bottom edge sits on the page bottom
  - Desktop stack (a vertical flex, gap 48px between groups): link columns y 12226-13046 (820 tall, columns gap 48px), locale row 13093-13175 (82 tall incl. 24px top and bottom padding; pill centered), wordmark 13224-13444, legal 13492-13575 (incl. 16px margin under the <p>), socials and store badges 13623-13675, then 64px bottom padding to 13739 (observed, https://monzo.com/, 2026-10-30)
  - Columns 280px wide at x 88, 416, 744, 1072 (328px step). Headings MonzoSansDisplay 25px/30px 700 #FFFFFF (Raleway 750, -0.5px); links MonzoSansText 16px/22.4px 600 #FFFFFF (Onest 550), 44px rows, no underline, hover #C9D0C6 (0.2s linear)
  - Products: Current accounts, Business accounts, Savings, Credit cards, Loans, Investments, Pensions, Home Insurance
  - Company: Careers, Press, Blog, The Book of Money, Investor information, Helping everyone belong, Modern slavery statement, Sustainability
  - Using Monzo: Web app login, Accessibility, Additional support, Life events, Terms and Conditions, Information about our current account services, Savings hub, Personal loan calculator, Currency Converter, 1p Savings Challenge
  - Help and security: Help centre, FAQs, Fraud protection, Security at Monzo, Money worries, FSCS information
  - Site and app information (second row, x 88, y 12754, heading wraps to two lines): Privacy notice, Cookie notice, Browser support policy, Mobile operating system support policy, App performance
  - Locale pill centered at y 13117: '🇬🇧 United Kingdom | English', 263x34, white at 20% opacity, radius 100px, padding 4px 12px, label 16px 700 white
  - Wordmark: the monzo logo SVG (wordmark-footer.svg, viewBox 0 0 1452 253) in #FF4F40, 1264x220 at y 13224 (full content width)
  - Legal paragraph at y 13492: a <p> that opens with a <br> (one empty 16px/22.4px line, 19px of space) and then a <small> set 12.8px/17.92px 400 #FFFFFF, 1261px wide, TWO lines at 1440 (break after 'Financial Conduct Authority and'). Not 16px. Text: 'Monzo Bank Limited is a company registered in England and Wales (No.09446231). Monzo Bank Limited is authorised by the Prudential Regulation Authority and regulated by the Financial Conduct Authority and the Prudential Regulation Authority. Our financial Services Register number is 730427. Our address is Broadwalk House, 5 Appold St, London EC2A 2AG.' (observed, https://monzo.com/, 2026-10-29)
  - Bottom row centered at y 13622: four white social glyphs 54x54 in 56x44 hit areas, 16px apart (Instagram, Facebook, LinkedIn, YouTube), then App Store badge 156x52 and Google Play badge 176x52 (black, radius 16px)
  - No copyright line and no phone number in the footer
- phone: Panel full width, radius 32px 32px 0 0, padding 32px 16px. Order: locale pill at top, then the five columns stacked one per row (headings 23.23px), store badges row, socials spread across the width, wordmark 326x57, legal paragraph

**On dark grounds**
- secondary button: outline pill with a 2px #FFFFFF ring and white label (carousel slides on #112231); primary on navy is the white pill with #091723 label
- link: #FFFFFF 600, no underline, hover #C9D0C6
- muted text: #FFFFFF at 90% for body on navy and coral (no grey hex)
- hairline: none: the footer and navy bands use no rules
- logo variant: coral #FF4F40 wordmark on #112231 (footer); there is no white wordmark on the homepage

## Components

- **button primary** (observed): fill #091723, text #FFFFFF, radius pill, height 48, padding x 24, font size 16, weight 550. Used for every 'Open a free Monzo account', nav Sign up (108x51, padding 12px 24px) and ranking buttons. Centered under centered h2s, left under left h2s. CSS radius is 500px (nav Sign up) / 128px; any pill radius renders the same. Label weight 550 is the Onest stand-in for MonzoSansText 600 (calibrated)
  - hover (observed): fill #2C3A43, border 1px solid #2C3A43, transition background-color, color 0.3s ease-in-out 0.1s
  - focus (observed): outline 1px solid #218FB7
- **button white** (observed): fill #FFFFFF, text #091723, radius pill, height 48, padding x 24, font size 16, weight 550. Primary on photos and navy (hero, Which? band). Label weight 550 is the Onest stand-in for MonzoSansText 600 (calibrated)
  - hover (observed): fill rgba(255,255,255,0.8), transition background-color 0.2s
  - focus (observed): outline 1px solid #218FB7
- **button secondary outline** (observed): fill #FFFFFF00, text #091723, ring px 2, ring #091723, radius pill, height 48, padding x 24, font size 16, weight 550. White ring and text on #112231 slides. Small variant 'Learn more': 36px tall, 12.8px, padding 0 16px. Label weight 550 is the Onest stand-in for MonzoSansText 600 (calibrated)
  - hover (observed): fill rgba(9,23,35,0.1), transition background-color 0.3s linear
  - focus (observed): outline 2px solid #009ACE
- **carousel arrow** (observed): size 48, ring px 2, ring #091723, radius pill, icon arrow 24px #091723, disabled ring #091723 at 10%, icon at 30%, hover fill #091723 at 10%. 48px circle (radius 50%)
- **carousel dots** (observed): anatomy dots 8px #091723 at 30%-ish in 24x32 hit areas; the active dot is a wide bar (52px hit area). Exact dot size not measured
- **product card** (observed): anatomy media 320x320 radius 32px; title 25px/35px 700 24px below; text 16px at 60%; optional Learn more small outline button
- **account card** (observed): anatomy #F2F8F3, radius 32px, padding 32px 24px 24px, whole card a link; card image (a 55-56x35 bank card in a 48px-tall box, the account-card-*.png images in study.slot_assets) + 36px circled arrow (2px ring); 25px title; optional white price pill 16px 600; text; 12.8px legal pinned bottom
- **slide panel** (observed): anatomy 1141x571, radius 64px, overflow hidden; text half 48px inset; image square flush right; ground #F2F8F3 or #112231
- **feature tile** (observed): anatomy 340x320, radius 32px, #FF4F40 or #112231; media top 178px; tag pill 16px 600 white on translucent white; 16px 600 white text
- **step list** (observed): anatomy 560x139 buttons radius 16px padding 24px; active white with coral 'Step' + 61px numeral; inactive transparent at 60%
- **tag label** (observed): anatomy 'Published August 2026': MonzoSansText 16px 600 #091723 at 60% on #F2F8F3, small radius (not measured)
- **locale pill** (observed): anatomy 263x34, white at 20% on #112231, radius 100px, padding 4px 12px, flag emoji + 16px 700 white
- **account card arrow** (observed): size 36, ring px 2, ring #091723, radius pill, icon arrow 24px #091723 (icon-arrow-right.svg), centred, 6px inset. 36x36 circle, 2px solid #091723 border, radius 128px, at the card top right (x 359, y 46 inside a 421px card at 1440). Not the 48px carousel arrow
- **nav item** (observed): anatomy Personal and Business: 24px solid filled glyphs (icon-nav-personal.svg, icon-nav-business.svg; not outline icons) + label MonzoSansText 16px 600, both icon and label #091723 at 60% at rest, INCLUDING the active Personal item; hover #091723. Personal sits on a white pill 152x40 (padding 8px 8px 8px 12px, radius 100px) with a 24px chevron in the same 60% navy; Business 125x40, padding 8px 12px, no fill. 8px icon-to-label gap

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| button-primary | ease-in-out | 300ms | primary hover fill, 0.1s delay | observed |
| button-outline | linear | 300ms | outline and arrow hover fill | observed |
| white-button-and-links | ease | 200ms | white button fill, footer link color | observed |
| media-on-view |  |  | card and slide media are videos that play once when scrolled into view (paused at rest, first frame shows); the hero video loops. 52 prefers-reduced-motion blocks in the CSS gate motion | observed |
| steps-scroll |  |  | Apply steps activate one by one as the page scrolls; entrance fades. Resting state: step 1 active, fully opaque (animation only) | observed |

## Icon tokens

Grid not published, stroke not published (published).

## Signature moves

### Big-radius inset panels

Where: hero (1392 wide, 24px inset), Save, Which?, Apply and ranking panels (1312 wide), footer (top corners).
Do: 64px radius at 1440 on every band panel and slide; 32px on cards and media; 16px on list items; 32px (and 34px for the hero bottom) on phones. Bands are panels floating on white, never edge-to-edge color fields on desktop. Many per page.

### Full-width coral wordmark

Where: footer.
Do: the monzo wordmark in #FF4F40 set the full content width (1264x220 at 1440, 326x57 at 390) on #112231, between the locale pill and the legal paragraph. Once per page.

### Coral and navy alternation

Where: feature grid, slides.
Do: #FF4F40 and #112231 tiles alternate (checkerboard in the 2x2 grid; slides alternate #F2F8F3 and #112231); text on both is white.

## Messaging: rules

The guide carries no messaging framework; its messages live in sample headlines: "Banking made easy", "Brighter Banking", "Award winning app with the hot coral card", "Spend, save and manage money". The press page supplies mission and boilerplate. The live homepage (2026-10-29) has moved to "Spend your money on life, not your life on money".

Why it works: Every sample line pairs a plain product benefit with a bright, short phrase: the card and the app do the persuading, the words keep it easy.

|  |  |
|---|---|
| Mission | to build the best bank account in the world (press page) |
| Founded | early 2015 |
| Bank licence | August 2016 |
| Customers | more than 16 million (press page, 2026) |
| Team | more than 2,000 |
| Press contact | press@monzo.com |

- Headlines are short phrases with big impact (p.34).
- Lead with the product benefit in plain words: spend, save, manage, split.
- Use current numbers from the press page (16 million customers, 2026), not the 2022 guide's 6 million.
- Name the card as the hot coral card / Hot Coral card.
- Don't write long, clause-heavy headlines
- Don't use generic stock claims ("so much more", "discover")

Not published: pillars or key messages; a positioning statement inside the guide.

Real examples, to look at on Monzo's own pages (not for reuse):
- Hero typeface specimen: "Banking made easy": Monzo style guide (Aug 2022, press kit) p.34
- In use: "Award winning app with the hot coral card": Monzo style guide (Aug 2022, press kit) p.61
- Identity overview opener: "Banking made easy" with card in hand: Monzo style guide (Aug 2022, press kit) p.72

Sources: https://downloads.ctfassets.net/ro61k101ee59/2zfabTQILrAL4IDPKjJQCm/ca5ed206d818d2cc45652043f1e984ce/Monzo-Press-Kit-2026.zip, https://monzo.com/press, https://monzo.com/

## Voice: rules

Monzo Writing Principles publish three principles and a dial per channel. Straightforward kindness is always on; Everyday magic and Warm wit rise from operational comms (low/none) to organic social (high/maxed out). The 2022 style guide itself has no voice section.

Why it works: Kindness is the floor and personality is a dial, so a closure email and a TikTok can both be Monzo without either feeling wrong.

|  |  |
|---|---|
| Operational comms | Kindness maxed out; magic low; wit none |
| Customer service | Kindness high; magic low; wit none |
| Marketing comms | Kindness high; magic medium; wit medium |
| Campaigns | Kindness high; magic high; wit high |
| Paid social | Kindness high; magic high; wit high |
| Organic social | Kindness high; magic high; wit maxed out |

- Ask first: what does my reader care about most?
- Explain the impact before the reasoning.
- Plain words over formal Latin-rooted ones; read it aloud.
- Active voice; say who did it.
- Sorry once and sincerely when we are at fault; no sorry when we are not.
- Humour is seasoning: pick the best joke, smart asides over puns.
- Inclusive references most people would understand.
- In customer service and bad news: no wit, maximum clarity.
- Don't use literal magic language ("hey presto", wand emoji)
- Don't punch down or make "even your mum could use it" jokes
- Don't use "blacklist"/"whitelist" (use blocklist/allowlist)
- Don't comment on politics or sensitive topics
- Don't reach for stock seasonal puns

Do and don't:
- Do: "We're sorry. Here's what we're doing to fix it.". Sorry once, sincerely, then what happens next (Writing Principles).
- Don't: "We'd like to apologise for any inconvenience caused.". Formal, distant apology (Writing Principles).

Sources: https://monzo.com/tone-of-voice

## Logo: rules

The lowercase "monzo" wordmark is the primary logo, shown sitting on the hot coral card. Three colourways: hot coral (white and light grounds), soft white (on hot coral and deep navy), deep navy (on soft white and light grounds, with hot coral somewhere in the composition). It sits in a corner or centred. The M icon is legacy, kept for small spaces, the app badge and performance marketing.

Why it works: One bold, simple wordmark in three colourways covers every ground in the palette, and retiring the M to small sizes keeps the wordmark the face of the brand.

|  |  |
|---|---|
| Primary logo | lowercase wordmark "monzo" |
| Colourways | Hot coral #FF4F40, Soft white #F2F8F3, Deep navy #112231 |
| Clear space (holding shape) | width of a "z" |
| Clear space (other content) | width of an "m" |
| Minimum size | 20px tall on screen; 3mm in print |
| Positions | corners or centred |
| Secondary mark | M icon (legacy): small spaces, app badge, performance marketing |

- Clear space inside a holding shape: at least the width of a "z" around the wordmark (p.8).
- Clear space from other content: at least the width of an "m" (p.8).
- Minimum size: 20px tall on screen, 3mm in print (p.8).
- Position: corners or centred on the page (p.9).
- Deep navy wordmark only when hot coral features elsewhere (p.7).
- M icon only for small spaces, the app badge and performance marketing (p.11).
- Don't break the clear-space rules
- Don't overlay the logo on text
- Don't apply effects (shadows, outlines)
- Don't use legacy logos or the legacy icon to represent the brand
- Don't recolour the logo
- Don't transform (rotate, skew) the logo
- Don't lock up the M icon with the wordmark
- Don't make the logo a different colour from the typography (p.29)

Not published: clear space and minimum size for the M icon; a lockup with tagline or sub-brands.

Do and don't:
- Do: "monzo". Hot coral wordmark on a light ground, z-width clear space (pp.7-8).
- Don't: "M + monzo". Locking the M icon up with the wordmark (p.12).

Real examples, to look at on Monzo's own pages (not for reuse):
- Three colourways on white, hot coral and navy: Monzo style guide (Aug 2022, press kit) p.7
- Clear space: z and m widths, 20px minimum: Monzo style guide (Aug 2022, press kit) p.8
- Corner and centred positions: Monzo style guide (Aug 2022, press kit) p.9
- M icon in browser tab, app grid and social ad: Monzo style guide (Aug 2022, press kit) p.11
- Logo don'ts: Monzo style guide (Aug 2022, press kit) p.12

Sources: https://downloads.ctfassets.net/ro61k101ee59/2zfabTQILrAL4IDPKjJQCm/ca5ed206d818d2cc45652043f1e984ce/Monzo-Press-Kit-2026.zip

## Color: rules

Hot coral (#FF4F40) is the brand, supported by a primary palette of soft white (#F2F8F3) and deep navy (#112231) chosen to make coral pop. Six secondary colours (mid orange, pale pink, neon yellow, mid teal, pale blue, deep khaki) appear deeper in the experience, and a wider UI palette of tints and status colours is for the digital product only. Live site tokens (2026-10-29): --color-brand #ff4f40, --color-navy-800 #112231, --color-navy-900 #091723, --color-grey-100 #f2f8f3.

Why it works: A single hot colour on two calm neutrals gives instant recognition at the front door, then the secondary palette rewards people as they go deeper.

|  |  |
|---|---|
| Hot coral | #FF4F40 / R255 G79 B64 / C0 M83 Y74 K0 / PMS 805 (Neon) or 2346 |
| Soft white | #F2F8F3 / R242 G248 B243 / C3 M0 Y3 K0 / PMS N/A |
| Deep navy | #112231 / R17 G34 B49 / C100 M63 Y16 K78 / PMS 2965 |
| Mid orange | #FE6B1B / PMS 2018 |
| Pale pink | #FFD7F0 / PMS 516 |
| Neon yellow | #C3FF34 / PMS 809 (Neon) or 396 |
| Mid teal | #016B83 / PMS 7708 |
| Pale blue | #BBF6E2 / PMS 628 |
| Deep khaki | #3A4920 / PMS 5747 |
| Action blue (UI) | #218FB7 |
| Contrast | primary pairings AA at 18pt and above |

- Show hot coral in all brand communications; it need not dominate (p.17).
- Three moods: all-out hot coral, light and breezy with a touch of coral, dark and slick with a punch of coral (p.18).
- Adverts may go all-out coral; websites need more deep navy for readability (p.18).
- Key pairings: hot coral + soft white, deep navy + soft white, AA at 18pt and above, in either proportion (p.19).
- First impression in the primary palette only; secondary sparingly early, more liberally deeper in (pp.21-23).
- Check the combinations chart (p.24): NA pairs only for marketing outside product or with alt text.
- UI palette is for the digital product only (p.25).
- Dark mode alters the primary button for contrast (p.26).
- Neon Pantones whenever possible in print (pp.15, 20).
- Don't use multiple colours in typography
- Don't make the logo a different colour from the type
- Don't use colours outside the palette
- Don't use colours that are hard to read on photography

Not published: colour proportions as percentages; a muted text colour role; dark-mode token mapping beyond the screenshots.

Do and don't:
- Do: "Banking made easy". Hot coral with soft white type: a primary pairing, AA at 18pt and above (p.19).
- Don't: "Banking made easy". More than one colour inside the type, or a logo colour different from the type (p.29).
- Do: "Different accounts for different needs". Websites lean on deep navy with a punch of coral (p.18).
- Don't: "Spend, save and manage money". Colours outside the palette, or a secondary colour as the first impression (pp.21, 29).

Real examples, to look at on Monzo's own pages (not for reuse):
- Primary palette: Monzo style guide (Aug 2022, press kit) p.16
- Three moods: all-out coral, light and breezy, dark and slick: Monzo style guide (Aug 2022, press kit) p.18
- Secondary palette: Monzo style guide (Aug 2022, press kit) p.20
- Primary for first impression, secondary deeper in: Monzo style guide (Aug 2022, press kit) p.21
- Combination chart with AA/AAA/NA: Monzo style guide (Aug 2022, press kit) p.24
- UI palette: Monzo style guide (Aug 2022, press kit) p.25
- Colour don'ts: Monzo style guide (Aug 2022, press kit) p.29

Sources: https://downloads.ctfassets.net/ro61k101ee59/2zfabTQILrAL4IDPKjJQCm/ca5ed206d818d2cc45652043f1e984ce/Monzo-Press-Kit-2026.zip, https://monzo.com/

## Typography: rules

Two faces. Oldschool Grotesk Compact Extra Bold is the hero face, "a warm analogue buzz for a cold digital world", for big, short, staggered headlines. Monzo Sans is the functional face in four weights for everything else: lead copy, sub-headers, body, UI and data. The system flexes from expressive (Oldschool-led) to functional (Monzo Sans only). Live site (2026-10-29) titles in MonzoSansDisplay and body in MonzoSansText; Oldschool survives only in some plan and comparison headers, so the 2022 hero-face rule is older than the site.

Why it works: A soft, puffy grotesk carries the warmth in headlines, and a clean house sans keeps money information legible, so expression never costs clarity.

|  |  |
|---|---|
| Homepage build: stand-in per role (observed 2026-10-29) | Real face weight -> stand-in weight, size/line height in px, tracking. Use these, not the guide rows further down |
| Hero h1 | real MonzoSansDisplay 800 -> Raleway 900, 48.83px/58.59px desktop, 40.67px/48.80px phone, letter-spacing 0 |
| Section h2 | real MonzoSansDisplay 800 -> Raleway 900, 39.06px/46.87px desktop, 33.73px/40.48px phone, letter-spacing 0 |
| Regulatory h2 | real MonzoSansDisplay 800 -> Raleway 900, 44px/52.8px desktop, 32px/38.4px phone, letter-spacing 0 |
| Step numeral | real MonzoSansDisplay 800 -> Raleway 900, 61.04px/73.25px, desktop only, letter-spacing 0 |
| Slide title | real MonzoSansDisplay 700 -> Raleway 750, 31.25px/37.5px desktop, 27.99px/33.59px phone, letter-spacing -0.02em (-0.63px / -0.56px) |
| Carousel card title (product, travel, savings cards; step titles) | real MonzoSansDisplay 700 -> Raleway 750, 25px/35px desktop, 23.23px/29.23px phone, letter-spacing -0.5px (-0.46px phone) |
| Account card title and footer column heading | real MonzoSansDisplay 700 -> Raleway 750, 25px/30px desktop, 23.23px/27.87px phone, letter-spacing -0.5px (-0.46px phone) |
| Spotlight item title (desktop) | real MonzoSansDisplay 600 -> Raleway 675, 20px/28px, letter-spacing -0.4px. Ranking card h3: same face, 16px/19.2px (14px/16.8px phone), letter-spacing -0.32px |
| Lead/intro | real MonzoSansText 400 -> Onest 350, 20px/28px desktop, 19.28px/26.99px phone, letter-spacing 0 |
| Body, card text, legal | real MonzoSansText 400 -> Onest 350, 16px/22.4px (legal 12.8px/17.92px), letter-spacing 0 |
| Emphasis (buttons, nav labels, feature-tile text, footer links, price pills, tags, spotlight titles on phones) | real MonzoSansText 600 -> Onest 550, 16px/22.4px, letter-spacing 0.16px |
| 1 Signposting (guide, 2022; not the homepage) | Monzo Sans Bold; letter spacing -1% (Adobe -15); line height 1.3x; sentence case |
| 2 Headline (guide, 2022; not the homepage) | Oldschool Grotesk Compact Extra Bold; letter spacing -1% (Adobe -5); line height 0.9x; sentence case |
| 3 Secondary headline (guide, 2022; not the homepage) | Oldschool Grotesk Compact Extra Bold; letter spacing 0% (Adobe -5); line height 0.9x; sentence case |
| 4 Lead copy (guide, 2022; not the homepage) | Monzo Sans Medium; letter spacing -2% (Adobe -20); line height 1.2x; sentence case |
| 5 Sub-header (guide, 2022; not the homepage) | Monzo Sans Semibold; letter spacing 1% (Adobe -10); line height 1.3x; sentence case |
| 6 Body (guide, 2022; not the homepage) | Monzo Sans Regular; letter spacing 2% (Adobe -10); line height 1.3x; sentence case |
| Live site faces | MonzoSansDisplay (titles), MonzoSansText (body), observed 2026-10-29; letter-spacing normal everywhere |

_The guide publishes ratios and tracking, not point or pixel sizes._

- Lead with Oldschool Grotesk for larger type; Monzo Sans for focused information (p.38).
- Headlines bold, big, short; stagger lines for rhythm (p.34).
- Monzo Sans is always sentence case (p.36).
- Bold sparingly for key call-outs; Semi-bold for small headings where Oldschool is not right; Medium for lead copy; Regular for body and fine product detail (p.36).
- UI, graphs and infographics use Monzo Sans only, with hierarchy from scale and weight (p.37).
- Don't use the hero typeface in signposting, UI elements, body copy or infographics
- Don't use the functional typeface in headlines
- Don't set Monzo Sans in all caps
- Don't set type in multiple colour combinations
- Don't set type too tightly

Not published: type sizes in px or pt; web font files or licences; Figma and Adobe tracking values that agree (they are printed side by side and differ).

Do and don't:
- Do: "Banking made easy". Hero face, short phrase, staggered lines (p.34).
- Don't: "MONZO PREMIUM". Monzo Sans in all caps (p.40).
- Do: "Sub-headers are short and sharp.". Monzo Sans Semibold for small headings when Oldschool is not right (p.36).
- Don't: "Trip to Tokyo". The hero face inside UI elements (p.40).

Real examples, to look at on Monzo's own pages (not for reuse):
- Hero typeface: Oldschool Grotesk: Monzo style guide (Aug 2022, press kit) p.33
- "Banking made easy": short phrase, staggered rhythm: Monzo style guide (Aug 2022, press kit) p.34
- Monzo Sans weights and uses: Monzo style guide (Aug 2022, press kit) p.36
- Hierarchy with tracking and line heights: Monzo style guide (Aug 2022, press kit) p.38
- Tonal flex: expressive to functional: Monzo style guide (Aug 2022, press kit) p.39
- Typography don'ts: Monzo style guide (Aug 2022, press kit) p.40

Sources: https://downloads.ctfassets.net/ro61k101ee59/2zfabTQILrAL4IDPKjJQCm/ca5ed206d818d2cc45652043f1e984ce/Monzo-Press-Kit-2026.zip, https://monzo.com/

## Graphic elements: rules

Product visualisation is the guide's graphic system. Devices are flat app screens with a thin white keyline and a soft drop shadow; the card is flat with the "Monzo midday shadow". Features are shown at three abstraction levels: no abstraction (the real screen), focused information (UI pulled into a rounded panel on a secondary colour) and exaggerated story (big pills and cards: "Savings locked", "Split the bill", "Budget £250").

Why it works: Implied physicality through shadows means visuals never date with a phone model, and the app itself becomes the illustration.

|  |  |
|---|---|
| Device construction | thin white keyline over the product screen, shadow beneath |
| Shadow opacity | 15% / 20% / 25% / 35% black (multiplied), lighter grounds to darker |
| Abstraction levels | no abstraction; focused information; exaggerated story |
| Panels | rounded, secondary palette colour |

- Show devices with a thin white keyline and a shadow beneath; no real device needed (p.59).
- Adjust shadow opacity to the ground: 15% black multiplied on the lightest, 20%, 25%, then 35% on deep navy (p.60).
- Card renders are elevated and elegant with a midday shadow (p.62).
- No abstraction for functional comms that need the full picture (p.64).
- Focused information: rounded panel in a secondary colour (p.66).
- Exaggerated story: scaled-up UI elements for impact (p.67).
- Don't use incorrect shadow opacity or distance
- Don't use opposing shadows on visuals
- Don't put shadows on focused information or exaggerated story elements
- Don't use the hero typeface on exaggerated story elements

Not published: shadow offset, blur and direction values; corner radius of panels, devices and pills.

Do and don't:
- Do: "Split the bill". A focused UI sound bite on a secondary-colour panel, no shadow (p.66).
- Don't: "Split the bill". Shadows on exaggerated story elements (p.70).

Real examples, to look at on Monzo's own pages (not for reuse):
- Device and card with keyline and shadow: Monzo style guide (Aug 2022, press kit) p.59
- Shadow opacity by ground colour: Monzo style guide (Aug 2022, press kit) p.60
- Three abstraction levels: Monzo style guide (Aug 2022, press kit) p.63
- Focused information panels: Monzo style guide (Aug 2022, press kit) p.66
- Exaggerated story elements: Monzo style guide (Aug 2022, press kit) p.67
- Product visualisation don'ts: Monzo style guide (Aug 2022, press kit) p.70

Sources: https://downloads.ctfassets.net/ro61k101ee59/2zfabTQILrAL4IDPKjJQCm/ca5ed206d818d2cc45652043f1e984ce/Monzo-Press-Kit-2026.zip

## Iconography: rules

Not specified in the guide. Iconography appears only as a brand-code tile (p.80): bold glyphs in rounded squares in secondary colours on navy. The UI screens (pp.27-28) show category icons as white glyphs on coloured circles.

Why it works: Our reading: icons borrow the secondary palette so they read as product, not decoration.

|  |  |
|---|---|
| Grid | not published |
| Stroke | not published |
| Sizes | not published |

- Use the secondary/UI palette for icon tiles, as shown on the brand-codes page (observed, not a published rule).

Not published: icon grid, stroke, sizes, library or rules.

Real examples, to look at on Monzo's own pages (not for reuse):
- Brand codes, including the iconography tile: Monzo style guide (Aug 2022, press kit) p.80
- Category icons in the light-mode app: Monzo style guide (Aug 2022, press kit) p.27

Sources: https://downloads.ctfassets.net/ro61k101ee59/2zfabTQILrAL4IDPKjJQCm/ca5ed206d818d2cc45652043f1e984ce/Monzo-Press-Kit-2026.zip

## Illustration: rules

Not specified in the guide. One illustration is shown (pp.74, 80): a pink, orange and yellow ribbon-and-scissors drawing on an orange card for "Split the bill", listed as a brand code.

Why it works: Our reading: illustration is a rare expressive accent for feature stories, drawn in the secondary palette.

|  |  |
|---|---|
| Style rules | not published |

- If used, draw from the secondary palette and keep it to one idea (observed from the single example).

Not published: illustration style, line weight, palette rules or usage.

Real examples, to look at on Monzo's own pages (not for reuse):
- "Split the bill" carousel illustration: Monzo style guide (Aug 2022, press kit) p.74
- Illustrations brand-code tile: Monzo style guide (Aug 2022, press kit) p.80

Sources: https://downloads.ctfassets.net/ro61k101ee59/2zfabTQILrAL4IDPKjJQCm/ca5ed206d818d2cc45652043f1e984ce/Monzo-Press-Kit-2026.zip

## Photography: rules

"Our world is always sunny and bright." Two kinds: lifestyle (diverse, characterful, real people in warm sunlight with flares and dramatic shadows) and product (the card and app in context, in warm dappled sunlight, with hot coral in frame where possible). A five-step "Monzo magic" treatment brightens any photo. The 2026 press-kit photos keep the warm, hard-shadowed, hands-and-product look.

Why it works: Sunlight is the photographic version of hot coral: warmth makes a bank feel human, and the product always lives in a real moment.

|  |  |
|---|---|
| Light | warm, sunny, flares, dramatic shadows |
| Gaussian blur | 17 px, Lighten Colour, 50% opacity |
| Motion blur | 90 degrees, 180 distance, Linear Dodge, 15% opacity |
| Devices | model and make non-specific |

- Lifestyle principles: big on character, big on life, big on colour (p.47).
- Cast people from diverse backgrounds, representative of everyday life; authentic, relatable, aspirational (p.46).
- Product principles: in context (no floating phones), timeless (non-specific device models), warm (sunlight; hot coral in the composition where possible) (p.55).
- Monzo magic: 1 start with a people photo; 2 duplicate, Gaussian Blur 17, mask key areas, Lighten Colour blend at 50%; 3 merge a third layer, motion blur 90 deg / 180 distance, Linear Dodge at 15%; 4 Vibrance and Hue/Saturation as required; 5 lens flare matched to the light, scaled to crop (pp.48-52).
- Don't use overly staged photography
- Don't use cold photography
- Don't use photos that don't connect to the message
- Don't over-saturate or overdo lens flares
- Don't use pixellated images
- Don't set type over busy photography
- Don't use generic stock

Not published: crop ratios, colour grading values beyond the five steps.

Real examples, to look at on Monzo's own pages (not for reuse):
- "Brighter imagery" opener: Monzo style guide (Aug 2022, press kit) p.43
- Lifestyle benchmark set: Monzo style guide (Aug 2022, press kit) p.46
- Monzo magic, step 1: Monzo style guide (Aug 2022, press kit) p.48
- Product photography benchmark set: Monzo style guide (Aug 2022, press kit) p.54
- Art direction don'ts: Monzo style guide (Aug 2022, press kit) p.56
- Press kit 2026: card and phone on a warm table: Monzo Press Kit 2026 (press kit zip, Images/Product Photos)
- Press kit 2026: hot coral card in a back pocket: Monzo Press Kit 2026 (press kit zip, Images/Product Photos)
- Press kit 2026: card held up on a sunny street: Monzo Press Kit 2026 (press kit zip, Images/Product Photos)
- Press kit 2026: tapping in at a ticket barrier: Monzo Press Kit 2026 (press kit zip, Images/Product Photos)
- Press kit 2026: shared table, Joint card and phone: Monzo Press Kit 2026 (press kit zip, Images/Product Photos)

Sources: https://downloads.ctfassets.net/ro61k101ee59/2zfabTQILrAL4IDPKjJQCm/ca5ed206d818d2cc45652043f1e984ce/Monzo-Press-Kit-2026.zip

## Motion: rules

Not published. The guide has no motion section and gives no easing, duration or animation rules.

Why it works: Our reading: none to report until motion is measured on the live site.

|  |  |
|---|---|
| Easing | not published |
| Duration | not published |

Not published: all motion values.

Sources: https://downloads.ctfassets.net/ro61k101ee59/2zfabTQILrAL4IDPKjJQCm/ca5ed206d818d2cc45652043f1e984ce/Monzo-Press-Kit-2026.zip

## Interface and layout: rules

The guide shows layout through examples rather than grids: big staggered headlines, rounded panels, the wordmark in a corner or centred, and websites that open in the primary palette (the 2022 guide shows a coral nav and deep navy hero; the live homepage, 2026-10-29, instead has a 70% white nav and a photo/video hero, so a homepage build follows the page anatomy) and get more colourful deeper in. Live site tokens (2026-10-29): --color-brand #ff4f40, --color-navy-900 #091723, --color-navy-800 #112231, --color-grey-100 #f2f8f3. Page anatomy comes from the next step.

Why it works: Layout is built to make the first screen unmistakably Monzo, then let product and colour unfold as people scroll.

|  |  |
|---|---|
| Grid | not published |
| Margins | not published |
| Corner radius | not published |

- Website first impression in core colours; more colours further in (pp.22-23).
- Wordmark in a corner or centred (p.9).
- Stagger headlines in a considered rhythm (p.34).
- Rounded panels for focused UI (p.66).
- Don't set type over busy photography (p.56).
- Don't open a page in the secondary palette
- Don't crowd the wordmark (z and m clear space)

Not published: grid, columns, margins, spacing scale, breakpoints, corner radii.

Real examples, to look at on Monzo's own pages (not for reuse):
- Website first impression: core colours: Monzo style guide (Aug 2022, press kit) p.22
- Website deeper in: more colours: Monzo style guide (Aug 2022, press kit) p.23
- Website hero in use: Monzo style guide (Aug 2022, press kit) p.75
- Website product band and coral footer: Monzo style guide (Aug 2022, press kit) p.78

Sources: https://downloads.ctfassets.net/ro61k101ee59/2zfabTQILrAL4IDPKjJQCm/ca5ed206d818d2cc45652043f1e984ce/Monzo-Press-Kit-2026.zip, https://monzo.com/

## Rules: rules

Each section ends with a "Things to avoid" page (logo p.12, colour p.29, type p.40, art direction p.56, product visualisation p.70). Together with the Writing Principles they are the hard rules.

Why it works: Guardrails, stated as pictures of mistakes, are easier to apply than abstract principles.

|  |  |
|---|---|
| Logo don'ts | p.12 |
| Colour don'ts | p.29 |
| Type don'ts | p.40 |
| Art direction don'ts | p.56 |
| Product visualisation don'ts | p.70 |

- Hot coral somewhere in every piece; primary palette first.
- Wordmark: three colourways only, z/m clear space, 20px / 3mm minimum.
- Hero face only for big headlines; Monzo Sans for everything functional, sentence case.
- Warm, sunny, real photography; product in context.
- Flat devices with one consistent shadow; no shadows on sound bites.
- Kindness always; wit dialled to the channel.
- Don't recolour, transform or add effects to the logo
- Don't use colours outside the palette
- Don't use multiple colours in one block of type
- Don't set the hero face in UI, body, signposting or charts
- Don't use Monzo Sans in all caps or in headlines
- Don't use cold, staged or generic stock photography
- Don't use opposing or incorrect shadows
- Don't use literal magic language or punch down

Real examples, to look at on Monzo's own pages (not for reuse):
- Logo don'ts: Monzo style guide (Aug 2022, press kit) p.12
- Colour don'ts: Monzo style guide (Aug 2022, press kit) p.29
- Typography don'ts: Monzo style guide (Aug 2022, press kit) p.40
- Art direction don'ts: Monzo style guide (Aug 2022, press kit) p.56
- Product visualisation don'ts: Monzo style guide (Aug 2022, press kit) p.70

Sources: https://downloads.ctfassets.net/ro61k101ee59/2zfabTQILrAL4IDPKjJQCm/ca5ed206d818d2cc45652043f1e984ce/Monzo-Press-Kit-2026.zip, https://monzo.com/tone-of-voice

## Applications

| Format | What | Source |
|---|---|---|
| website (desktop) | Coral nav bar with wordmark, deep navy hero with "Different accounts for different needs", product photo with UI sound bites, teal pill CTA | Monzo style guide (Aug 2022, press kit) p.75 |
| website (product band + footer) | Pale pink panel with flat app screen and card, coral headline; coral footer with soft white wordmark | Monzo style guide (Aug 2022, press kit) p.78 |
| paid social | Facebook ad: coral panel, "Over 6 million people bank with Monzo" in the hero face, app screen and wordmark | Monzo style guide (Aug 2022, press kit) p.17 |
| paid social (carousel) | "Split the bill" carousel card with illustration on orange | Monzo style guide (Aug 2022, press kit) p.74 |
| app store screenshots | Four panels in coral, navy, neon yellow and pink: "Sharing, simple", "Money, managed", "Spending, sorted" | Monzo style guide (Aug 2022, press kit) p.79 |
| email (operational) | Final account closure email: soft white, small coral wordmark, plain Monzo Sans | Monzo style guide (Aug 2022, press kit) p.18 |
| poster / cover | "Banking made easy" in soft white on hot coral with a hand holding the card | Monzo style guide (Aug 2022, press kit) p.72 |
| card render | Hot coral card on pale pink, elevated with the midday shadow | Monzo style guide (Aug 2022, press kit) p.62 |
| performance marketing | M icon as the ad avatar | Monzo style guide (Aug 2022, press kit) p.11 |

## By format

How our engine applies Monzo's system to each format. This is our recipe built from the guide's three colour moods (p.18) and the Writing Principles channel dial, not a Monzo rule. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 3 | Follow the live homepage anatomy: translucent white nav with the coral wordmark, a rounded photo/video hero with a white staggered headline and white pill CTA, product visuals, pill CTAs; secondary colours only in lower bands. (The 2022 guide's 'hot coral nav, deep navy or soft white hero' is older than the site.) | which secondary colour panels carry the feature bands; lifestyle vs product photo in the hero |
| Deck | 2 | Soft white or deep navy slides, one hot coral moment per slide, Oldschool-style headlines short and staggered, Monzo Sans for everything else | section openers may go all-out hot coral or pale blue, as the guide's own dividers do |
| Paid social | 4 | All-out hot coral or coral panel, hero-face headline, app screen or card, wordmark | secondary panel colour; magic and wit high |
| Organic social | 5 | Primary palette visible, warm sunny photography or exaggerated UI elements | secondary palette used freely; wit maxed out |
| App store screenshots | 4 | One feature per panel, short two-word headline, flat device with shadow | panel colour from primary or secondary palette |
| Operational email | 1 | Soft white ground, small coral wordmark, Monzo Sans only, maximum clarity | none; no wit |
| Print / OOH | 5 | Hot coral ground, soft white hero-face headline, card in hand, neon Pantone where possible | crop of the photo, headline stagger |

## Checks before anything ships

- **Logo hidden**: Cover the wordmark. It should still read as Monzo: hot coral somewhere, a puffy extra-bold headline, warm sunlight, a flat app screen or the coral card.
- **First impression**: Is the first screen or panel only hot coral, soft white and deep navy? Secondary colours belong further in.
- **Hero face audit**: Is the hero face only in big headlines, and never in UI, body, signposting, charts or exaggerated UI elements?
- **Sentence case**: Every headline and line of Monzo Sans in sentence case; nothing in all caps.
- **Read it aloud**: Does it sound like something you would say face to face, impact before reasoning, and at most one joke?
- **Current facts**: No 2022 figures (6 million) where the press page now says 16 million.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Monzo's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- Motion: no easing, duration or animation rules (not published).
- Iconography: no grid, stroke, sizes or library (not published); shown only as a brand-code tile.
- Illustration: no style rules (not published); one example only.
- Layout: no grid, columns, margins, spacing scale or breakpoints (not published).
- Type sizes in px or pt (not published); only ratios and tracking.
- Corner radii for panels, cards, buttons and pills (not published).
- Shadow offset, blur and direction (not published); only opacities.
- Colour proportions as percentages (not published; our proportion is inferred).
- A muted or secondary text colour role (not published).
- Button component spec (radius, padding, sizes, focus state) beyond the p.26 screenshots (not published).
- Clear space and minimum size for the M icon (not published).
- Font licensing or files for Oldschool Grotesk and Monzo Sans (not published; both proprietary).
- Campaigns: none verified from a fetched page, so none are listed.
- Staleness: the guide is an Aug 2022 "External Beta". The live site (2026-10-29) titles in MonzoSansDisplay/MonzoSansText rather than Oldschool Grotesk, uses a darker navy-900 #091723 not in the guide, and the guide's "6 million" customer samples are superseded by 16 million on the press page.
- Section numbering jumps from 6 to 10 in the guide (sections 7-9 absent from the External Beta).
- Voice: the 2022 style guide has no voice section; voice comes from the separate Writing Principles page.
- Header backdrop-filter (blur) not checked; only the 70% white fill measured
- Feature-tile tag pill and 'Published' tag fill alpha/radius not measured
- Carousel dot sizes not measured
- Media radius on video slots: container clips at 32px visually, computed radius on the video element is 0
- Tablet widths (768, 1024) not measured; only 390 and 1440
- Phone hamburger menu contents not captured (click timed out)
- Guide (tone-of-voice) voice rules not reconciled here; homepage voice is plain product copy: short benefit headlines, 'Open a free Monzo account' as the single repeated CTA
- Phone menu icon, play icon and nav chevron stroke/size not measured (hit areas only)

Logos and reference images belong to Monzo. Look at them on Monzo's own pages; don't reuse them.