Styleguide
MATE Design Manual
V 1.0 | 08.12.2019
Intro
MATE ist wie ein guter Freund, der immer da ist und der alle Bereiche rund um das Gästemanagement nahtlos ineinander greifen lässt. Der flexibel in alle Richtungen denkt. Der sich ans Veranstaltungsdesign anpasst. Der einen Spannungsbogen für die Gäste aufbauen kann. Und der selbstverständlich weiß, dass „nach dem Event“ immer auch „vor dem Event“ ist.
Im neuen MATE-Signetdesign findet sich all das wieder.
Mit seinem farbenfrohen, ineinander verschlungenen, aber doch perfekt ausbalancierten „Infinite Loop“ in M-Form symbolisiert er genau diese Eigenschaften und noch mehr. Mit seinem perfekten Schwung gibt er den neuen MATE-Claim kunstvoll wieder:
Gästemanagement. Einfach gemacht.
Im Corporate Design, der neuen Typografie, Farbgebung, dem neuen Logo und im neuen Stilmittel wird diese Einfachheit weiter getragen. Das lockere, sympathische Design verbindet sich in präziser und professioneller Ausarbeitung mit den MATE-Features und gibt unserer Software eine visuelle Basis, mit der man gerne arbeitet.
Wir freuen uns, wenn euch unser neues Erscheinungsbild so gefällt wie uns!
Logo
Proportionen
Logoanordnung
Es gibt zwei Logo-Anordnungen für verschiedene Anwendungen.
Beide Logos bestehen aus dem MATE-”Loop“ – unserem Signet – und dem Schriftzug. Bitte diese beiden Elemente nicht voneinander trennen oder in der Proportion anpassen.
1. Standard – bevorzugte Version
Querftormatige Anordnung für möglichst alle Anwendungen
2. Kompakt
Hochformatige bis quadratische Anordnung für Anwendungen, in denen das Standardlogo nicht optimal eingesetzt werden kann z. B. quadratische Social-Media-Profilbilder
Logoanwendung auf unterschiedlichen Untergründen
Es gibt drei Logo-Farbversionen für verschiedene Anwendungen.
onlight
Einsatz auf hellem Untergrund
ondark
Einsatz auf dunklem Untergrund
ongreen
Einsatz auf grünem Untergrund
Logo-Download
Farbgebung
Farbsystem mit Primär- und Sekundärfarben
-
#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
Farb-Download
Das ZIP-Archiv enthält sowohl die RGB als auch die CMYK Farben, welche in den Datei-Formaten .ai und .ase vorliegen.
Wenn Du die MATE-Farben in deinen Dateien einsetzen oder an andere Designer weitergeben möchtest, verwenden bitte die Adobe Swatch Exchange-Datei (.ase). Diese kannst Du in Adobe InDesign ebenso wie in Illustrator und Adobe Photoshop importieren.
Stilmittel
Der MATE-Loop kann als grafische Klammer und zur Auflockerung der Formensprache im Format eingesetzt werden. Bitte verwende eine abgeschwächte positive oder negative Variante.
Anwendungsbeispiele
Typografie
Als Hausschrift wird die Rubik verwendet
Die Rubik ist eine serifenlose Schriftfamilie, welche von Philipp Hubert und Sebastian Fischer im Auftrag von Google für das Chrome Cube Lab entworfen wurde. Sie zeichnet sich durch kräftige Proportionen mit abgerundeten Ecken und geringem Strichkontrast aus. Als Bestandteil der Google Fonts Bibliothek ist die Rubik über eine Open Font License frei verfügbar.
Eingesetzte Schriftschnitte
Light
Regular
Medium
Schriftgrößenkanon
Schriftgröße XXL
font-size: 60px | line-height: 1.2 | letter-spacing: 0 | font-weight: 400;
Schriftgröße XL
font-size: 48px | line-height: 1.2 | letter-spacing: 0 | font-weight: 400;
Schriftgröße L
font-size: 38px | line-height: 1.2 | letter-spacing: 0 | 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
font-size: 18 px | line-height: 1.5 | letter-spacing: .125px | font-weight: 400;
Schriftgröße XS
font-size: 16px | line-height: 1.5 | letter-spacing: .125px | font-weight: 400;
Schriftgröße XXS
font-size: 14px | line-height: 1.5 | letter-spacing: .125px | font-weight: 400;
Schriftgröße XXXS
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: 0 | font-weight: 500;
Schriftgröße XL
font-size: 48px | line-height: 1.2 | letter-spacing: 0 | font-weight: 500;
Schriftgröße L
font-size: 38px | line-height: 1.2 | letter-spacing: 0 | font-weight: 500;
Schriftgröße M
font-size: 24px | line-height: 1.5 | letter-spacing: 0 | font-weight: 500;
Schriftgröße Basis
font-size: 20px | line-height: 1.6 | letter-spacing: 0 | font-weight: 500;
Schriftgröße S
font-size: 18 px | line-height: 1.5 | letter-spacing: .125px | font-weight: 500;
Schriftgröße XS
font-size: 16px | line-height: 1.5 | letter-spacing: .125px | font-weight: 500;
Schriftgröße XXS
font-size: 14px | line-height: 1.5 | letter-spacing: .125px | font-weight: 500;
Schriftgröße XXXS
font-size: 12px | line-height: 1.5 | letter-spacing: .125px | font-weight: 500;
