Embed Size (px)
Citation preview
valtech– © 2015 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.
www.valtech.comvaltech– © 2015 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.
International SOS Corporate Marketing Site Style Guide 02-25-2015
GLOBAL COLORS AND TYPOGRAPHY
www.valtech.com
2
International SOS Corporate Marketing Site | Style Guide
International SOS BlueHex: #2b54a3R: 43G: 84B: 163
International SOS RedHex: #d4002cR: 212G: 0B: 44
International SOS Dark BlueHex: #222658R: 34G: 38B: 88
International SOS PurpleHex: #6c206bR: 108G: 32B: 107
Dark Grey 1Hex: #33373cR: 51G: 55B: 60
International SOS OrangeHex: #f47641R: 244G: 118B: 65
Medium Grey 1Hex: #53555cR: 83G: 85B: 92
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)
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
International SOS GreenHex: #009354R: 0G: 147B: 84
1 5
2 6
3 7
4 8
TypographyCore Colors Complimentary Colors
Open Sans (Google Font)
Regular
BOLD
SEYMOUR ZOOEY FRANNY
SALINGER my hard nose, glass jaw, and soft heart 1874 1965 & 2003 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
www.valtech.com
3
International SOS Corporate Marketing Site | Style Guide
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 logo202 x 98 px(No tagline unless instructed))
Left Header logo (30-year logo)145 x 65 px(Does not include right-side swoosh)
Footer logo218 x 128 px(Includes tagline)
1
2
3
1
2
3
www.valtech.com
4
International SOS Corporate Marketing Site | Style Guide
IMAGERY - HOMEPAGE
3
Below specifications are aspect ratios for 3 different devices, desktop, tablet and mobile. Plus coloring scheme guideline
Desktop carousel (hero) image1280 x 523 pxUsed primarily for desktop & landscape tablet views
Colored Title blockCan 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) image320 x 417 pxUsed primarily for tablet portrait and smartphone views
1
2
3
320 x 417 px
1280 x 523 px1
2
www.valtech.com
5
International SOS Corporate Marketing Site | Style Guide
IMAGERY - HOMEPAGE
3
2
Below specifications are aspect ratios - can be sized to fit module according to width.
News Inset Image70 x 70 px
Inset Header image278 x 164 px Image should be centered or scaled to fit width.
Topics Module Header image292 x 172 px
1
3
2
1
www.valtech.com
6
International SOS Corporate Marketing Site | Style Guide
IMAGERY - HOMEPAGE
Stories Hero image650 x 573 px
Stories inset image573 x 164 pxNote title case style for header text (all other module headlines are all caps style)
1
2
2
1
Below specifications are aspect ratios - can be sized to fit module according to width.
www.valtech.com
7
International SOS Corporate Marketing Site | Style Guide
IMAGERY - MODuLES
2
Sample grey module w/video292 x 172 px aspect ratio
Sample purple module w/ inset image235 x 146 pxUse case for image that cannot fill full width
Sample blue module w/ dark bkgd w/ inset image292 x 172 px aspect ratio
Sample red moduleNo image with document links
1
3
2
4
4
1
3
All modules Headers are Open Sans-bold All Caps 15px #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.
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)
www.valtech.com
8
International SOS Corporate Marketing Site | Style Guide
IMAGERY - LANDING PAGE
Landing hero image1280 x 200 px aspect ratioOpen Sans Bold and regular 34 px with 32 px leading Text is a little too large and tight
Landing hero image redux1280 x 200 px aspect ratioOpen Sanas Bold- and regular 27 px with 30 px leading
1
2
1
2
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
www.valtech.com
9
International SOS Corporate Marketing Site | Style Guide
IMAGERY - INTERNAL PAGES
Hotline Image600 x 225 px aspect ratio
General story Image600 x 225 px aspect ratio
Duty of Care Image278 x 156 px exact size
1
2
3
1
Below specifications can be sized to fit module according to width.
3
2
www.valtech.com
10
International SOS Corporate Marketing Site | Style Guide
IMAGERY - CONSISTENT IMAGE MODuLES
Full frame image278 x 164 px aspect ratioImage fills width and begins directly under header bar
Inset centered image235 x 146 px aspect ratioImage is centered equally L-R and T-B between top frame and text content
Silhouette (.png) image278 x 164 px aspect ratioSame ration but image is neither full-width, nor centered properly
Odd-sized image - incorrect278 x 164 px aspect ratiom can be sized for inset centered image as well.Same ration but image is neither full-width, nor centered properly
1
2
3
4
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
1 32
Correct278 x 164 px
Correct278 x 164 px
max.
Correct235 x 146 px
4
IncorrectIn-between sizes
www.valtech.com
11
International SOS Corporate Marketing Site | Style Guide
IMAGERY - MICROSITE LANDING PAGE
2
Landing page logo134 x 64 px aspect ratio for International SOS logo160 x 80 max. space for any other logos.
Landing page hero image960 x 275 px
1
2
1
valtech– © 2015 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.
1 212 366 1057 | www.valtech.com
Thank you! the valtech teamHeli Olkkonen | [email protected]
Brian Walker | [email protected]
Michael Kaplan | [email protected]
Hua Wu | [email protected]
