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!

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;

Font download