International SOS Corporate Marketing Site

Transcription

1 International SOS Corporate Marketing Site Style Guide valtech 05 Valtech Solutions, Inc. All rights reserved. Valtech, the Valtech Logo are trademarks of Valtech, SA. Other names mentioned may be trademarks of their respective owners.

2 GLOBAL COLORS AND TYPOGRAPHY Core Colors Complimentary Colors Typography International SOS Blue Hex: #b54a R: 4 G: 84 B: 6 5 International SOS Dark Blue Hex: #658 R: 4 G: 8 B: 88 6 Dark Grey Hex: #7c R: 5 G: 55 B: 60 7 International SOS Red Hex: #d400c R: G: 0 B: 44 International SOS Purple Hex: #6c06b R: 08 G: B: 07 International SOS Orange Hex: #f4764 R: 44 G: 8 B: 65 Open Sans (Google Font) Regular BOLD Please use the Open Sans font family and no others when creating any materials that will be used on the International SOS marketing site pages. All styles can be downloaded from google.com/fonts SEYMOUR ZOOEY FRANNY SALINGER my hard nose, glass jaw, and soft heart & 00 Type Quiz Mocks Faux Regular Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain 4 Medium Grey Hex: #5555c R: 8 G: 85 B: 9 8 International SOS Green Hex: #00954 R: 0 G: 47 B: 84 The above color palette has been developed which complements the International SOS corporate colors and which should be used to differentiate International SOS industry sectors and site elements. Most importantly, be consistent in your coloring schemes. Examples: ISOS Blue for general/main stories Grey module for Videos module Red color module for latest news/warnings and alerts Green module for Maps / Conservation, recycling Purple module for Human, social topics Orange for webinars/contacts ( use minimally)

3 IMAGERY - HOMEPAGE LOGOS Below specifications are aspect ratios for the International SOS logo. Mobile and tablet versions use same logo and they are responsively resized based on screen dimensions. Left Header logo 0 x 98 px (No tagline unless instructed)) Left Header logo (0-year logo) 45 x 65 px (Does not include right-side swoosh) Footer logo 8 x 8 px (Includes tagline)

4 IMAGERY - HOMEPAGE Below specifications are aspect ratios for different devices, desktop, tablet and mobile. Plus coloring scheme guideline 80 x 5 px Desktop carousel (hero) image 80 x 5 px Used primarily for desktop & landscape tablet views Colored Title block Can International SOS corporate colors and which should be used to differentiate International SOS industry sectors and site elements? Most importantly, be consistent in your coloring schemes. Mobile carousel (hero) image 0 x 47 px Used primarily for tablet portrait and smartphone views 0 x 47 px 4

5 IMAGERY - HomePAGE Below specifications are aspect ratios - can be sized to fit module according to width. News Inset Image 70 x 70 px Topics Module Header image 9 x 7 px Inset Header image 78 x 64 px Image should be centered or scaled to fit width. 5

6 IMAGERY - HOMEPAGE Below specifications are aspect ratios - can be sized to fit module according to width. Stories Hero image 650 x 57 px Stories inset image 57 x 64 px Note title case style for header text (all other module headlines are all caps style) 6

7 IMAGERY - Modules All modules Headers are Open Sans-bold All Caps 5px #ffffff (white) All photos and images should be landscape and fill width of box unless image is too small or ratio is closer to square format. Sample grey module w/video 9 x 7 px aspect ratio Sample blue module w/ dark bkgd w/ inset image 9 x 7 px aspect ratio 4 Sample purple module w/ inset image 5 x 46 px Use case for image that cannot fill full width Sample red module No image with document links 4 As stated earlier, we recommend using the International SOS corporate colors to differentiate International SOS industry sectors and elements within the site). Most importantly, be consistent in your coloring schemes. Examples: ISOS Blue for general/main stories Grey module for Videos module Red color module for latest news/warnings and alerts Green module for Maps / Conservation, recycling Purple module for Human, social topics Orange for webinars/contacts ( use minimally) 7

8 IMAGERY - Landing PAGE If adding text to a bitmap image for CMS upload: The example shown shows the difference in using a font that is too large and a font that fits within space comfortably and still legible despite being 7 px shorter Landing hero image 80 x 00 px aspect ratio Open Sans Bold and regular 4 px with px leading Text is a little too large and tight Landing hero image redux 80 x 00 px aspect ratio Open Sanas Bold- and regular 7 px with 0 px leading 8

9 IMAGERY - INTERNAL PAGES Below specifications can be sized to fit module according to width. Hotline Image 600 x 5 px aspect ratio General story Image 600 x 5 px aspect ratio Duty of Care Image 78 x 56 px exact size 9

10 IMAGERY - CONSISTENT IMAGE MODULES There should be only two variations on an image used in the modules: Photos and images can either extend to width of module frame or be centered framed by white (negative) space Full frame image 78 x 64 px aspect ratio Image fills width and begins directly under header bar Inset centered image 5 x 46 px aspect ratio Image is centered equally L-R and T-B between top frame and text content 4 Silhouette (.png) image 78 x 64 px aspect ratio Same ration but image is neither full-width, nor centered properly Odd-sized image - incorrect 78 x 64 px aspect ratiom can be sized for inset centered image as well. Same ration but image is neither full-width, nor centered properly Correct 78 x 64 px Correct 5 x 46 px Correct 78 x 64 px max. 4 Incorrect In-between sizes 0

11 IMAGERY - Microsite Landing page Landing page logo Landing page hero image 4 x 64 px aspect ratio for International SOS logo 60 x 80 max. space for any other logos. 960 x 75 px

12 Thank you! the valtech team Heli Olkkonen Brian Walker Michael Kaplan Hua Wu valtech 05 Valtech Solutions, Inc. All rights reserved. Valtech, the Valtech Logo are trademarks of Valtech, SA. Other names mentioned may be trademarks of their respective owners