Design system monzo.com

---
version: alpha
name: "monzo.com"
description: "Design system extracted from https://monzo.com/ on 2026-09-28"
colors:
  background: "#ffffff"
  surface: "#efefef"
  foreground: "#6b747b"
  muted-foreground: "#091723"
  primary: "#091723"
  on-primary: "#ffffff"
  secondary: "#0000ee"
  border: "#091723"
typography:
  headline-display:
    fontFamily: "MonzoSansDisplay"
    fontSize: "49px"
    fontWeight: 800
    lineHeight: "1.2"
  headline-lg:
    fontFamily: "MonzoSansDisplay"
    fontSize: "39px"
    fontWeight: 800
    lineHeight: "1.2"
  headline-md:
    fontFamily: "MonzoSansDisplay"
    fontSize: "25px"
    fontWeight: 700
    lineHeight: "1.4"
  body-md:
    fontFamily: "MonzoSansText"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1.4"
  label-md:
    fontFamily: "MonzoSansText"
    fontSize: "13px"
    fontWeight: 400
    lineHeight: "1.38"
  button:
    fontFamily: "MonzoSansText"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1.4"
rounded:
  none: "0px"
  2xl: "500px"
  lg: "10px"
  sm: "4px"
  full: "9999px"
spacing:
  unit: "8px"
  1: "8px"
  2: "16px"
  3: "24px"
  4: "32px"
  5: "48px"
  6: "64px"
components:
  button-ghost:
    backgroundColor: "#f2f8f3"
    textColor: "#000000"
    typography: "{typography.button}"
    rounded: "0px"
    height: "42px"
    padding: "0px 0px"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "500px"
    height: "51px"
    padding: "12px 24px"
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#091723"
    typography: "{typography.button}"
    rounded: "500px"
    height: "48px"
    padding: "12px 24px"
  input:
    backgroundColor: "#efefef"
    rounded: "10px"
    height: "52px"
---

# monzo.com

## Overview

Monzo | Open a Free Account: Your salary sorted into Pots. Your spare change turned into savings. Your money, doing what it should with Monzo.

Soft, well-rounded controls, one soft shadow for depth, confident display type at 49px / 800, a single blue accent on neutrals. The site ships in light mode by default. Measured from 2836 rendered elements at 1440px wide on 2026-09-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#ffffff` | Page background |
| surface | `#efefef` | Cards, panels, raised or recessed surfaces |
| foreground | `#6b747b` | Primary text |
| muted-foreground | `#091723` | Secondary text, captions |
| primary | `#091723` | Accent: primary buttons, links, focus |
| on-primary | `#ffffff` | Text on the accent |
| secondary | `#0000ee` | Secondary accent (blue) |
| border | `#091723` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#ffffff`, `#112231`, `#ff4f40`, `#091723`, `#efefef`, `#3b4c54`, `#75817e`.

The accent `#091723` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **MonzoSansDisplay** for h1, h2, h3: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.
- **MonzoSansText** for body, label, button: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | MonzoSansDisplay | 49px | 800 | 1.2 | normal |
| headline-lg | MonzoSansDisplay | 39px | 800 | 1.2 | normal |
| headline-md | MonzoSansDisplay | 25px | 700 | 1.4 | normal |
| body-md | MonzoSansText | 16px | 400 | 1.4 | normal |
| label-md | MonzoSansText | 13px | 400 | 1.38 | normal |
| button | MonzoSansText | 16px | 400 | 1.4 | normal |

Type scale in use: 13px, 16px, 20px, 25px, 31px, 39px, 44px, 49px. Base body size 16px.

The H1 renders at 48.8288px / 800, start aligned, up to 620px wide. Sample: "Spend your money on life, not your life on money".

## Layout

- Spacing unit: 8px. Scale in use: 8, 16, 24, 32, 48, 64 (px).
- Flex and grid gaps: 8, 16, 24, 32, 48, 64 px.
- Content max width: 1392px, centred.
- Breakpoints: 481px, 769px, 820px, 1041px, 1440px.
- Header: 87px tall, sticky, background `rgba(0, 0, 0, 0)`; 4 nav links at 16px / 400 (Skip to Content · Business · Sign up).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgba(0, 0, 0, 0) 0px 1px 1px 0px`

## Shapes

- Buttons: 500px
- Inputs: 10px
- Cards and panels: 0px
- Images and media: 0px
- Radius scale: none 0px, 2xl 500px, lg 10px, sm 4px, full 9999px

## Components

### Button, ghost

Background transparent (it sits on `#f2f8f3`, so place it on that colour), text `#000000`, border none, radius 0px, height 42px, padding 0px 0px, 0px / 400. Sample label: "Confirm Selected Country".

### Button, primary

Background `#091723`, text `#ffffff`, border 1px solid #091723, radius 500px, height 51px, padding 12px 24px, 16px / 600. Sample label: "Sign up".

### Button, secondary

Background `#ffffff`, text `#091723`, border 1px solid #ffffff, radius 500px, height 48px, padding 12px 24px, 16px / 600. Sample label: "Open a free Monzo accoun".

### Input

Height 52px, background `#efefef`, border 1px solid #b2b2b2, radius 10px, 16px text, padding 16px 48px.

### Link

Colour `#0000ee`, underline, weight 400.

## Dark Mode

No dark mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute.

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 395px | 100px | 16px | 48.8px, 2 lines, start | 87px, 3 links, 1 CTA | text only | 2→1 col; 2→2 col; 4→1 col | content-width |
| laptop 1024px | 720px | 88px | 16px | 48.4px, 3 lines, start | 87px, 3 links, 1 CTA | text only | 2→1 col; 2→2 col; 4→1 col | content-width |
| tablet 768px | 704px | 64px | 16px | 45.3px, 2 lines, start | 72px, hamburger (Toggle Personal navigation menu), 1 CTA | text only | 2→1 col; 3→3 col; 6→6 col | 10 full-width |
| phone 390px | 358px | 40px | 16px | 40.7px, 4 lines, start | 65px, hamburger (Toggle Personal navigation menu), 1 CTA | text only | 2→1 col; 3→3 col; 6→6 col | 12 full-width |

- H1 goes 48.8px → 40.7px (83%), 2 → 4 lines.
- Nav collapses to a hamburger by 390px (first seen at 768px); header 87px → 65px.
- Card grids: 1 columns → 1 column on phones (gap normal → normal).
- Body text stays 16px at every width.
- Phone side gutter 40px.
- 12 buttons stretch full-width on phones.
- Section top padding 64px → 32px.

## Interaction & Motion

226 elements carry transitions; typical 0.3s with cubic-bezier(0.22, 0, 0.12, 1), mostly on background-color, opacity, transform. 1 running keyframe animations (RevealInView_reveal__AqI33 1s 1).

- Hover on button-primary ("Sign up"): background #091723 → #2c3a43, border #091723 → #2c3a43; cursor pointer; transition background-color, color | 0.3s, 0.3s | ease-in-out, ease-in-out | delay 0.1s, 0.1s.
- Hover on button-secondary ("Open a free Monzo account"): background #ffffff → #ffffffcc, border #ffffff → #ffffffcc; cursor pointer; transition background-color | 0.2s | ease.
- Hover on nav-link ("Business"): text #09172399 → #091723, border #09172399 → #091723, icon/inner colour → #091723; cursor pointer.
- Focus on button-primary: outline 1px solid rgb(33, 143, 183), offset 2px.
- No tooltip could be triggered from the first viewport, but the stylesheet defines tooltip rules (.Tooltip_Tooltip__6n9nm): position: relative.
- Hover/click menus: below the trigger, 24px gap, shifted right; #ffffff, radius 0px, padding 48px 48px, shadow none; 6 items, 107px tall, 16px, padding 16px 16px, 2 columns; appears after a delay; stays open after the pointer leaves (click-away or hover-intent grace).
- 18 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe).

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Do use 8px multiples for every padding, margin and gap; the site does not use odd values.
- Do reserve `#091723` for actions and focus; never paint large areas with it.
- Do keep body text at 16px in MonzoSansText and headings in MonzoSansDisplay.
- Do match corner radii per element class (buttons 500px, cards 0px); do not pick one radius for everything.
- Do use the measured shadows above; do not invent heavier ones.
- Don't substitute a different accent hue or introduce gradients that are not listed above.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: The primary action colour is the ink colour (monochrome palette); chromatic colours appear only as small accents.