--- version: alpha name: "monzo.com" description: "Design system extracted from https://monzo.com/ on 2026-10-28" colors: background: "#ffffff" surface: "#efefef" foreground: "#6b747b" primary: "#091723" on-primary: "#ffffff" secondary: "#0000ee" border: "#091723" typography: headline-display: fontFamily: "MonzoSansDisplay" fontSize: "48.8288px" fontWeight: 800 lineHeight: "58.5946px" headline-lg: fontFamily: "MonzoSansDisplay" fontSize: "39.0624px" fontWeight: 800 lineHeight: "46.8749px" headline-md: fontFamily: "MonzoSansDisplay" fontSize: "25px" fontWeight: 700 lineHeight: "35px" body-md: fontFamily: "MonzoSansText" fontSize: "16px" fontWeight: 400 lineHeight: "22.4px" label-md: fontFamily: "MonzoSansText" fontSize: "12.8px" fontWeight: 400 lineHeight: "17.92px" button: fontFamily: "MonzoSansText" fontSize: "16px" fontWeight: 400 lineHeight: "22.4px" 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 48.8288px / 800, a single blue accent on neutrals. The site ships in light mode by default. Measured from 2847 rendered elements at 1440px wide on 2026-10-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/brand-logo.png`: primary logo lockup - `screenshots/brand-icon-1.png`: representative interface icon - `screenshots/brand-icon-2.png`: representative interface icon - `screenshots/brand-icon-3.png`: representative interface icon - `screenshots/brand-icon-4.png`: representative interface icon - `screenshots/media-logo-source-hd.png`: primary logo lockup / high-resolution source capture - `screenshots/media-icon-1-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/media-icon-2-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/media-icon-3-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/media-icon-4-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/region-r1-context.jpg`: r1 context: page context - `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail - `screenshots/region-r2-context.jpg`: r2 context: page context - `screenshots/region-r2-detail.png`: r2 detail: native-resolution local detail - `screenshots/region-r2-icons.png`: r2 icons: icon placement and nearby text - `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 - `screenshots/phone-390-menu.png`: Phone 390, navigation menu open - `screenshots/media-logo-upscaled.png`: primary logo lockup / upscaled.png - `screenshots/media-logo-transparent.png`: primary logo lockup / transparent.png - `screenshots/media-logo-optimized.webp`: primary logo lockup / optimized.webp - `screenshots/media-icon-1-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-1-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-2-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-2-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-2-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-3-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-3-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-3-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-4-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-4-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-4-optimized.webp`: representative interface icon / optimized.webp - `screenshots/c-button-1--rest.png`: Button 1 ("Current accounts"), rest - `screenshots/c-button-1--hover.png`: Button 1 ("Current accounts"), hover - `screenshots/c-button-1--focus.png`: Button 1 ("Current accounts"), focus - `screenshots/c-button-1--active.png`: Button 1 ("Current accounts"), active - `screenshots/c-button-1--disabled.png`: Button 1 ("Current accounts"), disabled - `screenshots/c-icon-button-1--rest.png`: Icon button 1, rest - `screenshots/c-icon-button-1--hover.png`: Icon button 1, hover - `screenshots/c-icon-button-1--focus.png`: Icon button 1, focus - `screenshots/c-icon-button-1--active.png`: Icon button 1, active - `screenshots/c-icon-button-1--disabled.png`: Icon button 1, disabled - `screenshots/c-toggle-button-1--rest.png`: Toggle / segmented control 1 ("Instant notificationsGet"), rest - `screenshots/c-toggle-button-1--hover.png`: Toggle / segmented control 1 ("Instant notificationsGet"), hover - `screenshots/c-toggle-button-1--focus.png`: Toggle / segmented control 1 ("Instant notificationsGet"), focus - `screenshots/c-toggle-button-1--selected.png`: Toggle / segmented control 1 ("Instant notificationsGet"), clicked - `screenshots/c-link-1--rest.png`: Text link 1 ("Personal accountOur sign"), rest - `screenshots/c-link-1--focus.png`: Text link 1 ("Personal accountOur sign"), focus - `screenshots/c-select-1--rest.png`: Select (native) 1 ("Switch to BelgiumSwitch "), rest - `screenshots/c-select-1--focus.png`: Select (native) 1 ("Switch to BelgiumSwitch "), focus - `screenshots/c-select-1--disabled.png`: Select (native) 1 ("Switch to BelgiumSwitch "), disabled - `screenshots/c-tabs-1--rest.png`: Tabs 1 ("Go to slide 1Go to slide"), rest - `screenshots/c-tabs-1--selected.png`: Tabs 1 ("Go to slide 1Go to slide"), another tab selected - `screenshots/c-footer-link-1--rest.png`: Footer link 1 ("Monzo Logo"), rest - `screenshots/c-language-switch-1--rest.png`: Language / region switch 1 ("πŸ‡¬πŸ‡§United Kingdom | Eng"), rest - `screenshots/c-overlay-dialog-1--open.jpg`: Dialog / modal 1 opened by language-switch "πŸ‡¬πŸ‡§United Kingdom | Eng" - `screenshots/c-card-1--rest.png`: Card 1 ("Current accountsFrom joi"), rest - `screenshots/c-card-1--focus.png`: Card 1 ("Current accountsFrom joi"), focus - `screenshots/c-feature-item-1--rest.png`: Feature item (icon + title + text) 1 ("Personal accountOur sign"), rest - `screenshots/c-list-1--rest.png`: Styled list 1 ("Personal accountOur sign"), rest - `screenshots/c-image-1--rest.png`: Image / figure 1, rest - `screenshots/c-video-1--rest.png`: Video / media embed 1, rest - `screenshots/c-button-2--rest.png`: Button 2 ("Open a free Monzo accoun"), rest - `screenshots/c-button-2--hover.png`: Button 2 ("Open a free Monzo accoun"), hover - `screenshots/c-icon-button-2--rest.png`: Icon button 2, rest - `screenshots/c-icon-button-2--focus.png`: Icon button 2, focus - `screenshots/c-toggle-button-2--rest.png`: Toggle / segmented control 2 ("Extra security controlsA"), rest - `screenshots/c-toggle-button-2--hover.png`: Toggle / segmented control 2 ("Extra security controlsA"), hover - `screenshots/c-toggle-button-2--focus.png`: Toggle / segmented control 2 ("Extra security controlsA"), focus - `screenshots/c-toggle-button-2--selected.png`: Toggle / segmented control 2 ("Extra security controlsA"), clicked - `screenshots/c-link-2--rest.png`: Text link 2 ("currency converter"), rest - `screenshots/c-link-2--focus.png`: Text link 2 ("currency converter"), focus - `screenshots/c-nav-link-2--rest.png`: Navigation link 2 ("Business"), rest - `screenshots/c-nav-link-2--hover.png`: Navigation link 2 ("Business"), hover - `screenshots/c-nav-link-2--focus.png`: Navigation link 2 ("Business"), focus - `screenshots/c-menu-button-2--rest.png`: Menu / dropdown trigger 2 ("Personal"), rest - `screenshots/c-menu-button-2--hover.png`: Menu / dropdown trigger 2 ("Personal"), hover - `screenshots/c-menu-button-2--selected.png`: Menu / dropdown trigger 2 ("Personal"), clicked - `screenshots/c-tabs-2--rest.png`: Tabs 2, rest - `screenshots/c-tabs-2--selected.png`: Tabs 2, another tab selected - `screenshots/c-card-2--rest.png`: Card 2, rest - `screenshots/c-button-3--rest.png`: Button 3 ("Learn more"), rest - `screenshots/c-button-3--hover.png`: Button 3 ("Learn more"), hover - `screenshots/c-button-3--focus.png`: Button 3 ("Learn more"), focus - `screenshots/c-button-3--active.png`: Button 3 ("Learn more"), active - `screenshots/c-button-3--disabled.png`: Button 3 ("Learn more"), disabled - `screenshots/c-icon-button-3--rest.png`: Icon button 3, rest - `screenshots/c-link-3--rest.png`: Text link 3 ("PSR's latest APP Scams P"), rest - `screenshots/c-link-3--hover.png`: Text link 3 ("PSR's latest APP Scams P"), hover - `screenshots/c-link-3--focus.png`: Text link 3 ("PSR's latest APP Scams P"), focus - `screenshots/c-link-3--active.png`: Text link 3 ("PSR's latest APP Scams P"), active - `screenshots/c-card-3--rest.png`: Card 3 ("24/7 supportYou can spea"), rest - `screenshots/c-icon-button-4--rest.png`: Icon button 4, rest - `screenshots/c-icon-button-4--focus.png`: Icon button 4, focus - `screenshots/c-icon-button-4--disabled.png`: Icon button 4, disabled - `screenshots/c-card-4--rest.png`: Card 4 ("24/7 supportYou can spea"), rest - `screenshots/c-button-5--rest.png`: Button 5 ("Explore Salary Sorter"), rest - `screenshots/c-button-5--hover.png`: Button 5 ("Explore Salary Sorter"), hover - `screenshots/c-button-5--focus.png`: Button 5 ("Explore Salary Sorter"), focus - `screenshots/c-button-5--active.png`: Button 5 ("Explore Salary Sorter"), active - `screenshots/c-button-5--disabled.png`: Button 5 ("Explore Salary Sorter"), disabled - `screenshots/c-card-5--rest.png`: Card 5 ("Deposit cash and cheques"), rest ## Logo and icon references Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional. ## Colors | Token | Value | Use | | --- | --- | --- | | background | `#ffffff` | Page background | | surface | `#efefef` | Cards, panels, raised or recessed surfaces | | foreground | `#6b747b` | Primary text | | primary | `#091723` | Candidate accent (semantic role inferred): Selected from measured button, link, text, painted-area and theme colors. It is not proof of a filled primary button; follow the observed component recipes. | | 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; verify availability and permission; **Inter** is the suggested stand-in. - **MonzoSansText** for body, label, button: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in. See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias. | Role | Family | Size | Weight | Line height | Tracking | | --- | --- | --- | --- | --- | --- | | headline-display | MonzoSansDisplay | 48.8288px | 800 | 58.5946px | normal | | headline-lg | MonzoSansDisplay | 39.0624px | 800 | 46.8749px | normal | | headline-md | MonzoSansDisplay | 25px | 700 | 35px | normal | | body-md | MonzoSansText | 16px | 400 | 22.4px | normal | | label-md | MonzoSansText | 12.8px | 400 | 17.92px | normal | | button | MonzoSansText | 16px | 400 | 22.4px | normal | Type scale in use: 13px, 16px, 20px, 25px, 31px, 39px, 44px, 49px. Base body size 16px. The hero heading (h1) renders at 48.8288px / 800, start aligned, up to 620px wide. Sample: "Spend your money on life, not your life on money". See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages. ## 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. ### Full inventory `COMPONENTS.md` carries every component kind found on the page (25 of 87 in the checklist, 51 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 44 state changes, 1 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary: | Component | Variants | States measured | Sample | | --- | --- | --- | --- | | Button | outline, ink, outline sm, secondary-with-icon lg, outline, secondary-with-icon lg, ghost lg, ink | hover, focus, active, disabled | "Current accounts" | | Icon button | outline, outline, outline, ghost | hover, focus, active, disabled | | | Toggle / segmented control | ghost, ghost | hover, focus, selected | "Instant notificationsGet notif" | | Text link | plain, underlined, underlined | focus, hover, active | "Personal accountOur signature " | | Select (native) | outlined | focus, disabled | "Switch to BelgiumSwitch to Bul" | | Field label | above | rest only | "Region" | | Header / navbar | default | rest only | "Skip to ContentPersonalCurrent" | | Navigation link | plain, plain | hover, focus | "Mobile plansNew" | | Menu / dropdown trigger | ghost, ghost | hover, open | "Why Monzo?" | | Tabs | plain, plain | selected | "Go to slide 1Go to slide 2Go t" | | Footer link | underlined | rest only | "Monzo Logo" | | Skip link | default | rest only | "Skip to Content" | | Language / region switch | default | open | "πŸ‡¬πŸ‡§United Kingdom | English" | | Banner / announcement bar | subtle-filled | rest only | "You're on the πŸ‡¬πŸ‡§ United King" | | Card | flat-media-top, flat-media-top, flat, filled-media-top, filled-media-top, filled-with-media | focus | "Current accountsFrom joint acc" | | Feature item (icon + title + text) | outlined-interactive | rest only | "Personal accountOur signature " | | Styled list | default, default | rest only | "Personal accountOur signature " | | Image / figure | aspect-1-rounded, aspect-0.5, aspect-1 | rest only | | | Video / media embed | default | rest only | | | Icon | filled-24px | rest only | | Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Button group, Floating action button, Close / dismiss button, Text input, Search field, Textarea, Combobox / custom select, Checkbox, Radio, Switch / toggle, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Help / hint text, Validation error text, Fieldset / form section, Breadcrumb, Pagination, Stepper / progress steps, Sidebar navigation, Footer, Back to top, Social icon links, Theme toggle, Tooltip, Popover, Dropdown menu, Drawer / sheet / off-canvas, Toast / snackbar, Cookie / consent notice, Lightbox / media viewer, Badge / pill / tag, Chip (removable / selectable tag), Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Counter / notification dot, Empty state, Rating / stars, Pricing card / plan, Testimonial / quote card, Stat / metric, List row / menu row, Table, Table row, Accordion / disclosure, Avatar, Avatar stack, Divider, Code block / inline code, Keyboard key, Blockquote, Carousel / slider, Logo strip, Eyebrow / kicker, FAQ block, Call-to-action band, Newsletter / signup form, Search results / listing row, Sticky bar. ## 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 | 9 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 is 16px at the sampled desktop and phone widths. - 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 - Treat the 8px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale. - Use `#091723` where supported by measured component or regional evidence; its accent role is inferred. - 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. - Keep measured shadows on their owning layers. Regional and component recipes take precedence over the site-wide list; do not invent heavier shadows. - Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels. - Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment. - Note: Page background comes from body; large surface colors remain in the palette. - Note: The primary action colour is the ink colour (monochrome palette); chromatic colours appear only as small accents.