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