brand guidelines - rein medical · 27 idphoto brand guidelines — iconography • by epoint 4...

Brand Guidelines

2

Table of Contents1 Logo 5

1.1 Primary logo application 6

1.2 Secondary logo application 7

1.3 White space & minimum size 8

1.4 Incorrect usage of the logo 9

2 Color palette 11

2.1 Primary color 12

2.2 Secondary color 13

2.3 Tertiary colors 14

2.4 Success, error and warning 15

2.5 Color usage examples 16

2.6 Incorrect color usage 17

3 Typography 19

3.1 Primary typeface 20

3.2 Font weights 21

3.3 Typography rules 22

4 Iconography 27

4.1 Material Icons 28

4.2 Icon sizes 29

5 Imagery 31

5.1 Photography style 32

5.2 Photography examples 33

5.3 Image icons 34

5.4 Image icons examples 35

5.5 Graphics 36

5.6 Graphics examples 37

6 Web elements 39

6.1 Buttons 40

6.2 Button types 41

6.3 Button states 42

6.4 Buttons with icons 43

6.5 Inputs 44

7 Stationary 47

7.1 Letterhead, Invoice & Delivery Note 48

3 Idphoto Brand Guidelines

7.2 Business Cards 52

5 Idphoto Brand Guidelines — Logo • by epoint

1 LogoThe idphoto logo represents the backbone of our brand and it must be treated accordingly. Please follow these rules when using our logo.

6

1.1 Primary logo applicationThe primary logo application uses 2 main versions of the logo.All source files can be found in the brand repository.

Please use this logo only on the light colors of our brand or light images.

Please use this logo only on the dark colors of our brand or dark images.

Primary logo Primary logo - inverted

https://projects.invisionapp.com/boards/UH3QDW2KG7F/

7 Idphoto Brand Guidelines — Logo

1.2 Secondary logo applicationThe secondary logo application uses 2 monochromatic versions of the logo.All source files can be found in the brand repository.

Please use this logo only on the light colors of our brand or light images.

Please use this logo only on the dark colors of our brand or dark images.

Black logo White logo

8

1.3 White space & minimum size

The white space represents the space between our logo and other elements on the page. Because the logo can be smaller or bigger we use the space defined by the to letters "id" in order to define the white space.

The minimum size represents the smallest size to which the logo can be resized. The size is defined by the height of the logo and has two usage options: Print and Web.

5mm 20px

White space Minimum size

Print Web

9 Idphoto Brand Guidelines — Logo

The id company

1.4 Incorrect usage of the logo

Do not distort the proportions of the logo in any way.

Do not change the colors of the logo with other colors other than the ones in the brand guidelines.

Do not outline the logo. Do not rearrange the logo elements/letters.

Do not use the logo on other colors than the ones specified in the brand guidelines.

Do not use the logo on very heavy or contrasting patterns.

Do not use the logo on very heavy or contrasting images.

Do not add tag-lines to the logo. Do not cut the logo if it is not used as a graphic element.

11 Idphoto Brand Guidelines — Color palette • by epoint

2 Color paletteColor is an integral part of our brand identity. Consistent use of the color palette will not only reinforce the cohesiveness of he brand, but also serves a psychological purpose by communicating a certain feeling to our audience.

12

2.1 Primary colorOur brand has as primary color “blue“. And we defined its darker value and lighter value in order to accommodate all possible cases in which the color can be used.

Primary Light

Dodger Blue

CMYK: 100, 0, 0, 20

RGB: 55, 114, 225

HEX: #3772FF

Primary Dark

Jacksons Blue

CMYK: 100, 99, 5, 2

RGB: 30, 36, 146

HEX: #1E2492

Primary

Tory Blue

CMYK: 95, 84, 0, 0

RGB: 13, 64, 176

HEX: #0D40B0

13 Idphoto Brand Guidelines — Color palette

2.2 Secondary colorIn order for our primary color to be complemented we defined “Shamrock“ green as our brands secondary color. As in the case of the primary color, we also defined a lighter value for our secondary color. Please note that the secondary color is used as a accent color and should be used, in layouts, with moderation in order to put emphasis on certain elements/texts.

Secondary Light

Spray

CMYK: 48, 0, 18, 0

RGB: 84, 242, 242

HEX: #54F2F2

Secondary

Shamrock

CMYK: 62, 0, 59, 0

RGB: 31, 220, 151

HEX: #3DDC97

14

2.3 Tertiary colorsIf the primary and secondary colors are the engine of our brand color palette than the tertiary colors represent the fuel. These colors fill most of our layouts and are a key element in creating them –either for web or print– in such a way that the viewer has time to relax his eyes and also be comfortable to read and view our materials. In our brand we don’t use black this is replaced with the “T 90“ tertiary color, in order to have a more pleasant experience when reading/viewing our brand materials. Black creates a strong contrast with lighter colors and we don’t want that.

T 60

Slate Gray

CMYK: 57, 40, 32, 3

RGB: 120, 136, 150

HEX: #788896

T 45

Mystic

CMYK: 11, 5, 3, 0

RGB: 223, 231, 237

HEX: #DFE7ED

T 15

Alice Blue

CMYK: 2, 0, 0, 0

RGB: 247, 252, 255

HEX: #F7FCFF

T 0

White

CMYK: 0, 0, 0, 0

RGB: 255, 255, 225

HEX: #FFFFFF

T 75

Fiord

CMYK: 74, 57, 51, 46

RGB: 75, 92, 107

HEX: #4B5C6B

T 90

Pickled Bluewood

CMYK: 83, 68, 51, 46

RGB: 41, 56, 70

HEX: #293846


Error

Bittersweet

RGB: 255, 102, 102

HEX: #FF6666

Warning

Tulip Tree

RGB: 234, 196, 53

HEX: #EAC435

Success

Lima

RGB: 88, 195, 34

HEX: #58C322

2.4 Success, error and warningOur brand is mainly online, thus we have prepared the 3 colors that are used for system messages. Please take the time to add these colors in the system in order to have a good balance with the rest of the palette and also to have a clear separation between the Secondary color and the Success color.

16

2.5 Color usage examplesFor a good balance of color we recommend to use these examples of how much quantity of color is used in an layout.

A good tool to check you layouts can be found at this link.

Main/important page65% T050% Primary Color9% T908% T45

Basic page/layout58% T024% T908% T757% Primary Color2% Primary Color Light

Key visual/poster55% Primary Color28% Primary Color Dark7% T906% T455% Primary Color Light

Graphics75% T013% T456% Primary Color Light5% Primary Color2% Secondary Color

http://mkweb.bcgsc.ca/color-summarizer


2.6 Incorrect color usagePlease never use these combinations in any material/layout.

T T T T T TSuccess Color & Secondary Color

Error Color & Secondary Color

T90 & Primary Color Secondary Color & Primary Color Light

Success Color & Warning/Error Colors

Primary Color Light & Warning/Error/Success Colors

19 Idphoto Brand Guidelines — Typography • by epoint

3 TypographyTypography is a powerful brand tool when used consistently. The chosen typeface best represents the bold and professional feel and approach of the brand and should be used across print1 & web applications.

1 Regarding print materials, we are aware that some materials need to be edited by customers, because of that the brand will use “Arial“ as the main typeface. By using Arial there will be no problems for the customer to edit/read the document. The rules for typography will stay the same, just the typefaces is changed.

20

3.1 Primary typeface

MuliSans-serif typeface

abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWX1234567890 !?’”;:,./[]()*|äöüẞ

Meet “Muli”, a sans-serif font from Google fonts. Muli is perfect for our needs having the characteristics that best resemble our brand goals and statement. Although it is a sans-serif typeface, it has small features that make it more “human” and “friendly“, like the round letter “a“ which resembles the cursive form of the liter like in most hand writing. Also being a Google font, it is easy to embed in all our web materials and also offers a large variation of weights.

21 Idphoto Brand Guidelines — Typography

Light Light Italic

Regular Regular italic

Semi-Bold Semi-Bold Italic

3.2 Font weightsMuli offers a complete family with 14 weights, but from these we will use only the following list. Muli can be downloaded from the following link. Or it can be embedded using the following code:

<link href=”https://fonts.googleapis.com/css?family=Muli:300,300i,400,400i,600,600i,700,700i,800,800i,900,900i” rel=”stylesheet”>

Bold Bold Italic

Extra-Bold Extra-Bold Italic

Black Black Italic

https://fonts.google.com/specimen/Muli

22

3.3 Typography rulesThese are the rules for the different elements that can be used in any layout. The rules are separated into print and web usage. For the web, we have defined algorithms that use the “calc“ functionality from CSS in order to have fluid typography and scale the text automatically depending on the width of the viewport.

Font size = 40ptLine Height = 48ptFont weight = Extra Bold and/or Extra Bold Italic


font-size: calc( 32px + (40 - 32) * ((100vw - 320px) / (1980 - 320)));line-height: calc( 40px + (48 - 40) * ((100vw - 320px) / (1980 - 320)));font-weight: 800;


Print

Print

Web

Web

H1 Element

H2 Element



Font size = 18ptLine Height = 32ptFont weight = Bold and/or Bold Italic

Font size = 16ptLine Height = 24ptFont weight = Bold and/or Bold Italic



font-size: calc( 18px + (24 - 18) * ((100vw - 320px) / (1980 - 320)));line-height: calc( 24px + (32 - 24) * ((100vw - 320px) / (1980 - 320)));

Print

Print

Print

Web

Web

Web

H3 Element

H4 Element

Intro paragraph

24

Font size = 10ptLine Height = 16ptFont weight = Regular / Regular Italic / Bold / Bold Italic

Font size = 9ptLine Height = 14ptFont weight = Regular / Regular Italic

This is an element just for web.




Print

Print

Print

Web

Web

Web

Normal Paragraph

Small information paragraph

Medium paragraph

27 Idphoto Brand Guidelines — Iconography • by epoint

4 IconographyIconography refers to the icon system used by a brand. In our case we use Material Icons by Google, which has a large variety of icons and also is web and print friendly by having an icon font and also a git repository.

28

4.1 Material Icons

As previously stated the system of icons used is Material Icons. It can be downloaded from this link or used form the git depository.

https://material.io/tools/icons

https://github.com/google/material-design-icons

29 Idphoto Brand Guidelines — Iconography

4.2 Icon sizesWe have defined 4 standard sizes for our icons that can be used in-line with other elements, like text or buttons. For other uses, like graphics, the icon size can be determined by the designer depending on the needs of the layout.

16x16 px 18x18 px 24x24 px 32x32 px

Small Normal Medium Large

31 Idphoto Brand Guidelines — Imagery • by epoint

5 ImageryImagery represents the rules that apply to all images that are used by our brand. Images are an integral part of our marketing materials and cover multiple types of images and graphics.

32

5.1 Photography styleA distinctive photographic style has been developed.It is based on a sense of welcome and usability. It should reflect how easy is to use our products and how they benefit our customers. The main mood should be: warm, friendly, trustworthy, open, optimistic and positive.

The main principles are:• Believable situations: imagery should be real-life scenarios that depict people benefiting from our

products.• Smile: the photos should use mainly a human subject to show the closeness of our products/business

to the end consumer.

Using and shooting photosTry to keep the subjects face in frame and leave space for text if needed, a good rule is to look at the color quantity rules and imagine the “T0“ is free space in the image. Before and afterThe best way to showcase our products is with the “before and after“ model, in which we can show the outcome of our products for the customer.

Close upsThey should be used only for marketing purposes and should be only of faces, emphasis the core statement of the brand: identity.

33 Idphoto Brand Guidelines — Imagery

5.2 Photography examples Portrait / Marketing Detail

Before & after

34

5.3 Image iconsWhen talking about image icons we refer to images that say the meaning of a word of phrase. For example for the word “identity“ we could use a picture of a passport, face, signature or fingerprint. Or in the case of “efficiency“ we could use: a clock/watch, a clean desk or a person walking up stairs.

The main principles is:• The core of the idea: try to find and image that best represents your “keyword“ in a natural and un-

edited form.

Don't use stockPlease try to avoid as much as possible templates or other ready made images from stock sites.


5.4 Image icons examples

36

5.5 GraphicsWe created custom graphics that align to the brand. All graphics can be found in the idphoto brand repository under the Graphics section. The password needed to access the repository is: idphotoep01nt When creating new graphicsPlease keep the look and feel set in the existing repository. Main things to keep in mind are:• Not to many detail• Stick to one message per graphic• The key message should be emphasized with the secondary color• Keep the color quantity percentage set in the rules under the color chapter• All graphics should be vector illustrations and in .svg format




5.6 Graphics examples

39 Idphoto Brand Guidelines — Web elements • by epoint

6 Web elementsOur main products live on the web so the following rules ensure a consistent look and feel over all our products. We have defined the most common elements and will leave further ones to be defined based on the rules set here.

40

6.1 ButtonsWe have defined 3 sizes for our buttons. They all have a border radius of 2px and a 1px solid border. This type of button is defined as a ghost button, the other types are defined on the next page.

Padding from the text:top/bottom: 6pxleft/right: 12px



Small Medium Large

Small Button Medium Button Large Button

41 Idphoto Brand Guidelines — Web elements

6.2 Button typesThe types of the buttons define what type of button it is and what is its purpose. They use the same rules as the standard button sizes with the added color properties.

Background color changes to the primary color. Text changes color to T0.

Background color changes to the secondary color. Text stays the same.

Background color changes to the success color. Text changes to T0.

Background color changes to the T70. Text stays the same.

Primary Button Primary Button on primary color

Success ButtonPrimary Button

Primary Button Primary Button Success ButtonSecondary Button

42

6.3 Button statesWe have defined 2 specific states, besides normal, in order to have all possible user scenarios covered.

The opacity of the button is set at 0.5% and the mouse cursor will be set to default.

On hover the border radius is changed to 50% of the height and the entire button is scaled (transform: scale) to 1.2.

Inactive state Hover state

Primary Button Primary Button


6.4 Buttons with iconsAll buttons could have icons, either on the left or on the right, depending on the case. Also we buttons could be just with icons. These combinations use the same rules as the rest of the buttons but have the rules for the icons.

The icon has a margin right on 8px.

The icon has a margin left on 8px.

The icon is aligned in the middle of the button, the padding around being the same.

Left icon button Right icon button Icon button

Primary Button Primary Button

44

6.5 InputsThese are the specifications of the most used types of inputs.

Text input normal state Text input active state Text input error state Text input inactive state


Dropdown normal state

Dropdown active state

Dropdown error state Dropdown inactive state

47 Idphoto Brand Guidelines — Stationary • by epoint

7 StationaryStationery plays an important role in representing our brand. It is the largest, most frequent use of the corporate identity. Consistent and coordinated use of the company identity elements on letterhead provides an opportunity to visibly solidify the idphoto brand.

48

7.1 Letterhead, Invoice & Delivery NoteOur letterhead, invoice and delivery note use a "container" with the brand swash as a visual element. The information contained are the idphoto logo and the address. The letterhead template is created in InDesign and it contains the grid, brand colors and also all styles for typography. All templates are created like this, ensuring that we have consistency through out all our brand materials. All documents have been compiled in one InDesign document with master pages for each of the templates. The masters are ordered by type and language. The file can be found in our repository page.


49 Idphoto Brand Guidelines — Stationary

idphoto, Fluhr & Maschemer

Ettenfeldstrasse 11

8052 Zürich

BANKVERBINDUNG

PostFinanceKonto: 85-692853-3 Clearing-Nr.: 9000

IBAN: CH74 0900 0000 8569 2853 3Swift/BIC: POFICHBEXXX

MWST-NUMMER

CHE-480.005.012 MWST

KONTAKT

[email protected]/kontakt

Rechnung #

Wir bedanken uns nochmals für Ihr Vertrauen und hoffen, Sie sind zufrieden mit unserem Dienst und der Qualität der neuen Bilder.

Wenn nicht, sagen Sie uns bitte Bescheid! Wir würden uns natürlich darüber freuen, wenn Sie so zufrieden sind, dass Sie unseren Dienst an andere weiterempfehlen.

Pos. Bezeichung Anzahl Preis MWST. Summe

127582Name of the client

Doina nr. 3, ap.8

Deva, Timis, CH-3006

Shipping CHF 0.00

Subtotal CHF 59.52

VAT (7.5%) CHF 4.58

Total CHF 64.10

1 Picture 3 - Unedited 3 CHF 0.00 7.5% CHF 0.00

2 Picture 1 1 CHF 59.52 7.5% CHF 59.52

3 Picture 2 - Unedited 3 CHF 4.58 7.5% CHF 4.58

4 2 x Stencil 3 CHF 64.10 7.5% CHF 64.10


Ettenfeldstrasse 11

8052 Zürich

Lieferschein #

Wir bedanken uns nochmals für Ihr Vertrauen und hoffen, Sie sind zufrieden mit unserem Dienst und der Qualität der neuen Bilder.

Wenn nicht, sagen Sie uns bitte Bescheid! Wir würden uns natürlich darüber freuen, wenn Sie so zufrieden sind, dass Sie unseren Dienst an andere weiterempfehlen.

Pos. Bezeichung Anzahl

127582Name of the client

Doina nr. 3, ap.8

Deva, Timis, CH-3006

1 Picture 3 - Unedited 3

2 Picture 1 1

3 Picture 2 - Unedited 3

4 2 x Stencil 3


Ettenfeldstrasse 11

8052 Zürich

September 1, 2018

Beauford Lee

Head of Academic Affairs

Business City College

123 Business Rd.

Business City, NY 54321

Dear Mr. Lee:

I am writing in reply to the classified ad you posted seeking to fill the position of Graduate Student Advisor for the Master of Arts in Liberal Studies degree program at Business City College.

Having earned my Master of Arts degree in Academic Advising from Anytown University, I understand the importance for informed academic counseling and program planning in a higher education environment.

I have also experienced first-hand the comforting effect of being able to contact an advi-sor who genuinely cares for the professional growth and success of students.

During my career as an electrician prior to my graduate studies, I was elected Chairman of the Executive Board where I sat as the union’s representative to the apprenticeship advisory board. In this capacity, I was able to be an effective advisor to apprentices who were experiencing scholastic problems that threatened their future in the industry. I par-ticularly enjoyed working with older apprentices who were seeking a career change and had problems adjusting to the obligations of work, school, and family life.

I believe that both my educational background in Academic Advising and my work-relat-ed duties of counseling and advising students enrolled in learning programs qualify me for consideration for the position of Graduate Student Advisor. I look forward to discuss-ing how my skills can be of value to Business City College as it prepares to move into the new millennium. Thank you for your time, consideration, and forthcoming response.

Sincerely,

Adam Applicant

Letterhead Invoice Delivery note

50

Master PagesPrint Size Layers

The master pages represent the templates. They can be applied to a new page and they will come with predefined information and elements. Window > Pages

All templates are created on an A4 paper size (21x29.7 cm) with a bleed of 2mm. The files are created in CMYK color space and made for this printing method.

We structured the layer in order to be clear which elements are on what layer. Window > Layers


Color Swatches Typography Styles

The color swatches come with all the brand colors ready for print in the CMYK color space. Window > Color > Swatches

The typography styles have been predefined and can be found in the Paragraph Styles panel. Please do not modify these styles. Window > Styles > Paragraph Styles

52

7.2 Business CardsAs in the case of the other stationary elements, the business cards come with their own templates. The source file is created in Illustrator and contains both versions of our business card: • Person BC (it is used for our employees and contains the contact information of the person) • Marketing BC (it is used only for marketing purposes) Both business cards have a front and back.

The templates have predefined grid, typography styles and colors.


Unterstützen Sie uns!

Bartholomew MontgomeryJOB DESCRIPTION

[email protected]+41 22 767 6111idphoto.ch

Zufrienden mitunserem Service?

Kundernmeinung schreiben und das nächste Foto-Set kostenlos bekommen.

idphoto.ch/testimonials

Biometrische Passbilder selber machen.idphoto.ch

Person BC - Front

Marketing BC - Front

Person BC - Back

Marketing BC - Back

54

Color Swatches Typography Styles

The color swatches come with all the brand colors ready for print in the CMYK color space. Window > Swatches

The typography styles have been predefined and can be found in the Paragraph Styles panel. Please do not modify these styles. Window > Type > Paragraph Styles

Print Size

The business cards have a format of 8.5x5.5 cm with a bleed of 2 mm. The files are created in CMYK color space and made for this printing method.


Grid

The templates come with a grid that helps you position elements if something goes wrong or you need to create a new type of business card.

brand guidelines - rein medical · 27 idphoto brand guidelines — iconography • by epoint 4...

Documents