Design System
Analysis of Monzo

A near-white canvas with pure-black ink, generous pill-and-64px roundness, and Monzo's signature hot coral rationed to a single accent — while the real call-to-action is a calm midnight-navy pill.

01 — Foundations

Colour Palette

02 — Foundations

Typography

Monzo's proprietary Monzo Sans family, substituted here with the nearest Google match, Manrope — same rounded geometric construction and an 800 heavy weight. Hierarchy is built from size and weight, not tracking, collapsing to one dominant 16px/400 body tier.

03 — Components

Button Variants

button-primary
Hot coral (#ff4f40), fully-rounded 500px pill — Monzo's signature brand button.
button-dark
Midnight navy (#091723) pill — the actual primary CTA used across the homepage.
button-secondary
White fill with a 1px ink outline; the inverted variant goes white-on-dark over photo bands.
button-pill
Sage-tinted utility pill (#e3ebe4) used for nav toggles and tags.
04 — Components

Cards & Surfaces

Content tiles sit flat on the canvas with dramatically rounded corners (32–64px), lifting to a soft ambient glow only on hover.

05 — Components

Form Elements

text-input
textarea
06 — Foundations

Spacing Scale

An 8px base unit stepping 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 keeps rhythm consistent against the large corner radii.

07 — Foundations

Border Radius

Roundness is the signature — from 4px chips up to 64px feature cards and fully-rounded 500px pills.

08 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. The default: surfaces separated by a whisper-light divider, no shadow.
Level 1 — a soft ambient glow (0 0 10px rgba(0,0,0,.1)) on hover for cards and tiles.
Level 2 — a deeper drop (0 8px 32px rgba(0,0,0,.16)) reserved for floating badges and sticky cards.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxSingle-column stacks; display headline drops to ~40px; full-width pill CTAs.
Tablet768–1023pxFour-up grids fold to two columns; plan cards stack to one column.
Laptop1024–1279pxFull multi-column grids return; container gains side padding.
Desktop≥ 1280pxCentred 1200px container; alternating white and tinted bands at full width.

The heavy 800-weight display type steps down at the tablet breakpoint so it never overwhelms small screens, while alternating white and mint bands keep a long marketing scroll legible.

Pricing Tiers

Monzo's plan ladder rendered in the system — flat cards with a navy "featured" tier and coral accent bullets. (Illustrative content.)

Free
£0/month
The everyday current account, fee-free.
  • Free UK current account
  • Instant spending notifications
  • Budgeting & pots
  • Fee-free card abroad
Perks● Most popular
£7/month
Extra cashback and protection for daily life.
  • Everything in Free
  • 1% interest on balances
  • Discounted partner offers
  • Phone & travel insurance
Max
£17/month
The fullest set of benefits and cover.
  • Everything in Perks
  • Higher interest tier
  • Worldwide travel insurance
  • Premium metal card

Data Table

Transaction-style table showing pill status chips and a rounded pager. (Illustrative content.)

IDMerchantCategoryStatusWhen
#80214Tesco ExpressGroceriesSettledToday, 09:14
#80213TfL TravelTransportSettledToday, 08:02
#80212SpotifySubscriptionsPendingYesterday
#80211Pret a MangerEating outSettledYesterday
#80210Octopus EnergyBillsPending2 days ago
1–5 of 412
123

Auth Forms

Sign-in and sign-up rendered on the system's rounded, lightly-shadowed cards. (Illustrative content.)

Sign in

Welcome back

OR
Create account

Join Monzo

OR