Monzo Brand Style Guide 2022
Brand style guide for Monzo, the UK digital bank, released August 2022.
Show all
The 82 slides cover the hot-coral-first logo system with M-icon variants, a primary palette of hot coral, soft white, and deep navy plus six secondary colors, two typefaces (Oldschool Grotesk for headlines, Monzo Sans for UI), art direction rules for authentic lifestyle photography, and product mockup standards for light and dark mode.
- Slide 1: Monzo Style Guide August 2022
- Slide 2: Contents outline ten sections: introduction, logo, color, typefaces, art direction
- Slide 3: Guide Introduction and Purpose
- Slide 4: Guide objectives for Monzo brand
- Slide 5: Logo System and Wordmark
- Slide 6: Monzo wordmark as primary logo asset
- Slide 7: The wordmark comes in three color variations: hot coral
- Slide 8: Wordmark usage and spacing
- Slide 9: The Monzo wordmark can appear in corners or central positions
- Slide 10: App badge and M icon for small spaces
- Slide 11: M icon usage in specific contexts
- Slide 12: Logo dos and don'ts
- Slide 13: Color Palette System Overview
- Slide 14: Hot coral as primary brand color
- Slide 15: Hot coral brand meaning and application
- Slide 16: Primary Color Palette Specifications
- Slide 17: Hot Coral Color Combinations
- Slide 18: Considerate Color Use Principles
- Slide 19: Primary Color Pairings with Contrast
- Slide 20: Secondary palette for visual variation
- Slide 21: Color palette combinations in use
- Slide 22: First Impression Color Application
- Slide 23: Secondary impression: extended color palette
- Slide 24: UI palette for digital product only
- Slide 25: UI palette hex and color codes
- Slide 26: Feedback states for interactive elements
- Slide 27: Feedback states in light mode application
- Slide 28: Feedback states in dark mode application
- Slide 29: Guidelines restrict using colors that suggest different branding, copying colors
- Slide 30: Typeface System and Brand Voice
- Slide 31: Typeface System Core Philosophy
- Slide 32: Hero and Functional Typeface System
- Slide 33: Oldschool Grotesk hero typeface
- Slide 34: Functional Typeface for Interface
- Slide 35: Typeface Hierarchy and Scale
- Slide 36: Guidelines restrict using automated tools for text, non-standard typefaces, improper
- Slide 37: Typeface sizing and weight guidance
- Slide 38: Typeface weights and styles
- Slide 39: Typeface examples in context
- Slide 40: Typeface scale and sizing
- Slide 41: Art Direction and Imagery
- Slide 42: Lifestyle imagery in brand communications
- Slide 43: Photography style and tone
- Slide 44: Authentic and relatable photography
- Slide 45: Photography centered on people and real human moments creates connection
- Slide 46: Diversity and representation in imagery
- Slide 47: Visual quality and production standards
- Slide 48: Examples demonstrate how approved imagery applies across website, marketing
- Slide 49: Photography Framing and Perspective
- Slide 50: Special treatment technique adds brightness and vibrancy to photography using
- Slide 51: Example photographs demonstrate approved style and tone for brand communications
- Slide 52: Photography Tone and Voice
- Slide 53: Visual Consistency in Photography
- Slide 54: Real-world examples demonstrate brand photography applied across marketing, digital
- Slide 55: Brand Expression Through Imagery
- Slide 56: Guidelines restrict using imagery misaligned with brand values, unvetted photos
- Slide 57: Product Mockups and Presentation
- Slide 58: Overview of product design system elements, components, and patterns used
- Slide 59: Example product screens showing UI design principles and brand application
- Slide 60: Grid System and Spacing
- Slide 61: Product Navigation and Flow
- Slide 62: Account interface mockup demonstrating primary features, information architecture, and interaction
- Slide 63: Transaction detail screen mockup showing information architecture, content organization
- Slide 64: Mockups of additional product features demonstrating variety of screen types
- Slide 65: How brand imagery integrates within product visualization, marketing materials
- Slide 66: Examples demonstrate brand application across marketing materials, product interfaces
- Slide 67: Brand Elements in Product
- Slide 68: Consistency Across All Channels
- Slide 69: Product Within Brand System
- Slide 70: Spacing and alignment guidelines ensure consistent product design structure
- Slide 71: Identity overview section summarizes complete brand system, key elements
- Slide 72: Examples demonstrate brand application across various customer touchpoints and communication
- Slide 73: Consistent brand identity expression across diverse applications, channels, and contexts
- Slide 74: Card and Packaging Design
- Slide 75: Mockups of marketing and promotional materials showing consistent brand identity
- Slide 76: Examples demonstrate brand application and presence across digital communication channels
- Slide 77: Comprehensive view of brand identity applied across physical and digital
- Slide 78: Complete brand ecosystem showing all system elements working together cohesively
- Slide 79: Key Brand Standards Summary
- Slide 80: Brand Codes Reference Guide
- Slide 81: Brand Codes Visual Reference
- Slide 82: Style Guide Complete Reference
Related decks
Fresh decks, weekly
A roundup of what's new in the gallery
