Monzo DESIGN.md

Design System Inspiration of Monzo

Overview

Visual Theme & Atmosphere

Monzo is a smartphone bank founded in early 2015, with its headquarters in London. Its current About page reports more than 16 million personal and business customers, sets a mission to make money work for everyone, and describes a bank built around solving customers’ problems, fairness and transparency. Company · Press

Hot Coral remains the recognisable signature. Monzo’s October 2022 refresh with Ragged Edge put it alongside deep navy, soft white and a broader secondary palette. That announcement connects the identity to warmth, empathy and optimism; it also introduced more expressive illustration and warmer photography. 2022 brand refresh

The current website adds another layer. Monzo’s May 2026 design article describes a new modular web system, semantic tokens and reusable content blocks. The bank card’s silhouette informs those blocks, with rounded corners, bold typography and app demonstrations. Hot Coral is deliberately used for moments of personality because red can also suggest an error. 2026 website system

The captured homepage combines a white header, a large rounded photographic hero, dark and pale surfaces, a coral wordmark and product-card illustrations. Its headline places everyday life ahead of financial administration. Two button implementations coexist: the header and hero use 500px radii; the modular content buttons use 128px radii. Both remain visually pill-shaped. This is a useful reference for a friendly banking website with clear action hierarchy and tangible product imagery.

Primary tasks

• Open a free account or compare personal, joint, children’s and business accounts.
• Explore saving, credit, investments and pensions.
• Learn about organising money with Pots and Salary Sorter, receiving instant spending notifications and protecting an account.

These are public-site tasks and product descriptions, observed on the homepage and current-account page.

Brand Narrative

Monzo’s press page dates its founding to early 2015 and says it became a regulated bank in August 2016. It describes a bank built for smartphones, with a London headquarters. Those are the documented milestones used here. Press

The coral card continues as a recurring identity asset: it anchors the 2022 visual refresh and, in the 2026 website system, becomes a shape for communicating product features. The current page brings that asset into rounded modular content, practical demonstrations and scenes of everyday life. Brand refresh · Website evolution

Principles

• Solve customers’ problems fairly and transparently. The company’s own description of how it wants to improve banking. About
• Build reusable, coherent web content. The 2026 system connects design, engineering and content through shared tokens and modular blocks. Website system
• Keep product writing short, active and consistent. These are the three principles in Monzo’s public writing-system announcement. Writing system

Personas

No researched personas were verified; the homepage explicitly presents personal, joint, under-16s and business account audiences.

Colors

The survey found 26 computed root properties and 400 distinct declared custom-property names. The palette below is declared in Monzo’s .monzo-com-design-system; the semantic aliases establish roles. A declaration is evidence of a token, not proof that every colour is visible on this page. Midnight and mint are descriptive aliases retained from the reference; the CSS primitive names are listed alongside.

Most sampled paragraphs use rgba(9, 23, 35, 0.6): 52 paragraphs, compared with 10 white and 6 opaque Midnight paragraphs. Keep that alpha rather than flattening it into a solid grey. Separators and secondary hover fills use navy at 10%; secondary pressed fills use 20%. These alpha roles are separate from the solid palette.

The rendered background census is led by white ×25, mint ×21 and Midnight ×12. These are element counts, not screen-area percentages. The evidence does not establish a fixed accent-to-neutral ratio or a universal prohibition on coral surfaces.

Typography

Evidence classes

• Official use documentation: the 2022 brand announcement identifies Oldschool Grotesk as its hero face and Monzo Sans as the functional face, a custom cut of Universal Sans chosen for readability, generous dots and curled ends. This documents the brand at that date. It does not identify the current private banking app’s font files. Official announcement
• Live-loaded on monzo.com: MonzoSansDisplay at 600, 700 and 800 normal; MonzoSansText at 400, 600 and 700 normal. The regular Text face is reported as normal normal by document.fonts. The census declares body and buttons as MonzoSansText, and H1 as MonzoSansDisplay.
• Official distributed assets: no distributable font package or licence was opened. The page’s @font-face rules point to relative WOFF2 files named MonzoSansDisplay-ExtraBold.woff2, -Bold.woff2, -SemiBold.woff2, and the equivalent Text regular, semibold and bold files. These declarations corroborate the loaded faces; the files were not downloaded and no redistribution licence was established.
• Declared-only: CSS also names Oldschool 800, served from OldschoolGroteskCompact-ExtraBold.woff2, and Maison Neue Web / Maison Neue Mono Web. They are absent from the loaded list. Display regular/medium, Text medium and all the listed italic faces also lack loaded status in this capture. No specimen is supplied for an unloaded face.
• Unresolved: an exclusive commission for both live families, universal headline weights, and current in-app font mapping. Substitute: none chosen.

Measured interface metrics

All six outer elements measured letter-spacing: normal. Do not apply the legacy reference’s global negative tracking to them.

The root retains a fluid type scale: --text-billboard is clamp(2.986rem,2.6276rem + 1.7918vw,3.8147rem); heading 1 is clamp(2.4883rem,2.2447rem + 1.2182vw,3.0518rem); heading 2 is clamp(2.0736rem,1.9145rem + 0.7953vw,2.4414rem); heading 4 is clamp(1.44rem,1.387rem + 0.2649vw,1.5625rem). These are captured CSS expressions, not a second viewport measurement. The default line-height token is 1.4; the newer system also declares 1.2 for large headings.

Layout

The desktop viewport is 1440×1000. The survey’s sticky header is 87px high. The hero image starts below it and has large rounded corners, white text and an inverse CTA. The captured page then uses horizontal product carousels, app demonstrations, account cards, travel and savings content, a security feature area and footer navigation. This arrangement matches the reusable-block approach described in the website-system article.

Monzo declares a spacing scale of 2, 4, 8, 12, 16, 24, 32, 48, 64, 80, 96 and 128px. For concrete controls, keep the measured 12px 24px header/hero padding, 0px 24px modular-action padding, 0px 16px small-action padding and 8px 12px navigation padding. These do not establish one universal card-padding or section-gap value.

The declared corner scale is 4, 8, 12, 16, 24, 32, 48 and 64px. Measured link/button wrappers additionally use 0, 100, 128 and 500px. Choose the treatment for the specific component rather than assigning 500px to all interactive elements. In the survey, other interactive step/security buttons use 16px and carousel markers use 0px.

Responsive Behavior

Only the 1440×1000 desktop surface was measured. The captured root type expressions are fluid; Monzo’s 2026 article says its system is responsive and tested across content densities, locales and scripts. Specific mobile breakpoints, stacking rules and touch layouts remain unverified. Official system description

Elevation & Depth

The measured link wrappers have box-shadow: none. Surface contrast provides much of their separation, but the system also has an explicit elevation scale.

CSS also declares subscription gradients in light, dark and Hot Coral variants; their application was not state-probed.

The Personal account card illustration actually computes filter: drop-shadow(rgba(0, 0, 0, 0.16) 0px 2px 8px). This supports selective depth on product imagery. A claim that the search bar is the system’s sole shadow usage is not supported.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.none: none
• shadow.level1: 0px 2px 8px rgba(0,0,0,.16)
• shadow.level2: 0px 4px 16px rgba(0,0,0,.16)
• shadow.level3: 0px 8px 32px rgba(0,0,0,.16)
• shadow.level4: 0px 16px 48px rgba(0,0,0,.24)
• shadow.level5: 0px 32px 64px rgba(0,0,0,.24)

Motion & Easing

The modular primary and small secondary link both compute background-color 0.3s cubic-bezier(0, 0, 1, 1) 0s. Their hover transition is 300ms; the pointer-down capture reports a longest transition of 0ms. The hero action computes background-color 0.2s ease 0s, while the Business and card link wrappers compute all 0s ease 0s. Descendants can still animate: the card graphic changes from none to matrix(0.984808, -0.173648, 0.173648, 0.984808, -2.66421, -3.59193) on hover and press.

The stylesheet separately declares instant 0ms, short 100ms, medium 200ms, long 300ms, extra-long 400ms and super-long 600ms durations. It also includes spring parameters, so a brand-wide prohibition on springs is not supported. No app-sheet, transaction-row or reduced-motion behaviour was measured. The website article describes attention-guiding animations; it does not specify these timings. Official design writing

---

Measured 2026-11-02 on the public UK-English homepage, logged out, at 1440×1000. Computed styles and loaded fonts came from the survey and state captures. Company and brand context came from the linked first-party pages; verification.md records raw samples, scope and prior-reference dispositions.

Components

The six controls below were measured after rejecting consent, using real hover, mouse-down and Tab focus. All are links. No search input was present in the survey.

The card’s inner height change reproduced in both state passes and reversed after blur. Preserve it as an observation, not a general card-sizing rule. The wrapper itself remains 281px high. Its graphic has a measured drop-shadow filter; the six link wrappers themselves have no box shadow.

States

For dark actions, preserve the measured rest → hover → pressed sequence: #091723 → #2c3a43 → #112231. For the inverse hero action, white becomes 80% on hover and 90% on press. The outlined secondary link adds navy 10% and 20% fills. Navigation instead strengthens the label/icon from 60% navy to opaque Midnight.

Keyboard focus is authored, not a browser auto ring: header/hero actions use a 1px solid #218fb7 outline, modular/secondary/card links use 2px solid #009ace, and the Business link uses 2px solid #00a4db; all have 2px offsets. Every captured focus change disappears after blur. The card additionally changes its wrapper radius and inner layout as recorded in §4.

No empty, loading, validation-error, payment-success or disabled-state component was exercised. The stylesheet declares negative, positive, loading and disabled semantic values, but these alone do not establish complete rendered state designs.

Do's and Don'ts

• Keep Hot Coral as a recognisable brand signal, and use the measured dark and inverse treatments for these CTAs.
• Use the loaded Monzo Sans families, clear visible semibold labels and the specific control geometry recorded above.
• Preserve opaque Midnight for strong content and alpha navy for quieter paragraphs and navigation.
• Distinguish the header/hero implementation from modular content components, especially their radii and focus outlines.
• Do not impose a fixed neutral-to-accent percentage, a universal 500px radius, global negative tracking or a blanket ban on secondary colours and elevation.
• Do not turn a declared field-error colour into an invented error component or an unloaded font declaration into a specimen.

These implementation recommendations follow the measured controls and declared tokens, rather than adding brand rules.

Voice & Tone

Monzo’s published writing principles are Straightforward kindness, Everyday magic and Warm wit. They put the reader’s needs first, use inclusive everyday language, explain jargon and generally favour active voice. When Monzo has made a mistake, the guide asks for one sincere apology followed by the remedy. It allows rare deliberate exceptions to active voice, rather than imposing an absolute ban. Writing principles

Operational and service communication prioritises clarity and kindness, with no warm wit. Marketing permits more playfulness; campaigns and social channels give humour more room. The guide rejects jokes at others’ expense and literal magic clichés. Its 2025 public writing-system announcement adds three product-writing rules: keep it short, use active voice and be consistent. Writing system

Live wording illustrates the range: the homepage headline is “Spend your money on life, not your life on money”; the current-account page retains “Current accounts that keep up”. Action labels remain direct: “Sign up” and “Learn more”.

Agent Prompt Guide

Use these measured examples when building in the website’s style:

• “Create a 48px account-opening link with a 128px radius, 0px 24px padding, Midnight #091723 fill and a white 16px/600 MonzoSansText label. Its outer element is 16px/400. Hover changes the fill to #2c3a43; pressing changes it to #112231; keyboard focus adds a 2px solid #009ace outline with 2px offset.”
• “Create a small outlined Learn more link on white: 36px high, 128px radius, 0px 16px padding, 2px Midnight border and 12.8px/600 MonzoSansText lettering. Use navy at 10% alpha on hover and 20% on press.”
• “For the photographic hero, use the measured white account-opening link: 48.4px high, 500px radius, 12px 24px padding and Midnight lettering. Its hover and pressed fills are white at 80% and 90% alpha.”

Keep each example attached to its measured surface. A current private banking-app screen was not inspected.