Brand Guidelines

Version from October 14th, 2021

Updated 2022/02/10

Updates

Update on February 2nd, 2022 at:
– Partners red color (adjustments of Pantone Coated & Uncoated codes)
– Light blue color (adjustments of RGB a HEX codes)

Updates on October 14th, 2021 at:
– Partners silver color (adjustments of RGB & HEX & Pantone Uncoated codes)
– sub-brand colors (adjustments of CMYK & RGB & HEX codes)

Updated 2021/09/24

Introduction

How to use the manual

This is the visual identity manual for the Partners brand. It aims to unify the brand’s visual communication in all online and offline channels. It is a guide used by both the staff and the external contractors during the creation of visual materials, while it is essential that it is strictly followed by all those involved in the preparation of visual materials. 

The manual does not answer all questions about communication, but it introduces the rules for working with the brand’s basic visual elements. Just like the brand, the manual itself needs to be updated regularly and adapted to current needs. That is the only way the manual can fulfil its function and assist in the process of creating new formats or adapt existing ones over the long term.

The manual was prepared by Milk Studio.

Basic brand elements

These define, represent and make the brand not only recognizable but also unmistakable. The following rules apply to the use of the basic brand elements:

  • We use them whenever possible.
  • We use them only in the form defined below.
  • We always use them together. We place at least three elements in each format.
  • We use them where appropriate together with additional graphic elements.

Logo
The logo is the basic brand identification element. We use it wherever possible, in the prescribed form.

Basic colour scheme
The basic colour scheme enables quick brand recognition and it complements the logo.

Font
In addition to the logo and the colour scheme, the font is important for the brand’s identification, too. We use it wherever possible, in a uniform form.

Complementary brand elements

Complementary elements expand the palette of basic brand elements and help make the Partners brand even more recognizable.

Frame – the main graphic element
This element keeps visual communication consistent across all formats of different sizes – thanks to its modularity.

Labels – secondary graphic elements
Labels highlight the desired text information.

Modular layout
This means composing the format from graphic elements (frame, photo/full-colour object) that are modular and have a precisely specified character.

Updated 2022/02/10

Colours

The use of colours is an important aspect of Partners’ identity. The basic colours are Partners red, Partners silver, Partners white, Partners grey and gradient variations thereof.

Pantone® direct colours as well as CMYK process colours can be used for printing. Online and web interfaces are specified by RGB and HTML specifications to provide a consistent look.

Basic colours

The basic colour scheme serves for quick brand recognition and complements the logo.

Partners red
RGB — 171 5 52
CMYK — 24 100 72 15
HEX — #AB0534
PANTONE — 1945 U
PANTONE — 194 C

Partners silver
RGB — 152 159 167
CMYK — 44 32 28 0
HEX — #989FA7
PANTONE — 429 U
PANTONE — 429 C

Partners white
RGB — 255 255 255
CMYK — 0 0 0 0
HEX — #FFFFFF
PANTONE — White

Light red
RGB — 205 109 128
CMYK — 18 68 32 0
HEX — #CD6D80
PANTONE — 204 U
PANTONE — 204 C

Partners red
171 5 52
24 100 72 15
#AB0534
PANTONE — 1945 U
PANTONE — 194 C

Partners grey
RGB — 77 77 77
CMYK — 67 59 55 37
HEX — #4D4D4D
PANTONE — 426 U
PANTONE — 425 C

Light grey
RGB — 236 237 237
CMYK — 9 6 6 0
HEX — #ECEDED
PANTONE — 427 U
PANTONE — 427 C

Partners silver
152 159 167
44 32 28 0
#989FA7
PANTONE — 429 U
PANTONE — 429 C

Partners light grey
RGB — 236 237 237
CMYK — 9 6 6 0
HEX — #ECEDED
PANTONE — 427 U
PANTONE — 427 C

Additional colours

The additional colour scheme does not substitute the basic brand colour scheme. We use it to highlight any necessary information regarding complementary graphic elements.

Dark blue
RGB — 0 48 73
CMYK — 97 77 42 44
HEX — #00349
PANTONE — 540 U
PANTONE — 534 C

Light yellow
RGB — 255 243 176
CMYK — 1 2 40 0
HEX — #FFF3B0
PANTONE — 7499 U
PANTONE — 7499 C

Light blue
RGB — 193 218 231
CMYK — 23 6 5 0
HEX — #C1DAE7
PANTONE — 649 U
PANTONE — 649 C

Light green
RGB — 203 217 196
CMYK — 25 7 26 0
HEX — #CBD9C4
PANTONE — 621 U
PANTONE — 621 C

Colour combinations

Updated 2021/10/07

Font

The font is one of the main brand elements. In Partners’ brand communication the font conveys a cohesive and consistent message. That’s why we need to use designed fonts in a consistent form whenever possible.

To maintain consistent visual communication, we recommend using only the typefaces specified below from the following font families.

Basic font

Graphik is the brand’s basic font. We use it primarily across all communication channels. The font is licensed and can be downloaded from the link below.

Font hierarchy

Below are the recommended font sizes for common formats (A4 size document, presentation headlines and main headlines on the web). However, depending on the format or information used, the sizes can be adjusted as necessary.

Príklad hierarchie písma

Alternative font

If the Graphik primary font cannot be used for any reason, we use the Arial alternative system font (e.g., when sending open Word files, Powerpoint presentations, Google documents, email signatures). The alternative font does not fully replace the primary font. Therefore, we use the Graphik basic font whenever possible.

Updated 2021/09/15

Visual style

The visual style is a modular branding element that can be used in a variety of ways.

An overview of additional graphic elements – 1) frame, 2) tag, label, 3) modular layout

Basic grid

The grid system maintains a consistent visual identity of the Partners brand. Our grid consists of six columns. We recommend sticking to this grid setup in case of minor changes to the format proportions. If the format changes significantly we recommend adding extra grid units. The grid helps us to define the system of working with a background, photography and placement of the text on the format.

Margins

We use the format as the main measuring tool to calculate the margin width. We recommend starting with the shorter side of the format and defining 1/20th of it, which will equal the thickness of the frame we are working with. The margin thickness equates to 1.5x (where ‘x’ represents the thickness of the frame), which should be uniform on all sides of the format.

When setting the margin, we need to take into consideration where we want to use the created visual (graphic) – online/print/close to the viewer/far from the viewer – and, depending on these factors, we will set the format margin correctly.

Frame – construction

In order to have the frame depicted correctly, it is important to follow the rules specified in this section thoroughly and only use the frame from the Downloads section.

The basic frame shape is precisely defined – the thickness of both horizontal and vertical frame arms is marked as ‘X’. The line (stroke) we use to construct the frame is always finished with a curve and aligned to the centre. The frame corner bend is set to 20 px by default. In normal formats, we indent the bracket from the format margin by 1.5 times the ‘X’ height.

Indenting the frame from the margin

Always place the frame 1.5 times the ‘X’ frame thickness from the format margin. The interruption in the frame line is always defined as 3X and it can be placed in the top left corner or the bottom right corner, depending on the needs of the particular layout.

Frame thickness

The frame thickness is marked as X. Depending on the type of medium, we use one of the three basic X thicknesses. Below is the list of three formats with the corresponding X thickness

1. Small formats
Small banners (300×300, 120×600, etc.), social media posts and smaller ad formats.

2. Basic formats
A6 to A4+ prints, web landing pages, presentations and large online banners.

3. Large formats
A3+ prints and larger, rollups, billboards, etc.

Frame – shape scaling/modularity

We do not scale the frame proportionally in the format. We use a uniform arm thickness and maintain the proportions of the frame bend.

Scaling of the frame

Frame and layout

The following rules apply to placing the frame and logo on the format:

  • The logo height equals twice the thickness of the frame.
  • We always place the logo in the top right corner or bottom right corner so that it does not interfere with the frame itself.
The frame thickness equates to half the height of the logo
Example of the logo positioning in relation to the frame
Example of the logo positioning in relation to the frame

Use of frame and photo

We place the photo in complementary shapes that we use to compose the layout. The following rules apply:

  • The width of the gap between the shape in which the photo is placed and the frame equals the frame thickness.
  • The bend of the additional shape’s corners always equals the bend of the frame (20px).
  • In specific cases, we can place the photo under the frame on the entire format’s surface

Use of frame and text

Always centre align the headline and place it in the centre of the frame. Additional text is placed in tags and labels. Text size is further defined in the Font section.

Use of frame and position of tag and label

We place additional texts or texts that we need to highlight into two complementary shapes:

  1. The tag – can be used in two ways, either directly on the frame or in a teardrop, which we shape by extending and curving the frame line. We use the tag as part of campaign communication.
  2. Label – we place it in 4 corners of the frame in a complementary colour scheme defined in the Colour scheme section

Layout composition and modularity

Since the visual system we work with is modular, we can create many layout versions. Below are examples of several different possible compositions and combinations. When creating the layouts, it is important to keep in mind the rules for working with the frame and other graphic elements presented in this section of the design manual.

Updated 2021/10/03

Examples of using the visual style

Online

Social media

Profile pictures

Sample of Facebook profile picture
Sample of LinkedIN profile picture

Social media posts

Sample square format post
Sample square format post

Sample square format post
Sample square format post
Sample square format post

Web

Sample application of visual identity in a web interface (header image)
Sample application of visual identity on a print medium – portrait format
Sample application of visual identity on a print medium – portrait format
Sample application of visual identity on a print medium – landscape format

Roll-up

Sample application of roll-up company communication

Company communication

Business card

Sample application of visual identity on a business card with more information (left) and less information (right)

Email signature

Headed paper

Sample application of visual identity on headed paper

Presentation

Sample application of visual identity in a presentation

Envelope

Sample application of visual identity on an envelope

Updated 2021/09/10

Advertising campaigns

Creation of campaign visuals

Campaign visuals consist of three elements:

  1. Headline – it must be clear and understandable, and not too long
  2. Signature – each visual must have the PARTNERS logo clearly placed in a larger size than defined in normal brand communication
  3. Metaphor (illustrated idea) – the metaphor must be directly related to the communicated text and subtly accentuate it; it can be an illustration or a photograph. It is not a mandatory element in campaign communication visuals.

We apply the following rules when creating the campaign visuals:

  • Logo size – we adjust the logo size according to the size of the medium on which the visual will be communicated. For portrait format citylights, the logo may extend beyond half the width of the format. For billboards and larger landscape formats, the logo is smaller than half the length of the format. If sub-brand logos are used, the size needs to be visually balanced as the underlying square looks visually heavier. In such case smaller versions of the logotypes (see examples) should be used.
  • Layout – the composition is the same as in brand communication.
  • Photography – if a photograph is used, make sure that its composition is clean and does not contain too many meanings. The content should metaphorically refer to the main message of the campaign.
  • Illustration – its thickness and strokes follow the principles defined in the Frame Construction section. It is a loose continuation of it. A simple illustrative style based on icon aesthetics communicates and supports the campaign’s message.

We do not recommend using more than three graphic elements at a time in advertising visuals.

Sample campaign visuals

Note: The photos and texts shown are illustrative.

Print

Sample campaign communication in citylight
Sample campaign communication in billboard

Online

The same rules apply to digital advertising as well as to print advertising.

Sample campaign communication in social media posts
Sample campaign communication in web banners

Updated 2021/12/06

Download

Basic logo variants

Font

Additional graphics

Adobe Illustrator file with three basic frame sizes.

Adobe Illustrator file with basic frame sizes.