---
version: alpha
name: Monzo
website: "https://monzo.com"
description: >-
  Monzo's marketing canvas is the UK challenger-bank counterpoint to fintech's beige-and-cobalt template — a white-on-cream stack carrying MonzoSansDisplay at weight 800 from 16px headings up to a 61px hero ("It all starts with a Hot Coral card"), with the brand's signature hot coral `#ff4f40` reserved for tactile product surfaces (the card itself, illustrated tile mockups) rather than CTA fills. The primary button is a dark-navy pill `#091723` rendered at radius `500px` with white text — Hot Coral never fills a button, the same disciplined-scarcity move Airbnb applies to Rausch. Body type runs MonzoSansText 16/22.4 at weight 600 on labels, weight 400 on prose, and the page rhythm alternates white catalogue bands against deep `#091723` payday bands with no soft transitions.

seo:
  title: "Monzo Design System for React — Hot Coral #ff4f40, MonzoSansDisplay 800, 19 components"
  metaDescription: "Monzo's design system as a DESIGN.md file. Hot Coral #ff4f40, MonzoSansDisplay at 16-61px, 19 colors, 19 components. For React, Next.js, and AI tools."
  highlights:
    - "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 heading — 16px 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 rhythm — white #ffffff product bands slam against deep #091723 payday bands with no gradient transitions"
  tags:
    - "Fintech & Crypto"
    - "Banking & Payments"
  lastUpdated: "2026-05-13"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://monzo.com"
      title: "Monzo — official site"
      description: "The UK challenger bank's marketing canvas — source of every hex, font, and radius in this spec."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Monzo's primary brand color and how is it used?"
      answer: "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."
    - id: "typography"
      title: "What typography does Monzo use, and what should I use if MonzoSans isn't available?"
      answer: "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."
    - id: "two-mode-rhythm"
      title: "What is the two-mode rhythm and how strict is it?"
      answer: "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."
    - id: "pill-geometry"
      title: "What is the shape language and why is the pill radius 500px instead of 9999px?"
      answer: "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%`."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own React banking app?"
      answer: "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`."
    - id: "known-gaps"
      title: "What's missing from this DESIGN.md spec?"
      answer: "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."

colors:
  primary: "#ff4f40"
  primary-bright: "#f64d3f"
  on-primary: "#ffffff"
  ink: "#091723"
  ink-canvas: "#112231"
  ink-deep: "#012433"
  ink-mute: "#3b4c54"
  link: "#0000ee"
  on-dark: "#ffffff"
  on-dark-mute: "rgba(255,255,255,0.72)"
  canvas-light: "#ffffff"
  canvas-dark: "#091723"
  surface-payday: "#112231"
  surface-mint: "#e3ebe4"
  surface-cream: "#f2f8f3"
  hairline-light: "rgba(9,23,35,0.12)"
  hairline-dark: "rgba(255,255,255,0.12)"
  divider-soft: "rgba(9,23,35,0.06)"
  scrim: "#000000"

typography:
  display-xxl:
    fontFamily: "MonzoSansDisplay, sans-serif"
    fontSize: 61px
    fontWeight: 800
    lineHeight: 1.0
    letterSpacing: 0
  display-xl:
    fontFamily: "MonzoSansDisplay, sans-serif"
    fontSize: 49px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0
  display-lg:
    fontFamily: "MonzoSansDisplay, sans-serif"
    fontSize: 44px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0
  display-md:
    fontFamily: "MonzoSansDisplay, sans-serif"
    fontSize: 39px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0
  display-sm:
    fontFamily: "MonzoSansDisplay, sans-serif"
    fontSize: 31px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0
  heading-lg:
    fontFamily: "MonzoSansDisplay, sans-serif"
    fontSize: 25px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0
  heading-md:
    fontFamily: "MonzoSansDisplay, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0
  heading-sm:
    fontFamily: "MonzoSansDisplay, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0
  body-lg:
    fontFamily: "MonzoSansText, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  body-md:
    fontFamily: "MonzoSansText, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  body-md-label:
    fontFamily: "MonzoSansText, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  body-md-strong:
    fontFamily: "MonzoSansText, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.375
    letterSpacing: 0
  body-sm:
    fontFamily: "MonzoSansText, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  button-md:
    fontFamily: "MonzoSansText, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0

rounded:
  none: "0px"
  xs: "4px"
  md: "24px"
  lg: "32px"
  xl: "64px"
  full: "500px"
  circle: "100%"

spacing:
  xxs: "4px"
  xs: "8px"
  sm: "10px"
  md: "16px"
  lg: "20px"
  xl: "24px"
  xxl: "32px"
  section: "48px"
  band: "64px"

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "12px 24px"
    height: "51px"
  button-primary-on-dark:
    backgroundColor: "{colors.canvas-light}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "12px 24px"
    height: "51px"
  button-secondary:
    backgroundColor: "{colors.surface-mint}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "12px 24px"
    height: "51px"
  button-outline-light:
    backgroundColor: "{colors.canvas-light}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "12px 24px"
    height: "51px"
    border: "1px solid {colors.ink}"
  pill-tag:
    backgroundColor: "{colors.surface-mint}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.full}"
    padding: "8px 16px"
  badge-coral:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.xs}"
    padding: "4px 8px"
  top-nav:
    backgroundColor: "{colors.canvas-light}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md-label}"
    rounded: "{rounded.none}"
    padding: "16px 24px"
    height: "64px"
  nav-link:
    backgroundColor: "{colors.canvas-light}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md-label}"
    rounded: "{rounded.none}"
    padding: "16px 0px"
  hero-band-light:
    backgroundColor: "{colors.canvas-light}"
    textColor: "{colors.ink}"
    typography: "{typography.display-xxl}"
    rounded: "{rounded.none}"
    padding: "48px 24px 24px"
  hero-band-dark:
    backgroundColor: "{colors.canvas-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.display-md}"
    rounded: "{rounded.none}"
    padding: "64px 24px"
  card-payday-dark:
    backgroundColor: "{colors.surface-payday}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
    padding: "48px"
  card-product-tile:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.heading-md}"
    rounded: "{rounded.md}"
    padding: "24px"
  card-feature-mint:
    backgroundColor: "{colors.surface-mint}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "24px"
  card-support-light:
    backgroundColor: "{colors.canvas-light}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "32px"
  faq-row:
    backgroundColor: "{colors.canvas-light}"
    textColor: "{colors.ink}"
    typography: "{typography.heading-md}"
    rounded: "{rounded.none}"
    padding: "16px 0px"
    border: "1px solid {colors.hairline-light}"
  link-list-row:
    backgroundColor: "{colors.canvas-light}"
    textColor: "{colors.primary}"
    typography: "{typography.heading-md}"
    rounded: "{rounded.none}"
    padding: "16px 0px"
  inline-link:
    backgroundColor: "{colors.canvas-light}"
    textColor: "{colors.link}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "0"
  download-tile:
    backgroundColor: "{colors.canvas-light}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md-label}"
    rounded: "{rounded.md}"
    padding: "12px 24px"
    height: "51px"
    border: "1px solid {colors.ink}"
  footer-dark:
    backgroundColor: "{colors.canvas-dark}"
    textColor: "{colors.on-dark-mute}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: "64px 24px"
---

## 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

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.display-xxl}` | 61px | 800 | 1.0 | Hero ("It all starts with a Hot Coral card") |
| `{typography.display-xl}` | 49px | 800 | 1.2 | Section opener on white bands |
| `{typography.display-lg}` | 44px | 800 | 1.2 | Section opener on dark payday bands |
| `{typography.display-md}` | 39px | 800 | 1.2 | "Monzo for all your money" hero variant |
| `{typography.display-sm}` | 31px | 800 | 1.2 | Card title ("Make payday twice as nice") |
| `{typography.heading-lg}` | 25px | 700 | 1.2 | Tile heading on product grid |
| `{typography.heading-md}` | 20px | 600 | 1.2 | Sub-section heading, FAQ row label |
| `{typography.heading-sm}` | 16px | 600 | 1.2 | Smallest display tier — eyebrow, mini-card title |
| `{typography.body-lg}` | 20px | 400 | 1.4 | Hero supporting text on dark bands |
| `{typography.body-md}` | 16px | 400 | 1.4 | Default prose body |
| `{typography.body-md-label}` | 16px | 600 | 1.4 | Nav links, button text, label rows |
| `{typography.body-md-strong}` | 16px | 700 | 1.375 | `<strong>` inline emphasis inside paragraphs |
| `{typography.body-sm}` | 13px | 400 | 1.4 | Caption, footer legal text, app-store sub-label |
| `{typography.button-md}` | 16px | 600 | 1.4 | Pill button label (matches body-md-label) |

### 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

| Level | Treatment | Use |
|---|---|---|
| 0 | Flat | Default surface — most cards have no shadow at all |
| 1 | Tonal step `#112231` over `#091723` | The payday card lifts off the dark band via luminance, not shadow |
| 2 | `box-shadow: rgba(0,0,0,0.08) 0 4px 16px` | Floating illustrated product tiles on white |
| 3 | Band switch — white slams against `#091723` | The brand's primary depth medium |

### 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

| Token | Value | Use |
|---|---|---|
| `{rounded.none}` | 0px | Hero bands, footer, nav, FAQ row borders |
| `{rounded.xs}` | 4px | Inline tags, small badges, the only sharp-cornered-but-rounded chip |
| `{rounded.md}` | 24px | Illustrated product tiles, mint feature cards, download tiles |
| `{rounded.lg}` | 32px | Mid-size feature cards |
| `{rounded.xl}` | 64px | The large dark payday card |
| `{rounded.full}` | 500px | All pill buttons and pill-shaped tags |
| `{rounded.circle}` | 100% | Profile photos, avatar circles |

### 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.