Brand Guidelines - Rein Medical · 27 Idphoto Brand Guidelines — Iconography • by epoint 4...
Transcript of 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
4
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
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.
10
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
15 Idphoto Brand Guidelines — Color palette
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
17 Idphoto Brand Guidelines — Color palette
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
18
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
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 = 32ptLine Height = 40ptFont 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;
font-size: calc( 24px + (32 - 24) * ((100vw - 320px) / (1980 - 320)));line-height: calc( 32px + (40 - 32) * ((100vw - 320px) / (1980 - 320)));font-weight: 800;
Web
Web
H1 Element
H2 Element
23 Idphoto Brand Guidelines — Typography
Font size = 24ptLine Height = 32ptFont weight = Extra Bold and/or Extra Bold Italic
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)));font-weight: 800;
font-size: calc( 16px + (18 - 16) * ((100vw - 320px) / (1980 - 320)));line-height: calc( 24px + (32 - 24) * ((100vw - 320px) / (1980 - 320)));font-weight: 700;
font-size: calc( 18px + (24 - 18) * ((100vw - 320px) / (1980 - 320)));line-height: calc( 24px + (32 - 24) * ((100vw - 320px) / (1980 - 320)));
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.
font-size: calc( 14px + (16 - 14) * ((100vw - 320px) / (1980 - 320)));line-height: calc( 18px + (24 - 18) * ((100vw - 320px) / (1980 - 320)));
font-size: calc( 12px + (14 - 12) * ((100vw - 320px) / (1980 - 320)));line-height: calc( 16px + (18 - 16) * ((100vw - 320px) / (1980 - 320)));
font-size: calc( 14px + (18 - 14) * ((100vw - 320px) / (1980 - 320)));line-height: calc( 18px + (24 - 18) * ((100vw - 320px) / (1980 - 320)));
Web
Web
Web
Normal Paragraph
Small information paragraph
Medium paragraph
25 Idphoto Brand Guidelines — Typography
26
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.
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
30
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.
35 Idphoto Brand Guidelines — Imagery
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
37 Idphoto Brand Guidelines — Imagery
5.6 Graphics examples
38
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
Padding from the text:top/bottom: 8pxleft/right: 12px
Padding from the text:top/bottom: 12pxleft/right: 16px
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
43 Idphoto Brand Guidelines — Web elements
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
45 Idphoto Brand Guidelines — Web elements
Dropdown normal state
Dropdown active state
Dropdown error state Dropdown inactive state
46
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
idphoto, Fluhr & Maschemer
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
idphoto, Fluhr & Maschemer
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
51 Idphoto Brand Guidelines — Stationary
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.
53 Idphoto Brand Guidelines — Stationary
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.
55 Idphoto Brand Guidelines — Stationary
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.