Styleguide
MATE Design Manual
V 1.0 | 08.12.2019
Intro
MATE is like a good friend who is always there and who allows all areas of guest management to interlock seamlessly. Who thinks flexibly in all directions. Who adapts to the event design. Who can build up an exciting arc for the guests. And who knows of course that "after the event" is always "before the event".
All this is reflected in the new MATE logo design.
With its colourful, intertwined but perfectly balanced "Infinite Loop" in M-shape, it symbolises exactly these characteristics and more. With its perfect swing, it artfully reproduces the new MATE claim:
Guest management. Made simple.
This simplicity is carried further in the corporate design, the new typography, colour scheme, the new logo and the new stylistic device. The casual, appealing design is combined with the MATE features in a precise and professional elaboration and gives our software a visual basis that people like to work with.
We would be pleased if you like our new appearance as much as we do!


Logo
Proportions


Logo arrangement
There are two logo arrangements for different applications.
Both logos consist of the MATE-"Loop" - our signet - and the lettering. Please do not separate these two elements or adjust their proportions.
1. Standard - preferred version
Landscape format arrangement for as many applications as possible


2. Compact
Portrait to square arrangement for applications where the standard logo cannot be used optimally e.g. square social media profile images


Logo application on different backgrounds
There are three logo colour versions for different applications.
onlight
Use on light-coloured surfaces


ondark
Use on dark background


ongreen
Use on green background


Logo-Download
Colour scheme
Colour system with primary and secondary colours
-
#fff4e0
-
#ffd48b
-
#ffc258
-
MATE
Orange
HEX
#ffaf25
RGB
255/175/37
CMYK
0/38/90/0
-
#f19900
-
#be7800
-
#fcf9cf
-
#f8f29f
-
#f5ec70
-
MATE
Yellow
HEX
#f2e640
RGB
242/230/64
CMYK
9/0/82/0
-
#efe010
-
#cfc20e
-
#F2FAE9
-
#D8F0BD
-
#AADC70
-
MATE
Light Green
HEX
#8acf39
RGB
138/207/57
CMYK
55/0/95/0
-
#679E26
-
#436719
-
#E5F7E7
-
#B1E7B9
-
#71D27E
-
MATE
Green
HEX
#39b54a
RGB
57/181/74
CMYK
74/0/91/0
-
#2D9C3B
-
#268232
-
#DCF7EF
-
#B2EDDC
-
#7BE1C3
-
MATE
Ocean Green
HEX
#44d4aa
RGB
68/212/170
CMYK
60/0/50/0
-
#28AC86
-
#1B755B
-
#E9F5F9
-
#B4DCEB
-
#70BEDA
-
MATE
Blue
HEX
#339cc2
RGB
51/156/194
CMYK
70/15/10/10
-
#287C9A
-
#1A5064
-
#F3F3F3
-
#B8B8B8
-
#747474
-
MATE
Anthracite
HEX
#303030
RGB
48/48/48
CMYK
70/60/60/65
-
#ffb7b7
-
#ff7373
-
#ff4040
-
MATE
Alert Red
HEX
#ff0d0d
RGB
255/13/13
Nur digital
einsetzbar!
-
#d90000
-
#a60000
Colour-Download
The ZIP archive contains both RGB and CMYK colours, which are available in the file formats .ai and .ase.
If you want to use the MATE colours in your files or pass them on to other designers, please use the Adobe Swatch Exchange file (.ase). You can import this file into Adobe InDesign as well as into Illustrator and Adobe Photoshop.
Stylistic device
The MATE-Loop can be used as a graphic bracket and to loosen up the formal language in the format. Please use a weakened positive or negative variant.
Examples of use






Typografie
Als Hausschrift wird die Rubik verwendet
Rubik is a sans serif typeface family designed by Philipp Hubert and Sebastian Fischer on behalf of Google for the Chrome Cube Lab. It is characterised by strong proportions with rounded corners and low stroke contrast. As part of the Google Fonts Library, the Rubik is freely available under an Open Font License.
Used typefaces
Light
Regular
Medium
Bold
Font size canon
Schriftgröße XXL
font-size: 60px | line-height: 1.2 | letter-spacing: -.5px | font-weight: 400;
Schriftgröße XL
font-size: 48px | line-height: 1.2 | letter-spacing: -.25px | font-weight: 400;
Schriftgröße L
font-size: 34px | line-height: 1.2 | letter-spacing: -.25px | font-weight: 400;
Schriftgröße M
font-size: 24px | line-height: 1.5 | letter-spacing: 0 | font-weight: 400;
Schriftgröße Basis
font-size: 20px | line-height: 1.6 | letter-spacing: 0 | font-weight: 400;
Schriftgröße S
17 px | line-height: 1.6 | letter-spacing: .125px | font-weight: 400;
Schriftgröße XS
font-size: 14px | line-height: 1.5 | letter-spacing: .125px | font-weight: 400;
Schriftgröße XXS
font-size: 12px | line-height: 1.5 | letter-spacing: .125px | font-weight: 400;
Schriftgröße XXL
font-size: 60px | line-height: 1.2 | letter-spacing: -.5px | font-weight: 400;
Schriftgröße XL
font-size: 48px | line-height: 1.2 | letter-spacing: -.25px | font-weight: 400;
Schriftgröße L
font-size: 34px | line-height: 1.2 | letter-spacing: -.25px | font-weight: 400;
Schriftgröße M
font-size: 24px | line-height: 1.5 | letter-spacing: 0 | font-weight: 400;
Schriftgröße Basis
font-size: 20px | line-height: 1.6 | letter-spacing: 0 | font-weight: 400;
Schriftgröße S
17 px | line-height: 1.6 | letter-spacing: .125px | font-weight: 400;
Schriftgröße XS
font-size: 14px | line-height: 1.5 | letter-spacing: .125px | font-weight: 400;
Schriftgröße XXS
font-size: 12px | line-height: 1.5 | letter-spacing: .125px | font-weight: 400;