Design Guidelines These are our recommendations to retain the consistency and integrity of the Vidyard brand. VIDYARD DESIGN VIDYARD We’re Vidyard Vidyard is the video platform that helps businesses transform communications and drive more revenue through the strategic use of online video. Going beyond video hosting and management, we help businesses connect with more viewers through interactive and personalized video experiences, learn powerful insights on their viewing audience, turn insights into action with enterprise integrations, and prove the impact of their video programs. OUR MISSION IS TO Help businesses succeed with the use of video Video is changing the way businesses connect and communicate in an increasingly digital world. From marketing, sales and customer service to employee training and corporate communications, video is helping businesses of all sizes humanize communications and personalize customer experiences. VIDYARD BRAND GUIDELINES 3 Logo Follow our simple guidelines to ensure the Vidyard logo is being used correctly and consistently. VIDYARD BRAND GUIDELINES 4 LOGO PRIMARY LOGO Our Brand Our primary logo embodies our brand with it’s friendly tone and our signature green. Our emblem features our V-Bot mascot and the wordmark. .5x 1x The primary logo should ideally be used in most applications. Download logo files 1/3 A A Resources VIDYARD BRAND GUIDELINES 5 LOGO HORIZONTAL LOGO Alternate Logos VERTICAL LOGO The Horizontal Logo is our primary logo and should be the preferred logo on most materials. The Vertical Logo is restricted to vertical/square areas. The Emblem can be used in small, EMBLEM square spaces where the wordmark might appear too small. The inverted color logos can be used on Grey 550, and should not be used on other colors. VIDYARD BRAND GUIDELINES 6 LOGO LOGO HORIZONTAL LOGO One-colour Logos Single Color There are instances where the primary logo will not suit the size or Logos placement. VERTICAL LOGO There are rare circumstances where, because of technical constraints, a full color logo is not possible. These logos should only be used in those circumstances. Logo Fill: EMBLEM ● Grey 500 White VIDYARD BRAND GUIDELINES 7 LOGO Spacing It’s important to have a minimum amount of space around the Vidyard logo. The space around the Vidyard logo should be the height of two “V”s around the logo. In tighter spaces, you can use the height of one “V”. VIDYARD BRAND GUIDELINES 8 LOGO Dos and Don’ts The logo should never The colors should Choose backgrounds with be skewed in size. never be changed. enough color contrast. Use the white logo when it Do not add or change the layout Do not add a drop will be used on an image. of the elements of the logo. shadow to the logo. VIDYARD BRAND GUIDELINES 9 Section | PB Typography Use typography to present your design and content as clearly and efficiently as possible. VIDYARD BRAND GUIDELINES 1 0 Section | PB TYPOGRAPHY Typeface Vidyard uses Circular Std, a BOLD geometric sans-serif typeface. The quick brown fox jumps over the lazy dog Circular Std is primarily based of geometric forms, but has MEDIUM many quirks that make it a friendly and warm typeface. The quick brown fox jumps over the lazy dog Download Circular Std BOOK The quick brown fox jumps over the lazy dog VIDYARD BRAND GUIDELINES 1 1 Section | PB TYPOGRAPHY OVERLINE / BOOK Typography Formatting Header 1 / Bold Vidyard uses a range of contrasting typeface weights and a purposeful Header 2 / Bold type size scale to produce visual hierarchy for headers and paragraphs. Header 3 / Bold Paragraph / Book Button Links / Medium VIDYARD BRAND GUIDELINES 1 2 Section | PB HEADER STYLES PARAGRAPH STYLES OVERLINE / BOOK Paragraph / Bold Type size: 16px / 14px Line Height: x1.5 Tracking: 250 Type size: 18px / 16px / 14px / 13px Line Height: x1.15 ● #374054 ● #5b627d Paragraph / Medium / Book Type size: 18px / 16px / 14px / 13px Line Height: x1.5 Header 1 / Bold ● #5b627d Type size: 60px Line Height: x1 ● #374054 Button Links / Medium Type size: 14px Line Height: x1.5 Header 2 / Bold ● #6361FA Type size: 46px Line Height: x1.15 ● #374054 Header 3 / Bold Type size: 32px / 24px / 20px Line Height: x1.5 ● #374054 VIDYARD BRAND GUIDELINES 1 3 Section | PB TYPOGRAPHY OVERLINE / MEDIUM Typeface Alternative Header 1 / Bold In a situation where Circular Std cannot be used (such as in emails), Montserrat is permitted to use. The sizing, color Header 2 / Bold and spacing should be kept the same as the formatting outlined on page 13. Header 3 / Bold Download Montserrat Paragraph / Medium Button Links / Semibold VIDYARD BRAND GUIDELINES 1 4 Section | PB TYPOGRAPHY AGNIASPERUM 0.5em Typeface 1em Niatur Riorita verum 1em Spacing Eped ulles vendeli beatus, core perio vernatia percim ratinvent Ems are used to space the typography diossimintia everfere pre quaepro eiundae nobitio. Et denihiciis conessi to retain the scaling across the full cum que sit magnis et ut aris modit enditas entem. Aceribus pero qui gamut of type sizes. doluptas none volupta tiatem quiatus, nobis delenihit reperitent et. The em size is taken from the header cap height. 0.5em space is added Button Links / Medium above if an overline is needed. 1em size is added below if body copy is added below, and 1em space is added between links or buttons. N 1em = Header cap height VIDYARD BRAND GUIDELINES 1 5 Section | PB TYPOGRAPHY Color AGNIASPERUM Niatur Riorita verum Contrast Eped ulles vendeli beatus, core perio vernatia percim ratinvent diossimintia everfere pre quaepro eiundae nobitio. Et denihiciis conessi cum que sit magnis et ut aris modit enditas. It’s important have enough color Aceribus pero qui doluptas none volupta tiatem quiatus, nobis delenihit reperitent et. contrast between typography and it’s background. The contrast should be able to pass WCAG 2.0 AA criteria. You can check color contrast AGNIASPERUM on several websites, such as contrastchecker.com. Niatur Riorita verum Eped ulles vendeli beatus, core perio vernatia percim ratinvent diossimintia everfere pre quaepro eiundae nobitio. Et denihiciis conessi cum que sit magnis et ut aris modit enditas. Aceribus pero qui doluptas none volupta tiatem quiatus, nobis delenihit reperitent et. VIDYARD BRAND GUIDELINES 1 6 Section | PB TYPOGRAPHY Decorative Loris aut odit tassit Accents There’s a variety of decorative elements Uptam que ma dolupic that can be added to highlight and accentuate important points. Decorative typography accents should be used minimally on large, bold headers and can be used in either the Ut ute quatissequi cor primary or secondary color palette. Download Typography Accents VIDYARD BRAND GUIDELINES 1 7 Section | PB Color Palettes Use these guidelines to determine the best way to apply the Vidyard color palette. VIDYARD BRAND GUIDELINES 1 8 Section | PB COLOR PRIMARY PALETTE Color Palettes Vidyard uses two palettes with a spectrum of tints and shades that can be used on a variety of materials. SECONDARY PALETTE The primary palette should be the dominant colors used. If more colors are needed, the secondary palette can be used sparingly. Download palette files VIDYARD BRAND GUIDELINES 1 9 Section | PB PRIMARY PALETTE Green 100 Green 200 Green 300 Green 400 Green 500 Green 600 Green 700 235 / 255 / 241 204 / 255 / 218 153 / 247 / 180 70 / 219 / 131 70 / 219 / 131 40 / 191 / 108 30 / 72 / 64 #EBFFF1 #CCFFDA #99F7B4 #46DB83 #28BF6C #2E7A53 #1E4840 PMS 7479C Indigo 100 Indigo 200 Indigo 300 Indigo 400 Indigo 500 Indigo 600 Indigo 700 235 / 238 / 255 191 / 196 / 255 143 / 151 / 255 99 / 97 / 250 70 / 219 / 131 27 / 26 / 130 12 / 8 / 77 #EBEEFF #BFC4FF #8F97FF #6361FA #414DD4 #1B1A82 #0C084D PMS 2725C Grey 50 Grey 100 Grey 150 Grey 200 Grey 250 Grey 300 Grey 350 250 / 251 / 255 245 / 249 / 255 235 / 240 / 247 221 / 225 / 240 200 / 206 / 227 169 / 176 / 201 132 / 140 / 171 #FAFBFF #F5F9FF #EDF0F7 #DDE1F0 #C8CEE3 #A9B0C9 #848CAB Grey 400 Grey 450 Grey 500 Grey 550 Grey 600 Grey 650 Grey 700 96 / 103 / 130 91 / 98 / 125 71 / 80 / 102 55 / 64 / 84 45 / 52 / 69 35 / 41 / 56 15 / 31 / 41 #606782 #5B627D #475066 #374054 #2D3445 #232938 #0F1F29 VIDYARD BRAND GUIDELINES 2 0 Section | PB SECONDARY PALETTE Blue 100 Blue 200 Blue 300 Blue 400 Blue 500 Blue 600 Blue 700 199 / 227 / 255 126 / 195 / 255 51 / 150 / 255 0 / 109 / 240 0 / 77 / 201 0 / 48 / 153 0 / 35 / 112 #C7E3FF #7EC3FF #3396FF #006DF0 #004DC9 #003099 #002370 Turquoise 100 Turquoise 200 Turquoise 300 Turquoise 400 Turquoise 500 Turquoise 600 Turquoise 700 218 / 254 / 255 183 / 249 / 250 183 / 249 / 250 38 / 207 / 219 0 / 156 / 184 0 / 107 / 140 0 / 66 / 92 #DAFEFF #B7F9FA #74EFF2 #26CFDB #009CB8 #006B8C #00425C Yellow 100 Yellow 200 Yellow 300 Yellow 400 Yellow 500 Yellow 600 Yellow 700 255 / 255 / 222 255 / 253 / 186 255 / 252 / 141 253 / 240 / 73 247 / 214 / 0 195 / 144 / 0 153 / 98 / 0 #FFFFDE #FFFDBA #FFFC8D #FDF049 #F7D600 #C39000 #996200 VIDYARD BRAND GUIDELINES 2 1 Section | PB Icons and Illustration Use icons and illustrations to represent the Vidyard brand. VIDYARD BRAND GUIDELINES 2 2 Section | PB ICONS AND ILLUSTRATION Icon Design archive folder bezier-curve brackets-curly band-aid cog We use Font Awesome to build a consistent icon system. With Font flag bell camera exclamation-triangle chart-area calendar-alt Awesome, you can use icons in an SVG format, but we recommend to use the provided font to create icons to keep sizing simple and consistent. ad envelope books comment-alt analytics cut Icons can be used in either the primary or secondary color palette. Download Font Awesome VIDYARD BRAND GUIDELINES 2 3 Section | PB ICONS AND ILLUSTRATION SMALL Icon Sizing 16px Icon sizing should mirror the sizing MEDIUM to the right, but if necessary, they can be sized in increments of 8px.