sign in sign up
<<
Home , Duotone, Icon design, Tints and shades

Guidelines

These are our recommendations to retain the consistency and integrity of the Vidyard . 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

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 . 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 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 logos can be used on 550, and should not be used on other .

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

VIDYARD BRAND GUIDELINES 7 LOGO Spacing

It’s important to have a minimum amount of 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 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 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 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 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 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 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 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 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

Use icons and to represent the Vidyard brand.

VIDYARD BRAND GUIDELINES 2 2 Section | PB

ICONS AND ILLUSTRATION 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. 32px If the icon is smaller than 32px, the circle should be removed to retain the legibility of the icon. LARGE

56px

VIDYARD BRAND GUIDELINES 2 4 Section | PB

ICONS AND ILLUSTRATION 1/8 Icon Design

When icons are larger than 32px, they should be placed in a circle.

1/4 The exact size of the icon within the circle will vary based on the icon Icons are optically centered Icons are typically a color. size and ratio, so they should be within the middle of the circle. 400 optically centered with about 1/4 Circles are usually a 100 or 200 color tint. grid space around the circle.

Depending on the icon, either a stroke style or a filled style can be When icons are on a light background, chosen. Generally, more complex a 400 color can be used for the circle, and the icon can be white. icons have better legibility in the light version.

VIDYARD BRAND GUIDELINES 2 5 Section | PB

ICONS AND ILLUSTRATION Icon Color archive folder bezier-curve brackets-curly band-aid

Green 400 Indigo 400 Yellow 500 Turquoise 400 Blue 400 For exact icon color pairings, please #46DB83 #6361FA #F7D600 #26CFDB #006DF0 see the chart to the side.

Green 200 Indigo 100 Yellow 200 Turquoise 200 Blue 100 #CCFFDA #EBEDFF #FFFDBA #B7F9FA #C7E3FF

VIDYARD BRAND GUIDELINES 2 6 Section | PB

ICONS AND ILLUSTRATION Dos and

Icons that need to be The icon should be There should be enough Don’ts small should appear large enough to see, but contrast between the icon without the circle not overwhelming. and the background color.

The icons should only be one Icons on color backgrounds Certain icons should color, with the circle using a should have a darker be optically aligned to lighter tint of the same color. background. appear balanced.

VIDYARD BRAND GUIDELINES 2 7 Section | PB

ICONS AND ILLUSTRATION Illustration Style

Vidyard has a signature illustration style that we use on many campaigns and materials. The style is simple, approachable and friendly.

Good uses for illustration are: • Delight moments and onboarding (in product and in marketing). • Conveying conceptual ideas (product integrations etc). • Educational content where illustration helps convey or teach something.

VIDYARD BRAND GUIDELINES 2 8 Section | PB

ICONS AND ILLUSTRATION Grey 100 Indigo 200 Grey 600 3 px stroke Creating Illustrations

Illustrations always use the palette and typically have an equal balance of the Vidyard green and indigo.

To balance out a composition, illustration accents can also be used. When used in illustrations, accents are typically in Grey 100 or 150, but they can also be used to a lesser extent in the primary color palette. Green 400 Indigo 400 Indigo 200 Strokes should be kept consistent in px width to retain scaling.

VIDYARD BRAND GUIDELINES 2 9 Section | PB

ICONS AND ILLUSTRATION Empty states Creating Illustrations

Illustrations always use the primary color palette and typically have an equal balance of the Vidyard green and indigo.

To balance out a composition, illustration accents can also be used. When used in illustrations, accents are typically in Grey 100 or 150, but they can also be used to a lesser extent in the primary color palette.

Strokes should be kept consistent in px width to retain scaling.

VIDYARD BRAND GUIDELINES 3 0 Section | PB

ICONS AND ILLUSTRATION Illustration Accents

A large part of many Vidyard feature organic shapes to build illustrative compositions.

The use of these shapes should be limited and should not overpower an illustration or design.

Illustration accents are primarily in the grey palette, but they can also be in the primary or secondary color palette. 2 px stroke 30% Dots

Download Illustration Accent File

VIDYARD BRAND GUIDELINES 3 1 Section | PB

image Photography

Use photography to communicate our unique branding identity.

VIDYARD BRAND GUIDELINES 3 2 Section | PB

PHOTOGRAPHY Vidyard Life

People and lifestyle photos should showcase the fun, friendly, creative, and collaborative nature of our brand.

These shots should feel authentic and candid. Natural and artistic imperfections are encouraged. Motion blur can also be used to show energy.

To add consistency to photos, split tones can be added. Highlights use Yellow 400, and shadows use Indigo 400.

BEFORE AFTER

VIDYARD BRAND GUIDELINES 3 3 Section | PB

PHOTOGRAPHY Solid Color Treatment

Usually used to convey people profiles (in product profiles, or 1/4 profiles of our sales team). They’re filled with either primary (400 colors) 1/4 1/4 or secondary colors (300 colors).

The face should be placed with approximately 1/4 space of padding from the left, right and bottom.

VIDYARD BRAND GUIDELINES 3 4 Section | PB

PHOTOGRAPHY SHAPE COLOR Shape &

Duotone Green 300 Treatments Indigo 600

In certain contexts, it may be advantageous to add treatments to head shots in order to benefit the design.

Head shots can either be placed in circles or in the amorphous shapes Indigo 100 in the doodlydoos.ai file. Indigo 600 You can also choose to apply the split tone treatment to it, or apply a treatment.

VIDYARD BRAND GUIDELINES 3 5 megaphone Marketing Materials

Guidelines for creating materials within the Vidyard brand.

VIDYARD BRAND GUIDELINES 3 6 MARKETING MATERIALS 8pt Grid and Margins

To produce consistent materials, layouts should use an 8pt grid. Margins, gutters, and columns should all be in multiples of 8 or 4.

VIDYARD BRAND GUIDELINES 3 7 MARKETING MATERIALS Business Cards

Business cards should follow the below specifications, as well as following the general type outlined here. PMS 7479C = A

First and last name = 1/3 A Type size: 14px ● #374054

Job title Type size: 9px ● #374054

Contact Information Type size: 9px ● #5b627d

VIDYARD BRAND GUIDELINES 3 8 Please send questions or requests to [email protected]

VIDYARD BRAND GUIDELINES 3 9