What is Monzo's primary brand color and how is it used?

Hot Coral — `#ff4f40`, a fully-saturated coral-orange that sits warmer than tomato and brighter than fintech's customary red. The structural rule: Hot Coral is an object colour, not a CTA colour. It fills the physical card mockup, the illustrated phone tiles in the product grid, and accent dots inside `card-payday`. The primary button is a dark-navy pill at `#091723` with white text — Hot Coral never fills a button on the marketing canvas. There is one bright variant `#f64d3f` captured by the extractor; both render the same to the eye.

What typography does Monzo use, and what should I use if MonzoSans isn't available?

Monzo runs two proprietary families: MonzoSansDisplay at the single weight 800 for every heading (16px to 61px), and MonzoSansText at weights 400 (body), 600 (labels, button text), and 700 (strong emphasis) for body type. Display sizes use `lineHeight: 1.0` to `1.2` with `letterSpacing: normal` — no negative tracking. When MonzoSans is unavailable, Inter at weight 800 (display) and 400/600 (body) is the closest open-source path; alternatively General Sans, Söhne, or DM Sans render the same blocky-friendly silhouette. Clamp display line-height to 1.0 explicitly and keep tracking at zero.

What is the two-mode rhythm and how strict is it?

The marketing canvas alternates two structural background colours in full-bleed bands: white `#ffffff` for product-catalogue rows (the link list, the illustrated tile grid, FAQ accordions, app-download tiles) and deep navy `#091723` for storytelling bands (the payday hero, the support card, the long-term-growth section). The two switch directly with no gradient transitions, no soft overlays — the boundary between bands is a hard edge. Inside dark bands, the only second surface step is the `#112231` payday card fill, slightly lighter than the canvas behind it; inside light bands, `#e3ebe4` mint mist fills cream-interlude cards.

What is the shape language and why is the pill radius 500px instead of 9999px?

Every button is a pill at `borderRadius: 500px` — the actual value the brand ships, even though `9999px` would clip to the same visual result. The literal `500px` reads in the stylesheet as a deliberate maximal-pill commitment rather than the customary infinity-radius shortcut. Content cards (the dark payday card, illustrated product tiles) use `64px` for the largest surfaces and `24px` for mid-size feature cards. Inline tags and the small-radius chip set sit at `4px` — the only sharp-cornered geometry in the system. Profile and avatar circles use `100%`.

Can I use this DESIGN.md to build my own React banking app?

Yes — the file is structured to feed into Claude, Cursor, or any AI coding tool that reads structured design tokens. The agent will reproduce Monzo's white-against-navy band rhythm, scarce-Hot-Coral discipline, and MonzoSansDisplay weight-800 heading stack rather than a generic challenger-bank theme. You can also reference the tokens directly: every colour is a quoted hex, every radius and padding is a quoted pixel string, and the 19 component definitions reference each other by token name so `card-payday-dark` resolves through `{colors.surface-payday}` over `{colors.canvas-dark}` to the actual `#112231` over `#091723`.

What's missing from this DESIGN.md spec?

A few items, documented in the Known Gaps section: precise pressed and focus states across button variants are not captured — only the base CTA is documented. The 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. The Hot Coral illustration palette inside phone-tile mockups (oranges, peaches, light blues, mint) appears as raster art rather than CSS-rendered colour and is not captured as design tokens. Mobile-app screenshot art direction and the legal-footer regulatory text block are described in prose but not enumerated.

Monzo Design System

Monzo's design system as a DESIGN.md file.

About Monzo DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source monzo.com

Fintech & Crypto
Banking & Payments

Monzo's marketing canvas is the visual argument for a UK challenger bank built around its physical card. The Hot Coral hex `#ff4f40` is famous, but on the site itself it is held back: the card mockup is Hot Coral, the illustrated phone tiles in the "Manage your money today" grid are Hot Coral, and almost nothing else. The primary CTA on every band is a dark-navy pill at `#091723` with white text and a `500px` radius — pill geometry so committed the radius value rounds up to half-a-thousand pixels rather than the customary 9999. Display type is MonzoSansDisplay at the single weight `800`, scaling from a 16px section eyebrow up to a 61px hero ("It all starts with a Hot Coral card") with `lineHeight: 1.0`. Body type is MonzoSansText at weights 400 and 600. Two structural background colours — white `#ffffff` and deep navy `#091723` — split the page into payday-storytelling bands and white product-catalogue bands.

This page packages the Monzo marketing canvas into a single DESIGN.md file built on the Google Labs DESIGN.md specification. Inside the spec: 19 colour tokens grouped into brand, surface, ink, and link roles; 12 typography tokens spanning a 61px hero down to a 13px caption with the full MonzoSansDisplay 800 and MonzoSansText 400/600/700 weight stack; six radius tokens including the load-bearing `500px` pill and a `4px` micro-tag corner; nine spacing tokens climbing from 4px to a 64px section band; and 19 component tokens covering buttons, payday cards, illustrated product tiles, the top nav, the dark "Humans on hand" support card, FAQ rows, and the legal-link footer. Every value is quoted as an exact hex, pixel, or weight number.

A working React or Next.js developer drops the file into Claude, Cursor, or GitHub Copilot and the agent reproduces Monzo's friendly-bank rhythm rather than a generic neobank dashboard. Tokens map onto Tailwind config or CSS variables, and components reference each other by name. The system is worth studying for one disciplined choice that mirrors Airbnb's restraint with Rausch: a famous brand colour treated as a material — the colour of the card, the colour of the illustration — rather than the colour of the button. Where most fintech brands try to brand the click, Monzo brands the object the click buys.

What makes it distinct

Hot Coral as object color`#ff4f40` fills the physical card and illustrated phone tiles, never a CTA button
Primary CTA is a dark-navy pill`#091723` background, white text, 500px radius, 12px-24px padding
MonzoSansDisplay 800 across every heading16px h3 to 61px hero, no thin display tier exists
Pill `500px` and tight `4px` are the two dominant radii`500px` for buttons and rounded chips, `4px` for inline tags
Two-mode rhythmwhite #ffffff product bands slam against deep #091723 payday bands with no gradient transitions

Live at monzo.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

monzo.com

Explore Monzo

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Monzo design system FAQ

Common questions about Monzo's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Monzo — official site

The UK challenger bank's marketing canvas — source of every hex, font, and radius in this spec.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Monzo in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→