Inspiration by VASA Works
Get started

Monzo Brand Style Guide 2022

An 82-slide Monzo brand style guide built on hot coral, with oversized grotesque headlines, pale-mint section dividers, and real product mockups demonstrating every logo, colour and usage rule.

82 slides · Guideline

View deck overview
Monzo Style Guide cover, minimal, editorial, vibrant
Cover
Monzo contents page, dark-mode, minimal, dark
Contents
Section 1 Introduction divider, minimal, editorial, pastel
Section
Style guide objectives cards, minimal, light-mode, light
Vision
Section 2 Our logo divider, minimal, editorial, pastel
Section
Wordmark hero with card, minimal, light-mode, light
Logo Usage
Wordmark colour versions, minimal, light-mode, light
Logo Usage
Wordmark clear space and minimum size, minimal, light-mode, light
Logo Usage
Wordmark position guides, minimal, light-mode, light
Logo Usage
App badge and M icon, minimal, light-mode, light
Logo Usage
M icon usage cases, minimal, light-mode, light
Logo Usage
Logo things to avoid, minimal, light-mode, light
Logo Usage
Section 3 Our colour divider, minimal, editorial, pastel
Section
Hot coral reveal, minimal, editorial, vibrant
Color Palette
Hot coral meaning and values, minimal, editorial, vibrant
Color Palette
Primary palette three-panel, minimal, swiss, vibrant
Color Palette
Using hot coral combinations, dark-mode, minimal, dark
Color Palette
Being considerate with colour, dark-mode, minimal, dark
Color Palette
Monzo primary colour pairings, dark-mode, minimal, dark
Color Palette
Monzo secondary palette swatches, dark-mode, minimal, dark
Color Palette
Monzo using colour and logo, light-mode, minimal, light
Logo Usage
Monzo first impression website mockup, light-mode, minimal, earthy
Mockup
Monzo secondary impression mockup, light-mode, minimal, earthy
Mockup
Monzo colour combinations grid, dark-mode, minimal, dark
Color Palette
Monzo UI palette with hex codes, minimal, technical, vibrant
Color Palette
Monzo feedback states intro, minimal, corporate-clean, light
Section
Monzo feedback states light mode, minimal, corporate-clean, vibrant
Screenshot
Monzo feedback states dark mode, minimal, corporate-clean, vibrant
Screenshot
Monzo colour things to avoid, light-mode, minimal, light
Logo Usage
Monzo typography section divider, minimal, swiss, pastel
Section
Monzo typography philosophy statement, minimal, light-mode, vibrant
Statement
Monzo hero and functional typefaces, minimal, light-mode, pastel
Typography
Monzo Oldschool Grotesk specimen, minimal, swiss, vibrant
Typography
Monzo hero typeface in use, light-mode, minimal, light
Typography
Monzo Monzo Sans specimen, minimal, swiss, neon
Typography
Monzo Sans weights and hierarchy, light-mode, minimal, light
Typography
Type and data card showcase, dark-mode, minimal, dark
Typography
Type hierarchy specimen ladder, dark-mode, minimal, dark
Typography
Tonal flex expressive to functional, light-mode, minimal, light
Typography
Typography things to avoid grid, light-mode, minimal, light
Typography
Art direction section divider, minimal, editorial, vibrant
Section
Art direction statement on coral, minimal, editorial, vibrant
Statement
Brighter imagery type over photo, photographic, editorial, vibrant
Imagery
Lifestyle versus product diptych, photographic, minimal, vibrant
Imagery
Lifestyle highlighted product dimmed, photographic, minimal, vibrant
Imagery
Lifestyle photography mosaic wall, photographic, editorial, light
Imagery
Lifestyle principles three-up, photographic, editorial, light
Imagery
Monzo magic photo treatment steps, photographic, light-mode, light
Process
Monzo magic step two highlighted, photographic, light-mode, light
Process
Monzo magic step three highlighted, photographic, light-mode, light
Process
Monzo magic step four highlighted, photographic, light-mode, light
Process
Monzo magic step five highlighted, photographic, light-mode, light
Process
Product highlighted lifestyle dimmed, photographic, minimal, vibrant
Imagery
Product photography mosaic wall, photographic, editorial, light
Imagery
Monzo art direction product principles, editorial, minimal, light
Framework
Monzo art direction things to avoid, editorial, minimal, light
Imagery
Monzo product visualisation section divider, minimal, editorial, light
Section
Monzo product visualisation intro statement, minimal, editorial, vibrant
Statement
Monzo device and card visualisation, minimal, editorial, light
Mockup
Monzo shadow on colour spec, minimal, technical, dark
Layout
Monzo product visualisation in use, minimal, editorial, dark
Mockup
Monzo card render, minimal, light-mode, pastel
Product Shot
Monzo UI features abstraction levels, minimal, editorial, light
Framework
Monzo UI features no abstraction, minimal, editorial, vibrant
Mockup
Monzo using no abstraction elements, minimal, editorial, dark
Mockup
Monzo UI features focused information, minimal, editorial, dark
Mockup
Monzo UI features exaggerated story, minimal, editorial, dark
Mockup
Monzo using exaggerated story elements pink, minimal, editorial, dark
Mockup
Monzo using exaggerated story elements teal, minimal, editorial, dark
Mockup
Monzo product visualisation things to avoid, minimal, editorial, light
Layout
Monzo identity overview section divider, minimal, editorial, light
Section
Monzo banking made easy applied example, minimal, editorial, vibrant
Imagery
Monzo brand expression: Split the bill lifestyle scene, minimal, light-mode, light
Imagery
Monzo brand expression: social ad units, dark-mode, minimal, dark
Social
Monzo website hero in device mockup, dark-mode, minimal, dark
Mockup
Monzo website scroll: download and Hot Coral card, dark-mode, minimal, dark
Mockup
Monzo website scroll: Hot Coral Card feature band, dark-mode, minimal, dark
Mockup
Monzo website scroll: account cards and coral footer, dark-mode, minimal, dark
Mockup
Monzo app store screens: four colored cards, dark-mode, minimal, dark
Screenshot
Monzo Brand codes overview grid, minimal, light-mode, light
Brand Elements
Monzo brand ecosystem mosaic, minimal, maximalist, vibrant
Brand Elements
Monzo closing logo on hot coral, minimal, light-mode, vibrant
Closing