Monzo Brand Style Guide 2022 / Guideline

UI palette hex and color codes

Complete UI palette with all color values including feedback states, feedback states light and dark mode, complementary tones, and accent colors for digital interfaces

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