Skip to content
  • Home
  • Info
Decks Slides Marketplace

Monzo Brand Style Guide 2022 / Guideline

Feedback states for interactive elements

Button feedback states showing action, title, and hover states on light and dark modes to maintain AA contrast compliance above 18pt minimum

Slide 26 of 82

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

1/82

Deck.gallery

Curated by Muharrem Senyil

© 2026