Visual Style Guide

LOGO   |   COLOURS    |   TYPO   |   DETAILS

The Logo

The StudyinCanada logo consists of an icon and a wordmark. The symbol and the wordmark should be used locked up together.

Logo Clearspace and Margins

When using the logo in a design or placing it next to other visual elements, you should ensure that it has plenty of room to breathe. This is where clearspace and margins come in to play.

The logo’s clearspace defines the distance between the logo and any graphic element it may be sitting next to in a composition.

Incorrect Usage of the Logo

Do not reverse the logo or change the arrangement of the logo.

Do not reverse the logo or change the arrangement of the logo.

Do not reverse the logo or change the arrangement of the logo.

Do not apply colors other than the ones specified above.

Do not reverse the logo or change the arrangement of the logo.

Do not use the wordmark independently

Do not reverse the logo or change the arrangement of the logo.

Do not stretch or alter the proportions of the logo.

Colours

Flush Mahogany

RGB : 207, 59, 73
CMYK : 13, 91, 70, 2

Thunder

RGB : 35, 31, 32
CMYK : 70, 67, 64, 74

Typography

Font Sizes

The different headline sizes and weights build a structure that guides the reader through the content and highlights the most important information. Headings should be in bold title case, and have a size range of 16 to 56 px. Use smaller fonts for the next-level headings to establish a hierarchy to guide readers through the content.

Headings

Heading HTML Size

H1

<h1></h1>

42-56 px

H2

<h2></h2>

36-48 px

H3

<h3></h3>

32-42 px

H4

<h4></h4>

26-36 px

H5
<h5></h5>
20-28 px
H6
<h6></h6>
16-22 px

The Eyebrow heading is an uppercase H6 for supporting the following heading. Use it to label headings that are part of a larger group of related pages or categories. The eyebrow heading should be concise and shorter than the main heading.

Subtitles

A subtitle is smaller than a headline and is used in combination with it. It should be between 16 to 32 px.

Captions

Captions are the smallest fonts used on our sites. Use a font size of 12 to 14 px for captions.

Lists

Lists are used to present information in a structured and easily scannable format.
Use bullet points to introduce each item in an unordered list.
Use numbers (1, 2, 3, etc.) to indicate the order of items in an ordered list.
Align the list with the rest of the body text.
Use the same line height as body text for list items (and their sub-items) to ensure ensuring a harmonious and consistent reading experience.

Nesting

Nest lists when there is a hierarchical relationship between items.
Use consistent indentation for sub-items within a list and increase the indent for each level of nesting.
Visually differentiate nested lists using indentation and alternative bullet styles. When possible, use a different symbol with a reduced weighting or size to avoid distracting user’s attention away from the top-level entries.

<ol> Ordered Lists

  1. Vestibulum bibendum ipsum eu viverra pharetra.
    Mauris aliquet eu eros vel porttitor. Aliquam erat volutpat.
    1. Quisque pharetra mi sed lacus hendrerit pharetra.
    2. Cras vulputate condimentum ante, vel sodales purus semper vel.
      1. Nulla facilisi. Integer pulvinar malesuada sem in ullamcorper.
      2. Curabitur sit amet mauris augue.
  2. Sed vel interdum neque.
    Integer tempor interdum consectetur.
    1. Donec ac mauris feugiat, dignissim risus id, vestibulum lorem.
    2. Aenean rhoncus vel lectus non varius.
      1. Fusce sit amet pharetra dui.
      2. Nam non lectus sit amet est lacinia eleifend ut vitae neque.

<ul> Unordered Lists

  • Vestibulum bibendum ipsum eu viverra pharetra.
    Mauris aliquet eu eros vel porttitor. Aliquam erat volutpat.
    • Quisque pharetra mi sed lacus hendrerit pharetra.
    • Cras vulputate condimentum ante, vel sodales purus semper vel.
      • Nulla facilisi. Integer pulvinar malesuada sem in ullamcorper.
      • Curabitur sit amet mauris augue.
  • Sed vel interdum neque.
    Integer tempor interdum consectetur.
    • Donec ac mauris feugiat, dignissim risus id, vestibulum lorem.
    • Aenean rhoncus vel lectus non varius.
      • Fusce sit amet pharetra dui.
      • Nam non lectus sit amet est lacinia eleifend ut vitae neque.

Connect with us