Brand Guidelines - Rein Medical
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
Brand Guidelines
Table of Contents
1 Logo 5 4.1 Material Icons 28
1.1 Primary logo application 6 4.2 Icon sizes 29
1.2 Secondary logo application 7 5 Imagery 31
1.3 White space & minimum size 8 5.1 Photography style 32
1.4 Incorrect usage of the logo 9 5.2 Photography examples 33
2 Color palette 11 5.3 Image icons 34
2.1 Primary color 12 5.4 Image icons examples 35
2.2 Secondary color 13 5.5 Graphics 36
2.3 Tertiary colors 14 5.6 Graphics examples 37
2.4 Success, error and warning 15 6 Web elements 39
2.5 Color usage examples 16 6.1 Buttons 40
2.6 Incorrect color usage 17 6.2 Button types 41
3 Typography 19 6.3 Button states 42
3.1 Primary typeface 20 6.4 Buttons with icons 43
3.2 Font weights 21 6.5 Inputs 44
3.3 Typography rules 22 7 Stationary 47
4 Iconography 27 7.1 Letterhead, Invoice & Delivery Note 48
2
7.2 Business Cards 52 3 Idphoto Brand Guidelines
4
1 Logo The idphoto logo represents the backbone of our brand and it must be treated accordingly. Please follow these rules when using our logo. 5 Idphoto Brand Guidelines — Logo • by epoint
1.1 Primary logo application
The primary logo application uses 2 main versions of the logo.
All source files can be found in the brand repository.
Primary logo Primary logo - inverted
Please use this logo only on the light colors of our brand Please use this logo only on the dark colors of our brand
or light images. or dark images.
6
1.2 Secondary logo application The secondary logo application uses 2 monochromatic versions of the logo. All source files can be found in the brand repository. Black logo White logo Please use this logo only on the light colors of our brand Please use this logo only on the dark colors of our brand or light images. or dark images. 7 Idphoto Brand Guidelines — Logo
1.3 White space & minimum size
White space Minimum size
The white space represents the space between our logo The minimum size represents the smallest size to which
and other elements on the page. Because the logo can the logo can be resized.
be smaller or bigger we use the space defined by the to The size is defined by the height of the logo and has two
letters "id" in order to define the white space. usage options: Print and Web.
Print Web
5mm 20px
8
1.4 Incorrect usage of the logo
Do not distort the proportions of Do not change the colors of the Do not outline the logo. Do not rearrange the logo Do not use the logo on other
the logo in any way. logo with other colors other than elements/letters. colors than the ones specified in
the ones in the brand guidelines. the brand guidelines.
The id company
Do not use the logo on very heavy Do not use the logo on very heavy Do not add tag-lines to the logo. Do not cut the logo if it is not used
or contrasting patterns. or contrasting images. as a graphic element.
9 Idphoto Brand Guidelines — Logo
10
2 Color palette Color 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. 11 Idphoto Brand Guidelines — Color palette • by epoint
2.1 Primary color
Our 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 Primary Dark Primary Light
Tory Blue Jacksons Blue Dodger Blue
CMYK: 95, 84, 0, 0 CMYK: 100, 99, 5, 2 CMYK: 100, 0, 0, 20
RGB: 13, 64, 176 RGB: 30, 36, 146 RGB: 55, 114, 225
HEX: #0D40B0 HEX: #1E2492 HEX: #3772FF
122.2 Secondary color In 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 Secondary Light Shamrock Spray CMYK: 62, 0, 59, 0 CMYK: 48, 0, 18, 0 RGB: 31, 220, 151 RGB: 84, 242, 242 HEX: #3DDC97 HEX: #54F2F2 13 Idphoto Brand Guidelines — Color palette
2.3 Tertiary colors
If 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 90 T 75 T 60 T 45 T 15 T0
Pickled Bluewood Fiord Slate Gray Mystic Alice Blue White
CMYK: 83, 68, 51, 46 CMYK: 74, 57, 51, 46 CMYK: 57, 40, 32, 3 CMYK: 11, 5, 3, 0 CMYK: 2, 0, 0, 0 CMYK: 0, 0, 0, 0
RGB: 41, 56, 70 RGB: 75, 92, 107 RGB: 120, 136, 150 RGB: 223, 231, 237 RGB: 247, 252, 255 RGB: 255, 255, 225
HEX: #293846 HEX: #4B5C6B HEX: #788896 HEX: #DFE7ED HEX: #F7FCFF HEX: #FFFFFF
142.4 Success, error and warning Our 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. Success Warning Error Lima Tulip Tree Bittersweet RGB: 88, 195, 34 RGB: 234, 196, 53 RGB: 255, 102, 102 HEX: #58C322 HEX: #EAC435 HEX: #FF6666 15 Idphoto Brand Guidelines — Color palette
2.5 Color usage examples
For 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 page Basic page/layout Graphics Key visual/poster
65% T0 58% T0 75% T0 55% Primary Color
50% Primary Color 24% T90 13% T45 28% Primary Color Dark
9% T90 8% T75 6% Primary Color Light 7% T90
8% T45 7% Primary Color 5% Primary Color 6% T45
2% Primary Color Light 2% Secondary Color 5% Primary Color Light
162.6 Incorrect color usage
Please never use these combinations in any material/layout.
T T T T T T
Success Color & Error Color & Secondary T90 & Primary Color Secondary Color & Success Color & Warning/ Primary Color Light &
Secondary Color Color Primary Color Light Error Colors Warning/Error/Success
Colors
17 Idphoto Brand Guidelines — Color palette 18
3 Typography Typography 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. 19 Idphoto Brand Guidelines — Typography • by epoint
3.1 Primary typeface
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.
Muli
Sans-serif typeface
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWX
1234567890 !?’”;:,./[]()*|äöüẞ
203.2 Font weights Muli 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: Light Bold Light Italic Bold Italic Regular Extra-Bold Regular italic Extra-Bold Italic Semi-Bold Black Semi-Bold Italic Black Italic 21 Idphoto Brand Guidelines — Typography
3.3 Typography rules
These 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.
H1 Element
Print Web
Font size = 40pt font-size: calc( 32px + (40 - 32) * ((100vw - 320px) / (1980 - 320)));
Line Height = 48pt line-height: calc( 40px + (48 - 40) * ((100vw - 320px) / (1980 - 320)));
Font weight = Extra Bold and/or Extra Bold Italic font-weight: 800;
H2 Element
Print Web
Font size = 32pt font-size: calc( 24px + (32 - 24) * ((100vw - 320px) / (1980 - 320)));
Line Height = 40pt line-height: calc( 32px + (40 - 32) * ((100vw - 320px) / (1980 - 320)));
Font weight = Extra Bold and/or Extra Bold Italic font-weight: 800;
22H3 Element
Web
Print
font-size: calc( 18px + (24 - 18) * ((100vw - 320px) / (1980 - 320)));
Font size = 24pt line-height: calc( 24px + (32 - 24) * ((100vw - 320px) / (1980 - 320)));
Line Height = 32pt font-weight: 800;
Font weight = Extra Bold and/or Extra Bold Italic
H4 Element
Web
Print
font-size: calc( 16px + (18 - 16) * ((100vw - 320px) / (1980 - 320)));
Font size = 18pt line-height: calc( 24px + (32 - 24) * ((100vw - 320px) / (1980 - 320)));
Line Height = 32pt font-weight: 700;
Font weight = Bold and/or Bold Italic
Intro paragraph
Web
Print
font-size: calc( 18px + (24 - 18) * ((100vw - 320px) / (1980 - 320)));
Font size = 16pt line-height: calc( 24px + (32 - 24) * ((100vw - 320px) / (1980 - 320)));
Line Height = 24pt
Font weight = Bold and/or Bold Italic
23 Idphoto Brand Guidelines — TypographyNormal Paragraph
Print Web
Font size = 10pt font-size: calc( 14px + (16 - 14) * ((100vw - 320px) / (1980 - 320)));
Line Height = 16pt line-height: calc( 18px + (24 - 18) * ((100vw - 320px) / (1980 - 320)));
Font weight = Regular / Regular Italic / Bold / Bold Italic
Small information paragraph
Print Web
Font size = 9pt font-size: calc( 12px + (14 - 12) * ((100vw - 320px) / (1980 - 320)));
Line Height = 14pt line-height: calc( 16px + (18 - 16) * ((100vw - 320px) / (1980 - 320)));
Font weight = Regular / Regular Italic
Medium paragraph
Print Web
This is an element just for web. font-size: calc( 14px + (18 - 14) * ((100vw - 320px) / (1980 - 320)));
line-height: calc( 18px + (24 - 18) * ((100vw - 320px) / (1980 - 320)));
2425 Idphoto Brand Guidelines — Typography
26
4 Iconography Iconography 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. 27 Idphoto Brand Guidelines — Iconography • by epoint
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.
284.2 Icon sizes We 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. Small Normal Medium Large 16x16 px 18x18 px 24x24 px 32x32 px 29 Idphoto Brand Guidelines — Iconography
30
5 Imagery Imagery 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. 31 Idphoto Brand Guidelines — Imagery • by epoint
5.1 Photography style
A 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 photos
Try 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 after
The 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 ups
They should be used only for marketing purposes and should be only of faces, emphasis the core
statement of the brand: identity.
325.2 Photography examples
Portrait / Marketing Detail
Before & after
33 Idphoto Brand Guidelines — Imagery5.3 Image icons
When 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 stock
Please try to avoid as much as possible templates or other ready made images from stock sites.
345.4 Image icons examples 35 Idphoto Brand Guidelines — Imagery
5.5 Graphics
We 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 graphics
Please 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
365.6 Graphics examples 37 Idphoto Brand Guidelines — Imagery
38
6 Web elements Our 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. 39 Idphoto Brand Guidelines — Web elements • by epoint
6.1 Buttons
We 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.
Small Button Medium Button Large Button
Small Medium Large
Padding from the text: Padding from the text: Padding from the text:
top/bottom: 6px top/bottom: 8px top/bottom: 12px
left/right: 12px left/right: 12px left/right: 16px
406.2 Button types
The 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.
Primary Button Primary Button Secondary Button Success Button
Primary Button Primary Button on Primary Button Success Button
primary color
Background color changes Background color changes Background color changes
to the primary color. Background color changes to the T70. to the success color.
Text changes color to T0. to the secondary color. Text stays the same. Text changes to T0.
Text stays the same.
41 Idphoto Brand Guidelines — Web elements6.3 Button states
We have defined 2 specific states, besides normal, in order to have all possible user scenarios covered.
Primary Button Primary Button
Inactive state Hover state
The opacity of the button On hover the border
is set at 0.5% and the radius is changed to 50%
mouse cursor will be set to of the height and the
default. entire button is scaled
(transform: scale) to 1.2.
426.4 Buttons with icons
All 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.
Primary Button Primary Button
Left icon button Right icon button Icon button
The icon has a margin The icon has a margin left The icon is aligned in the
right on 8px. on 8px. middle of the button, the
padding around being the
same.
43 Idphoto Brand Guidelines — Web elements6.5 Inputs
These 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
44Dropdown normal state Dropdown error state Dropdown inactive state
Dropdown active state
45 Idphoto Brand Guidelines — Web elements
467 Stationary Stationery 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. 47 Idphoto Brand Guidelines — Stationary • by epoint
7.1 Letterhead, Invoice & Delivery Note
Our 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.
48Letterhead Invoice Delivery note
idphoto, Fluhr & Maschemer idphoto, Fluhr & Maschemer idphoto, Fluhr & Maschemer
Ettenfeldstrasse 11 Ettenfeldstrasse 11 Ettenfeldstrasse 11
8052 Zürich 8052 Zürich 8052 Zürich
Rechnung #127582 Lieferschein #127582
September 1, 2018
Beauford Lee
Head of Academic Affairs Name of the client Name of the client
Business City College Doina nr. 3, ap.8 Doina nr. 3, ap.8
123 Business Rd. Deva, Timis, CH-3006 Deva, Timis, CH-3006
Business City, NY 54321
Dear Mr. Lee: Wir bedanken uns nochmals für Ihr Vertrauen und hoffen, Sie sind zufrieden mit unserem Wir bedanken uns nochmals für Ihr Vertrauen und hoffen, Sie sind zufrieden mit unserem
Dienst und der Qualität der neuen Bilder. Dienst und der Qualität der neuen Bilder.
I am writing in reply to the classified ad you posted seeking to fill the position of Graduate
Wenn nicht, sagen Sie uns bitte Bescheid! Wir würden uns natürlich darüber freuen, wenn Sie so zufrieden sind, dass Sie Wenn nicht, sagen Sie uns bitte Bescheid! Wir würden uns natürlich darüber freuen, wenn Sie so zufrieden sind, dass Sie
Student Advisor for the Master of Arts in Liberal Studies degree program at Business City
unseren Dienst an andere weiterempfehlen. unseren Dienst an andere weiterempfehlen.
College.
Having earned my Master of Arts degree in Academic Advising from Anytown University,
Pos. Bezeichung Anzahl Preis MWST. Summe Pos. Bezeichung Anzahl
I understand the importance for informed academic counseling and program planning in
1 Picture 3 - Unedited 3 CHF 0.00 7.5% CHF 0.00 1 Picture 3 - Unedited 3
a higher education environment.
2 Picture 1 1 CHF 59.52 7.5% CHF 59.52 2 Picture 1 1
I have also experienced first-hand the comforting effect of being able to contact an advi-
3 Picture 2 - Unedited 3 CHF 4.58 7.5% CHF 4.58 3 Picture 2 - Unedited 3
sor who genuinely cares for the professional growth and success of students.
4 2 x Stencil 3 CHF 64.10 7.5% CHF 64.10 4 2 x Stencil 3
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 Shipping CHF 0.00
advisory board. In this capacity, I was able to be an effective advisor to apprentices who Subtotal CHF 59.52
were experiencing scholastic problems that threatened their future in the industry. I par-
VAT (7.5%) CHF 4.58
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. Total CHF 64.10
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
BANKVERBINDUNG MWST-NUMMER KONTAKT
PostFinance CHE-480.005.012 MWST info@idphoto.ch
Konto: 85-692853-3 Clearing-Nr.: 9000 idphoto.ch/kontakt
IBAN: CH74 0900 0000 8569 2853 3
Swift/BIC: POFICHBEXXX
49 Idphoto Brand Guidelines — StationaryPrint Size Master Pages Layers
All templates are created on an A4 paper size (21x29.7 The master pages represent the templates. They can We structured the layer in order to be clear which
cm) with a bleed of 2mm. be applied to a new page and they will come with elements are on what layer.
predefined information and elements.
The files are created in CMYK color space and made for Window > Layers
this printing method. Window > Pages
50Color Swatches Typography Styles
The color swatches come with all the brand colors ready The typography styles have been predefined and can
for print in the CMYK color space. be found in the Paragraph Styles panel. Please do not
modify these styles.
Window > Color > Swatches
Window > Styles > Paragraph Styles
51 Idphoto Brand Guidelines — Stationary7.2 Business Cards
As 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.
52Person BC - Front Person BC - Back
Bartholomew
Montgomery
JOB DESCRIPTION
bartholomew.montgomery@idphoto.ch Biometrische Passbilder
+41 22 767 6111 selber machen.
idphoto.ch
idphoto.ch
Marketing BC - Front Marketing BC - Back
Zufrienden mit
unserem Service?
Kundernmeinung schreiben und das nächste
Foto-Set kostenlos bekommen.
Unterstützen Sie uns!
idphoto.ch/testimonials
53 Idphoto Brand Guidelines — StationaryPrint Size Color Swatches Typography Styles
The business cards have a format of 8.5x5.5 cm with a The color swatches come with all the brand colors ready The typography styles have been predefined and can
bleed of 2 mm. for print in the CMYK color space. be found in the Paragraph Styles panel. Please do not
modify these styles.
The files are created in CMYK color space and made for Window > Swatches
this printing method. Window > Type > Paragraph Styles
54Grid 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. 55 Idphoto Brand Guidelines — Stationary
You can also read
