M3 brand guidelines
The key brand resources and fundamentals for our company brand. Find logos, colours and typography specs.
Product logos
Primary colours
M3 Blue
#005996 0, 89, 150 96% 59% 4% 17%M3 Mid Blue
#5B80B2 091, 128, 178 69% 46% 10% 0%M3 light Blue
#A2B2D2 162, 178, 210 36% 24% 5% 0%M3 Dark Blue
#172B46 23, 43, 70 95% 81% 45% 46%Light Grey
#f4f5f6 244, 245, 246 3% 2% 2% 0%White
#ffffff 255, 255, 255 0% 0% 0% 0%Usage
We use M3 Blue and M3 Dark Blue in backgrounds and app headers. They may be used together in a single background or as a separating element where required. When you need a single colour to represent the brand, use M3 Blue.
Product colours
M3Pamwin
#54b948 24, 185, 72 69% 0% 100% 0%M3Pamwinlite
#b0bc22 176, 188, 34 23% 0% 100% 17%M3Central
#ed174f 237, 23, 79 0% 100% 62% 0%M3SOR
#0096d6 0, 150, 214 85% 24% 0% 0%Usage
We are moving towards making M3 Brand colours the most prominent, however in cases where the product colours are required, these may be used as highlights or backgrounds, but never as text heading.
Typography
Roboto is the standard typeface for M3 on the web, print, and desktop applications and presentations. You can download the font from here. For emails however, we use Arial / sans-serif.
Extra large heading
font-size: 58px
font-weight: bold
line-height: 1
Large heading
font-size: 48px
font-weight: bold
line-height: 1.25
Normal heading
font-size: 28px
font-weight: bold
line-height: 1.25
Small heading
font-size: 28px
font-weight: bold
line-height: 1.25
Paragraphs
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos aut beatae voluptates magni inventore quae. Qui distinctio perferendis dicta temporibus eveniet voluptatem tempore aspernatur, quas saepe provident sunt maxime odit!
font-size: 16px / 18px
font-weight: 300
line-height: 1.6
margin-bottom: 15px
Lists
The default list for desktop applications should be fine, but make sure to keep the line spacing at 1.6. Additionally, when the list consists of full paragraphs, please separate each paragraph with a margin bottom of 15px.
- 30px
- Lorem ipsum dolor sit
- Lorem ipsum dolor sit
- Lorem ipsum dolor sit
- Lorem ipsum dolor sit
- Lorem ipsum dolor sit
- 30px
font-size: 16px / 18px
font-weight: 300
line-height: 1.6
margin-top: 30px
margin-bottom: 30px
Templates
Available templates for internal M3 use only. Please copy the file path and paste it on an explorer window.
M:\Marketing\Branding and style\M3\Templates\
M:\Marketing\Branding and style\HS\Templates\
(Note this will only work when you are connected to our office network and have access permission to our directories)