Branding and Style Guide
Total Page:16
File Type:pdf, Size:1020Kb
Branding & Style Guide 1.1.1 Branding and Style Guide ©Cinnafilm Inc. 2019 Vision Statement Branding & Style Guide 1.1.1 WE BUILD REVOLUTIONARY TOOLS TO HELP YOU CREATE EXTRAORDINARY MOVING IMAGES pg. 2 ©Cinnafilm Inc. 2018 Table of Contents Branding & Style Guide 1.1.1 Contents Products . .21 Vision Statement ................................. 2 Overview ....................................... 23 Table of Contents................................. 3 Tachyon........................................ 24 Dark Energy..................................... 25 Logo . 4 Wormhole . 26 Overview ........................................ 5 RadiantGrid ..................................... 27 Color Version . 6 Xenon . 28 Color Version Reversed ............................ 7 PixelStrings..................................... 29 Grayscale Version . 8 Black & White Bitmap . 9 Safe Area....................................... 10 Tagline......................................... 11 ]Do Nots . 12 Colors and Typography . 13 Primary Brand Colors............................. 14 Secondary / Product Colors . 15 Tertiary Colors .................................. 16 Corporate Font . 17 Alternate Fonts.................................. 18 Corporate Font - Monospace ...................... 19 Corporate Font - Display .......................... 20 pg. 3 ©Cinnafilm Inc. 2018 Logo Overview, Variations & Best Practices Branding & Style Guide 1.1.1 Logo pg. 4 ©Cinnafilm Inc. 2019 Logo: Overview Branding & Style Guide 1.1.1 • The official Cinnafilm logo for all intents and purposes is the full-color version locked up with symbol, wordmark and registration mark. • Logo use hierarchy: • Full-Color Logo • Reversed • Single-Color Bitmap (request from Cinnafilm marketing if needed) Symbol Wordmark Logo pg. 5 ©Cinnafilm Inc. 2018 Logo: Color Version Branding & Style Guide 1.1.1 • Full-color version of the logo is the number one hierarchy for all marketing uses. (This is always our first choice) pg. 6 ©Cinnafilm Inc. 2018 Logo: Color Version Reversed Branding & Style Guide 1.1.1 • Reversed logo ONLY to be used on dark backgrounds • ALL full-color logo treatment rules in this guide apply to for contrast. the reversed logo. • Reversed logo should first be used on Cinnafilm Blue. (e.g. NAB Cinnafilm booth) pg. 7 ©Cinnafilm Inc. 2019 Logo: Grayscale Version Branding & Style Guide 1.1.1 • Grayscale version ONLY for black and white use of the logo. • ONLY to be used where color use of the logo is NOT available. pg. 8 ©Cinnafilm Inc. 2018 Logo: Black & White Bitmap Branding & Style Guide 1.1.1 • Bitmap ONLY for the purposes of black and white print use • Single-color version can ONLY be accessed by contacting of the logo. (e.g. newspaper, etc.) the Marketing team. • ONLY to be used if the full-color AND reversed versions of the Cinnafilm logo do NOT work. pg. 9 ©Cinnafilm Inc. 2018 Logo: Safe Area Branding & Style Guide 1.1.1 • Spacing around the logo is equal to the height of the “C”. • DO NOT attempt to recreate the logo. Use this reference when scaling the logo to ensure spacing is optically balanced. • Minimum size for standard logo is .5” / 2.3” (13mm / 60mm) print and 40px / 170px digital. .5”/40px pg. 10 ©Cinnafilm Inc. 2018 Logo: Tagline Branding & Style Guide 1.1.1 • All uses of tagline version MUST be approved by the • DO NOT attempt to recreate the logo and Cinnafilm Marketing team. tagline lock-up. • Follow the same “safe area” guidelines as per the • Minimum height for tagline logo is .75” / 3.5” (20mm / standard logo. 90mm) print and 50px / 255px digital. .75”/50px pg. 11 ©Cinnafilm Inc. 2018 Logo: Do Nots Branding & Style Guide 1.1.1 • These are examples of what NOT to do with the • Contact the Marketing team if you have any questions Cinnafilm logo. or concerns. • The phrase “Cinnafilm logo” refers to the icon, wordmark, copyright, and tagline (if applicable) together. • Use the provided logo assets and follow this guideline to avoid any issues. Every Frame Matters Do NOT stretch or squeeze the logo Do NOT attempt to reproduce lockup with tagline Do NOT attempt to recreate the logo Do NOT rotate or skew Do NOT change the colors of the logo in ANY way Do NOT use the icon on its own (without approval) Do NOT apply filters or effects to the logo Do NOT crop the logo Do NOT place the logo floating in a color box Do NOT place the logo over an image (without approval) pg. 12 ©Cinnafilm Inc. 2018 Colors and Typography Fonts, Colors, and Usage Branding & Style Guide 1.1.1 Colors and Typography pg. 13 ©Cinnafilm Inc. 2019 Colors: Primary Brand Colors Branding & Style Guide 1.1.1 • Cinnafilm Blue and Cinnabar Orange are THE CORE • Do NOT change these colors for custom use. Cinnafilm colors; as such, these should be used with great (i.e. changing RGB values or creating gradients) consideration and only in line with this brand guide or with the permission of the Cinnfailm Marketing team. • Color formats are provided for use across print/digital formats. Cinnafilm Blue (primary color) RGB: 27 . 54 . 93 HEX: #1B365D CMYK: 99 . 83 . 37 . 29 Cinnabar Orange (primary color) RGB: 220 . 68 . 5 HEX: #DC4405 CMYK: 8 . 87 . 100 . 1 pg. 14 ©Cinnafilm Inc. 2018 Colors: Secondary / Product Colors Branding & Style Guide 1.1.1 • Product colors are to be used solely with • Do NOT change these colors for custom use. their associated product to build and retain (i.e. changing RGB values or creating gradients) product awareness. • Color formats are provided for use across print/digital formats. • Do NOT use any other colors for Cinnafilm products. Tachyon/Cinnabar Orange Dark Energy Blue Wormhole Gold (primary color / product color) (product color) (product color) RGB: 220 . 68 . 5 RGB: 0 . 80 . 140 RGB: 255 . 165 . 0 HEX: #DC4405 HEX: #00508C HEX: #FFA500 CMYK: 8 . 87 . 100 . 1 CMYK: 100 . 75 . 18 . 4 CMYK: 0 . 41 . 100 . 0 RadiantGrid Gray PixelStrings Purple (product color) (product color) RGB: 95 . 95 . 95 RGB: 99 . 18 . 196 HEX: #5F5F5F HEX: #6312C4 CMYK: 62 . 53 . 53 . 24 CMYK: 76 . 95 . 0 . 5 pg. 15 ©Cinnafilm Inc. 2018 Colors: Tertiary Colors Branding & Style Guide 1.1.1 • Tertiary colors are used for supporting primary and • Do NOT change these colors for custom use. secondary colors. (i.e. changing RGB values or creating gradients) • Tertiary colors should be used only as replacements for brand colors when only black and white are available. • Be sure to maintain a readable level of contrast when using tertiary colors in typography. Dark Gray/RadiantGrid Medium Gray Light Gray (tertiary color) (tertiary color) (tertiary color) RGB: 95 . 95 . 95 RGB: 150 . 150 . 150 RGB: 221 . 221 . 221 HEX: #5F5F5F HEX: #969696 HEX: #DDDDDD CMYK: 62 . 53 . 53 . 24 CMYK: 44 . 36 . 36 . 1 CMKY: 12 . 9 . 9 . 0 Rich Black/Xenon White (tertiary color) (tertiary color) RGB: 0 . 0 . 0 RGB: 255 . 255 . 255 HEX: #000000 HEX: #FFFFFF CMYK: 75 . 68 . 68 . 90 CMKY: 0 . 0 . 0 . 0 pg. 16 ©Cinnafilm Inc. 2018 Typography: Corporate Font Branding & Style Guide 1.1.1 • Roboto is the Cinnafilm corporate font for ALL • Web Font Stack : Roboto, Helvetica Neue, Segoe UI, Tahoma, documents and marketing materials. sans-serif • Roboto can be downloaded from Google Fonts. • Only use the font weights Light, Regular, and Bold or their respective italic version. Roboto Light Headlines (h1, h2, h3) ABCDEGHIJKLMNOPQRSTUVWXYZ abcdeghijklmnopqrstuvwxyz 1234567980.!?$%,:;”’ Roboto Regular Body / copy ABCDEGHIJKLMNOPQRSTUVWXYZ abcdeghijklmnopqrstuvwxyz 1234567980.!?$%,:;”’ Roboto Bold Subheading (h4), strong (emphasized) text ABCDEGHIJKLMNOPQRSTUVWXYZ abcdeghijklmnopqrstuvwxyz 1234567980!?$%.,:;”’ pg. 17 ©Cinnafilm Inc. 2018 Typography: Alternate Fonts Branding & Style Guide 1.1.1 • Fallback fonts ONLY for use in cases where Roboto is NOT available. • Only use the font weights Light, Regular, and Bold or their respective italic version. • Do NOT use any other fonts. Tahoma is considered a systems standard font and should be used only if ALL ELSE FAILS. Helvetica Neue Apple/Mac OS ABCDEGHIJKLMNOPQRSTUVWXYZ abcdeghijklmnopqrstuvwxyz 1234567980.!?$%,:;”’ Segoe UI Microsoft/WIndows ABCDEGHIJKLMNOPQRSTUVWXYZ abcdeghijklmnopqrstuvwxyz 1234567980.!?$%,:;”’ Tahoma All other circumstances ABCDEGHIJKLMNOPQRSTUVWXYZ abcdeghijklmnopqrstuvwxyz 1234567980!?$%.,:;”’ pg. 18 ©Cinnafilm Inc. 2018 Typography: Corporate Font - Monospace Branding & Style Guide 1.1.1 • Roboto Mono is the Cinnafilm corporate font to be used • When presenting code examples, choose font weight based when showing code samples. (This includes commands on syntax highlighting/formatting for the language in use. used in terminal progams.) Default to Roboto Mono Regular when in doubt - refer to code sample for details. • Roboto Mono can be downloaded from Google Fonts. • Web Font Stack: Roboto Mono, Consolas, Lucida Sans • Only use the font weights Regular or Bold or their respective Typewriter, monospace italic version. Roboto Mono Regular Code samples ABCDEGHIJKLMNOPQRSTUVWXYZ abcdeghijklmnopqrstuvwxyz 1234567980.!?$%,:;”’ Roboto Mono Bold Code samples - includes italic version of font, useful for syntax formatting purposes. ABCDEGHIJKLMNOPQRSTUVWXYZ abcdeghijklmnopqrstuvwxyz 1234567980!?$%.,:;”’ pg. 19 ©Cinnafilm Inc. 2018 Typography: Corporate Font - Display Branding & Style Guide 1.1.1 • Neusa Next Condensed Medium is the complementary • Neusa Next is available through the Cinnafilm display font for Cinnafilm marketing materials. Adobe TypeKit subscription if needed by the Cinnafilm Marketing team. • Display font is only to be used with all caps. • All materials using the