Monzo Design System

Overview

Monzo's marketing canvas is two structural surfaces — white #ffffff and deep navy #091723 — alternating in full-bleed bands, with Hot Coral #ff4f40 reserved for the object the bank sells. The hero opens on white with "Monzo for all your money" sitting in MonzoSansDisplay at 39px / weight 800; below it the link list ("Bank accounts", "Savings and ISAs", "Investments") renders in Hot Coral as inline link text rather than buttons. The payday band ("Make payday twice as nice") slams in at #091723 with a #112231 card inset, the same load-bearing dark-on-dark step the spec captures in {colors.surface-payday} over {colors.canvas-dark}. Every primary CTA across both modes is a navy pill #091723 with white text at radius 500px — Hot Coral never fills a button.

Hot Coral as object color: Monzo treats {colors.primary} (#ff4f40) the way Airbnb treats Rausch — as a material, not a CTA. The card mockup in the hero is Hot Coral. The illustrated phone tiles in the "Manage your money today" grid are Hot Coral. The Monzo "M" mark is Hot Coral. The button is navy. Where most fintech brands paint the click, Monzo paints the thing the click buys.

Display type is MonzoSansDisplay at the single weight 800 across every heading tier from 16px section eyebrow up to a 61px hero with lineHeight: 1.0. There is no thin display alternative. Body type is MonzoSansText at weight 400 for prose, weight 600 for labels and button text, weight 700 for <strong> emphasis. Letter-spacing stays at normal (zero) on every token — Monzo does not lean on negative tracking. The brand's editorial signal is the single-weight 800 stack, not the tracking adjustments other display systems rely on.

Key Characteristics:

• Two-mode band rhythm — {colors.canvas-light} (white) for product-catalogue bands, {colors.canvas-dark} (#091723) for payday storytelling bands, switched in full-bleed with no soft transitions.
• Hot Coral {colors.primary} (#ff4f40) is the colour of the card, the colour of illustrated phone tiles, and the colour of inline link emphasis on the link-list rows — never the colour of a CTA button.
• The primary CTA is {components.button-primary} — a navy pill {colors.ink} (#091723) with white text, {rounded.full} (500px) radius, {spacing.md} {spacing.xl} (12px 24px) padding, 51px tall.
• Display is MonzoSansDisplay at weight 800 exclusively — 16px to 61px, with lineHeight: 1.0 on the hero and 1.2 everywhere else.
• The pill radius is the literal value 500px rather than the customary 9999px — a deliberate maximal-pill commitment that survives in production CSS.
• Cards use two corner sizes: 64px on the large dark payday card and 24px on illustrated product tiles and mint-fill feature cards. Inline tags use 4px.

Colors

Source pages: home (/).

Brand

• Hot Coral ({colors.primary} — #ff4f40): frequency 20. Used as text (9), border (9), bg (2). The brand's signature colour — saturated coral-orange that fills the physical card mockup, illustrated phone tiles, and the Monzo wordmark glyph. Rare on the marketing canvas (under 5% of total chromatic load); reserved as an object colour.
• Hot Coral Bright ({colors.primary-bright} — #f64d3f): a slightly redder variant captured by the extractor — clusters with Hot Coral. Used inside card-product-tile shadow gradients and in some illustration accents.
• On Primary ({colors.on-primary} — #ffffff): white text and iconography on Hot Coral surfaces.

Ink

• Ink ({colors.ink} — #091723): frequency 300. Used as text (137), border (137), bg (26). The brand's load-bearing dark — used as the primary CTA fill, default body-text colour on white, border on outline buttons. Not pure black — a deep blue-leaning navy that adds warmth at body sizes.
• Ink Canvas ({colors.ink-canvas} — #112231): frequency 5. Used as bg (5). The themeColor declared in the brand's manifest and the slightly lighter elevated dark surface — fills card-payday-dark over the #091723 band canvas.
• Ink Deep ({colors.ink-deep} — #012433): a very dark navy captured by the extractor — clusters with ink-canvas. Reserved for hairlines inside dark cards.
• Ink Mute ({colors.ink-mute} — #3b4c54): frequency 2. Used as bg (2). A desaturated gray-blue used for muted secondary text on white and for tertiary chrome.

Link

• Link ({colors.link} — #0000ee): frequency 52. Used as text (26), border (26). The browser-default link blue — Monzo lets unstyled <a> elements render at #0000ee in footer legal links and a handful of content rows. Not the brand's "primary link" colour; the actual link list above the fold renders in Hot Coral.

Surface

• Canvas Light ({colors.canvas-light} — #ffffff): frequency 346. Used as text (178), border (129), bg (39). Default page background; carries product-catalogue bands and the hero.
• Canvas Dark ({colors.canvas-dark} — #091723): same hex as {colors.ink}, doubling as a structural surface — the payday band, the support card section, the footer.
• Surface Payday ({colors.surface-payday} — #112231): the elevated dark step over canvas-dark — fills card-payday-dark.
• Surface Mint ({colors.surface-mint} — #e3ebe4): frequency 3. Used as bg (3). A very pale mint with a green-tinted hue — fills card-feature-mint and pill-tag backgrounds.
• Surface Cream ({colors.surface-cream} — #f2f8f3): a paler tinted near-white captured in the white cluster — used as a soft second light surface step on FAQ accordion expanded states.

Hairline & Scrim

• Hairline Light ({colors.hairline-light} — rgba(9,23,35,0.12)): 12%-alpha ink — 1px borders between FAQ rows and link-list dividers on white.
• Hairline Dark ({colors.hairline-dark} — rgba(255,255,255,0.12)): 12%-alpha white — 1px borders inside dark payday bands.
• Divider Soft ({colors.divider-soft} — rgba(9,23,35,0.06)): 6%-alpha ink — micro-dividers on dense lists.
• Scrim ({colors.scrim} — #000000): frequency 539. Used as text (270), border (264), shadow (5). Pure black appears via browser-default rendering on a handful of unstyled elements and the fallback shadow. Monzo's actual body ink is {colors.ink} (#091723), not pure black — the high #000000 count reflects user-agent defaults, not the brand's chosen text colour.

Semantic

The marketing canvas does not declare a separate semantic palette (success / warning / danger / info). Error states live inside the authenticated app product and are out of scope here.

Typography

Font Family

Two proprietary families:

• MonzoSansDisplay at the single weight 800 — every heading tier from {typography.heading-sm} (16px) up to {typography.display-xxl} (61px) renders in this one weight. There is no thin display alternative in the marketing system.
• MonzoSansText at weights 400 (body prose), 600 (labels, button text), 700 (<strong> emphasis). Body sizes are 13px (caption), 16px (default), and 20px (lead).

Both families are proprietary, served from monzo.com under the CSS variables --font-stack-title (MonzoSansDisplay) and --font-stack-body (MonzoSansText). When MonzoSans cannot be licensed, Inter at the same weight stack is the closest open-source path; alternatively General Sans, DM Sans, or Söhne render the same blocky-friendly silhouette. Clamp display line-height to 1.0 on the hero and 1.2 elsewhere; keep letter-spacing at normal.

Hierarchy

Principles

• Single display weight is the brand. MonzoSansDisplay never appears below weight 800 in the marketing system. Drop to weight 600 only when the type token is MonzoSansText (heading-md, heading-sm).
• Tracking is zero. Every display and body token sits at letterSpacing: normal. Negative tracking is not the brand's typographic signature.
• Line-height collapses on the hero. display-xxl at 61px uses lineHeight: 1.0. Every other token uses 1.2 on display or 1.4 on body.
• Body labels are weight 600. Nav, button text, and label rows use MonzoSansText 600 — heavier than the body 400 by one step, so labels read as actionable without becoming display.

Note on Font Substitutes

MonzoSans is proprietary. Inter at weight 800 (display) plus 400/600/700 (body) is the closest open-source substitute. Avoid weight ≤ 500 on display tokens — the brand's single-weight-800 commitment collapses at lighter weights.

Layout

Spacing System

• Base unit: 8px (with 4 / 10 / 16 sub-tokens).
• Tokens: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 10px · {spacing.md} 16px · {spacing.lg} 20px · {spacing.xl} 24px · {spacing.xxl} 32px · {spacing.section} 48px · {spacing.band} 64px.
• Section padding: 48–64px on marketing surfaces; 24px on mobile.
• Card internal padding: 48px on the large dark payday card, 24px on illustrated product tiles, 32px on the light support card.
• Button padding: 12px 24px on every pill variant — the same value across primary, secondary, outline, and on-dark.

Grid & Container

The page centers in a ~1100px column on desktop; the dark payday band extends edge-to-edge with the card inset clamped to the column. The product-tile grid is a 4-up that collapses to 2-up at 768px and 1-up at 480px. Section gaps tend toward 64px with content rows tightening to 16px inside FAQ accordions and link lists.

Whitespace Philosophy

Bands have generous vertical breathing room (64px section padding) and the column width holds at ~1100px even on wide screens — the brand chooses readability over edge-to-edge density. Inside cards the rhythm tightens: 16px between body rows, 8px on adjacent label-and-value pairs.

Elevation & Depth

Decorative Depth

Monzo's depth system is structural: the alternation between {colors.canvas-light} and {colors.canvas-dark} is the visual lift, not a shadow ladder. Drop shadows appear only on illustrated product tiles where the Hot Coral card mockup needs to feel physical against the white canvas. The dark payday card uses tonal luminance (#112231 over #091723) to register as elevated without a shadow.

Shapes

Border Radius Scale

Pill Geometry

The 500px value is the actual radius Monzo ships — not the customary 9999px infinity-radius shortcut. The literal 500px reads in the stylesheet as a maximal-pill commitment rather than a "round it off to whatever" convention. Every button across primary, secondary, outline, and dark variants uses this same radius, with {spacing.md} {spacing.xl} (12px 24px) padding and 51px height.

Components

Buttons

button-primary — the dominant CTA system-wide.

• Background {colors.ink} (#091723), text {colors.on-dark} (#ffffff), type {typography.button-md}, padding 12px 24px, rounded {rounded.full} 500px, height 51px.
• Used on every marketing band as the single filled pill. Hot Coral never fills this button.

button-primary-on-dark — the inverse for dark bands.

• Background {colors.canvas-light} (#ffffff), text {colors.ink} (#091723), same pill geometry.
• Appears inside the dark payday band when a white pill needs to read as the brightest pixel.

button-secondary — soft mint fill.

• Background {colors.surface-mint} (#e3ebe4), text {colors.ink}, same pill geometry.

button-outline-light — 1px ink border on white.

• Background {colors.canvas-light}, text {colors.ink}, 1px solid {colors.ink} border, same pill geometry, height 51px.

Tags & Badges

pill-tag — mint pill chip.

• Background {colors.surface-mint} (#e3ebe4), text {colors.ink}, type {typography.body-sm}, padding 8px 16px, rounded {rounded.full}.

badge-coral — small Hot Coral tag.

• Background {colors.primary} (#ff4f40), text {colors.on-primary} (#ffffff), type {typography.body-sm}, padding 4px 8px, rounded {rounded.xs} 4px. The single Hot-Coral-as-background exception in the chip set.

Navigation

top-nav — the page header.

• Background {colors.canvas-light}, text {colors.ink}, height 64px, padding 16px 24px. Logo wordmark on the left, primary nav center, sign-in + filled button-primary on the right.

nav-link — inline nav anchor.

• Background {colors.canvas-light}, text {colors.ink} weight 600 via {typography.body-md-label}. No underline default; no hover colour shift documented.

Hero & Bands

hero-band-light — white catalogue hero.

• Background {colors.canvas-light}, text {colors.ink}, type {typography.display-xxl} (61px / 800 / 1.0), padding 48px 24px 24px. Carries the "It all starts with a Hot Coral card" headline above the link list.

hero-band-dark — dark storytelling band.

• Background {colors.canvas-dark} (#091723), text {colors.on-dark}, type {typography.display-md}, padding {spacing.band} {spacing.xl} (64px 24px). Carries "Monzo for all your money" and the payday section openers.

Cards

card-payday-dark — the load-bearing dark feature card.

• Background {colors.surface-payday} (#112231) over {colors.canvas-dark} (#091723), text {colors.on-dark}, padding 48px, rounded {rounded.xl} 64px. Tonal lift via luminance, no shadow.

card-product-tile — Hot Coral illustrated tile.

• Background {colors.primary} (#ff4f40), text {colors.on-primary}, type {typography.heading-md}, padding {spacing.xl} (24px), rounded {rounded.md} 24px. Hosts the phone-mockup illustration grid.

card-feature-mint — soft mint interlude.

• Background {colors.surface-mint} (#e3ebe4), text {colors.ink}, padding 24px, rounded {rounded.md} 24px.

card-support-light — the "Humans on hand, 24/7" support card.

• Background {colors.canvas-light}, text {colors.ink}, padding 32px, rounded {rounded.md} 24px. 1px hairline-light border.

Rows & Lists

faq-row — the FAQ accordion row.

• Background {colors.canvas-light}, text {colors.ink} via {typography.heading-md}, padding 16px 0px, 1px {colors.hairline-light} border between rows. No rounded corners; full-bleed of the column.

link-list-row — the Hot Coral inline link list.

• Background {colors.canvas-light}, text {colors.primary} (#ff4f40), type {typography.heading-md} weight 600. Padding 16px 0px. This is the one place Hot Coral appears as text colour rather than object colour.

inline-link — body-prose inline link.

• Text {colors.link} (#0000ee), no background, no padding. Browser-default link blue rendered without override on legal-footer rows.

Tiles & Footer

download-tile — app-store download pill.

• Background {colors.canvas-light}, text {colors.ink} via {typography.body-md-label}, padding 12px 24px, rounded {rounded.md} 24px, 1px ink border, height 51px.

footer-dark — the regulatory footer.

• Background {colors.canvas-dark} (#091723), text {colors.on-dark-mute} (rgba(255,255,255,0.72)), type {typography.body-sm}, padding 64px 24px. Holds 4 columns of link groups, social icons, and the FCA / FSCS legal row.

Do's and Don'ts

Do

• Reserve {colors.primary} (#ff4f40) for object surfaces — the card mockup, illustrated phone tiles, the Monzo glyph. Hot Coral fills card-product-tile and badge-coral and no other component.
• Use {colors.ink} (#091723) as the primary CTA fill across every band — the navy pill is the brand's CTA voltage, not Hot Coral.
• Render every heading in MonzoSansDisplay at weight 800. Drop to MonzoSansText only on heading-md and heading-sm where the label voice is closer to body.
• Use literal 500px for pill radius — not 9999px. The brand ships the explicit value.
• Switch background colour in full-bleed bands, never with gradient transitions — the slam is the depth system.

Don't

• Don't fill a CTA with Hot Coral #ff4f40 — the brand assigns Hot Coral to materials (card, illustration, glyph), not to actions. A Hot-Coral filled button breaks the disciplined-scarcity rule that gives the colour its voltage.
• Don't bump MonzoSansDisplay below weight 800 — the single-weight-800 commitment is the brand's editorial signature. Lighter display weights collapse into generic neobank type.
• Don't apply negative letter-spacing to display tokens — every Monzo display token sits at letterSpacing: normal. Tracking adjustments belong to other systems, not this one.
• Don't substitute 9999px for {rounded.full} (500px) on buttons. The visual result clips identically, but the literal 500px carries the brand's stylesheet voice.
• Don't use #000000 for body text — the brand's actual ink is {colors.ink} (#091723), a deep blue-leaning navy. Pure black appears only via user-agent defaults on unstyled elements.
• Don't soft-fade between {colors.canvas-light} and {colors.canvas-dark} band boundaries — the hard slam is the brand's structural depth medium; a gradient transition removes the magazine-spread rhythm.

Known Gaps

• Hover and pressed states are not captured across button variants — only the base CTA token is documented. The brand likely applies a subtle luminance lift on button-primary hover, but no precise value is extractable.
• Focus rings rely on browser-default outline behaviour; no token captures the focus colour or stroke width.
• Logged-in app surfaces (transactions, pots, payments, account settings) are out of scope. Only the public marketing canvas at monzo.com is in this spec.
• Illustration palette inside Hot Coral phone-tile mockups (the oranges, peaches, light blues, mint art layered inside card-product-tile) appears as raster art rather than CSS-rendered colour and is not enumerated as design tokens.
• Motion specs for the scroll-bound --scroll-scale CSS variable (declared at :root) are not documented — the brand uses light scroll-tied scaling on hero illustrations.
• Semantic palette (success, warning, danger, info) is not declared in the marketing system — error states live inside the authenticated app product.