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!

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;

Schrift-Download