Why we use a Style Guide

The components of Venture For Canada's visual identity, when used correctly, build our credibility and make it easier for our intended audiences to process what we're sharing.

Each communication we send should strive to:

• Create or reinforces the right impression of Venture for Canada.
• Ensure we appear credible and professional in the eyes of partners, collaborators and participants.
• Make sure the information we share is simple to approach and absorb.
• Avoid creating impressions that detract from all of the things we do right.

Brand Foundations

Q: What's a brand?

A: A brand is the way people feel about us in their gut.

We can't control the way people feel about us. But we can influence it. Through our actions, primarily. Following close behind on the list of ways we can influence the way people feel about us is how we present ourselves.

Careful consideration and some degree of consistency in how we present ourselves can build credibility, trust, and confidence.

These guidelines will help us avoid creating impressions that detract from all of the things we do right. Using them effectively should help us:

1. Make young people believe we're part of the startup ecosystem (Somewhere finishing school, launchpad/ accelerator, and job board)
2. Help them make the case to their families/supporters that we're a good investment.
3. Help employers feel like we're the smart agile premium partner they need.
4. Help funders believe we're an important investment in efficacy for entrepreneurial job seekers and interns.

The elements of our mark

Our logomark is a combination of the round V logo and the wordmark (the name of our organization).

Logo Colour Matters

Whenever possible, use the 2-colour version of our logo on light/neutral backgrounds.

Logo Size Matters

Keep 2 measurements in mind: The size of the logo itself and the negative-space around it.

1. Size Itself

Having a correct size ensures readability. As long as "Venture for Canada" is legible the logo is safe. We found that to be around 175px wide.

2. Negative-Space Around It

When you place other content too close to the logo it looks cramped. It's like wearing a nice outfit to a party, but just a few sizes too small. At 175px wide the minimum required extra space is 25px of cushion.

At larger scales you can use the circle as a good rule of thumb.

Combining our logo with others

• Choose formats that match if possible (e.g. square with square, horizontal with horizontal, logo with logo).
• Read and respect other brand's guidelines when adding funder & partner logos to our layouts.

Please Don't

• Touch the edge of an object, such as the top of a printed page or website with the logo.
• Apply non-approved colours to the logo.
• Alter the logo files in any way, we like our logo just the way it is!
• Place over complex patterns / imagery.
• Use legacy/outdated identity (See Bottom left in image below)

Download Identity package

Colour hierarchy

Froly Red ties us to our roots, references our Canadian purview, and is bold, like an entrepreneur needs to be, especially ones planning to fuel startups. When in doubt, default to this colour, followed closely by Froly's companion, Riptide.

Blues are a calming colour, often used to indicate intelligence (think banks and consulting firms) and creativity (because it's so rare in nature, apart from the sky)— Here we've electrified it.

A note on accessibility

If the indicator below shows a "fail" it means that the specific combination of text colour, text size and background colour isn't accessible for a large enough portion of readers.

Secondary colours and hues

Our secondary colours compliment and support our primary colours.
Their more subdued tones are ideal for longer communications documents that can benefit from more colour. They also meet web accessibility standards and can work as backgrounds.

Please Do

• Use 'Froly Red' and 'Riptide' first or when few colours are needed.
• Use a variety of gray scales if 'Dark Slate' is insufficient.
• Use 'Light' as your white when designing a dark layout (ex: dark slate background).
• Use accessible type and background combinations as indicated on the swatches above.
• Use secondary colours when you have a lot of content in your layout.

Please Don't

• Use coloured text (body copy) on top of a coloured background.
• Use more 'Riptide' than 'Froly/Sunglo'.
• Make entire pages out of 'Froly' or 'Riptide'. Instead, use 'Background Red' as a replacement for 'Froly' backgrounds to ensure readability.

Use Proxima Nova first and most

This is our primary font. Its a large, versatile family offering a variety of weights.

Please DO

• Use Proxima for headers, titles, body and meta descriptions
• Use large differences in scale when you can

Use Lora for contrast

Lora works well for content that needs a human voice; like quotes, statistic highlights, and emphasis.

Please do

• Use Lora for short content only
• Keep Lora to larger font sizes for clearer contrast

Find our fonts

Proxima Nova is available through your Adobe Creative Cloud account. Otherwise, you can download this font here.

Lora is also available through Google Fonts.

We use three types of shapes in our identity:

1. Blobs
2. Waves
3. Dots

Blobs™ and how to use them

We use blobs to hold colour when you need contrast from the rest of the page, to hold an image that adds energy to a page and in layered backgrounds for social posts.

Do's:

• Containing a single subject picture (ie headshot).
• Containing a solid colour from our colour palette and used for decoration.
• Layered in the background of graphic assets like a social media post.
• Use as 'illustrations' for comparing concepts or points.

Please Don't

• Cut off important information when using blobs as a container for photos.
• Partially lay beneath readable text and compromise accessibility contrasts.
• Create new shapes

Waves

We use waves to transition between rows or pages. Use it to emphasize important content.

Do's:

• Overlap them on large image sections.
• Use them as transitions between chunks of content by matching the colour of the next section.
• Use them to frame the top or bottom of a page by placing on the edge and using a complementary colour pop.

Dot grid

The dot grid is a graphic decoration. They're light and translucent so they add dimension.

Do's:

• Highlight major headlines.
• Use it as a decorative element in large negative space (eg: behind an H1).
• Embellish photography.

Download Assets

Columns (Vertical alignment)

Depending on the media, your layout can be structured by columns. We read by taking mental snapshots of a whole line at a time. Our brains then translate the shapes of the words and letters into meaning while we scan from the end of one line to the next.

• Use fewer than 85 characters per line (makes it easier for readers to process each line).
• Left-aligned columns create clear starting points.
• Create up to 4 columns on your average letter-sized page or presentation (though you should limit how much content you share on a slide) when your content requires it.

Rows (Horizontal Alignment)

Organize related information into rows with these grouping tactics:

• Background Colour (most common)
• Bordering Images or Shapes

Try to keep styles + content combinations consistent throughout documents. If you train a reader to see angled red backgrounds as CTA's, don't use that combination for a different type of content.

Space

Making your content stand out and easy to process includes consideration of the space around it. "White" or "negative" space isn't just empty. It's a frame for the content. The amount of it that you use helps a reader decide where to start, what's important, and what's related. And as with other design elements, applying it consistently and deliberately helps readers orient easily. For example, a large frame of negative space around a title might indicate a section head. the second time a reader sees the same space-to-content relationship they'll intuitively understand that they're entering a new section.

Practical space use

• Use margins to frame your entire page. Apart from background content, like images that should "bleed" off the page, content close to the edges will infer an association and draw the reader's eye.
• Use white space to divide columns
• Use white space to denote hierarchy and association levels above and below titles, graphic elements, and sections of body text. Eg:
• Small text right below an image means it's a caption describing the image and is closer to the image than the text after.
• A sub-headline should have more space between the content above it than the content it heralds, below it.

Core set

Each icon represents a single thing. Do not use these outside of their already established context.

Need a new icon?

Make sure all new icons look like the core family with this handy checklist of key attributes:

• Aim for solid shapes (no outlines) with straight edges.
• Minimize details inside the shape and always use a hairline stroke where details are essential.
• Use a simple concept and a minimal version of it eg, is it the least amount of shapes needed to convey the idea?
• Round corners are helpful to soften the impact, but no icon should be all rounded.
• We only use black and white icons to maximize contrast.
• Icons are always presented in a circle.

Download Icons

New Photography

Whether you're searching for stock, snapping your own, or guiding a photographer, consider the following:

Aesthetic Qualities

• Slight desaturation
• Slightly warm
• High exposure
• Unless the environment is important to the story the photo is telling, blur the background to pop the subject.

We Do

• Select active images.
• Showcase different races and ages of people.
• Feature different activities and seasons.
• Feature different cities (when the city is visible and distinguishable).
• Keep images destined for the web under 2MB in size, with a maximum width of 1600px.

Use photos in assets

Photography does a lot of heavy lifting for our brand. Here's how to get out of it's way.

We don't

• Add text over an image (i.e. text directly on a photo without a background, especially in unreadable colours).
• Use images found on the internet without the consent of the source.

We Always Give Context

Recognize the [program/activity] + the [cohort year] with a caption for every photo. This turns a difference in past branding into visible growth and helps us showcase the depth of our programs.

Our beautiful website illustrations are available to download in PNG format (300 dpi). We commissioned them for use in our communication materials. Feel free to add them to your design of social media posts, ebooks, website pages, etc. Please don't edit them! If you'd like to use the illustrations on merch or items intended for sale, or if you need an illustration created or modified, please contact the original creators at hello@hypenotic.com. They'll be happy to discuss extending our usage rights on a case by case basis.

Download Illustration Kit