WelcomeOntario
Know how to make good use of the WelcomeOntario and AccueilOntario logos, colours, co-branding, and other other visual identity elements
On this page:
1. Logo composition
Please note that the WelcomeOntario (WO) and AccueilOntario (AO) brand logos consist of 2 elements horizontally aligned:
- the Ontario symbol contained in a circle
- the word-mark “WelcomeOntario” (AccueilOntario in French), written in title case and without spaces in between words
2. Download logo
The WO/AO logos will be used with funders, partners, media, and promotional work, including e-learning materials and videos.
You can download the logos from its section under the assets webpage, including low and high resolution files.
3. Colours
The WO/AO brand colour palette consists of one primary core hue (green) and an accent colour (red), both used as solid colours. The main colour usage is green combined with white or very light backgrounds and darker grey or black for text.
Download colour schemes (.txt, .json)
Check accessibility contrast grid
Main colours
Primary green
HEX: #117337 | CMYK: 85 / 0 / 52 / 55
Sample usage: green backgrounds (footers, aside blocks, covers), coloured headlines
Darker green
HEX: #106919 | CMYK: 85 / 0 / 76 / 64
Sample usage: call-to-actions (CTAs), dark topbars, dark footers
Accent red
HEX: #B52400 | CMYK: 0 / 80 / 1 / 29
Sample usage: links, accents, icons
Greys
Black
HEX: #020907 | CMYK: 78 / 0 / 22 / 96
Sample usage: black backgrounds, black text and headlines
Darker grey
HEX: #34423D | CMYK: 80 / 26 / 82 / 11
Sample usage: dark headlines and base text
Dark grey
HEX: #646e6b | CMYK: 80 / 26 / 82 / 11
Sample usage: labels
Grey
HEX: #C0C5C3 | CMYK: 78 / 0 / 22 / 96
Sample usage: light text
Light grey
HEX: #DFE1E0 | CMYK: 78 / 0 / 22 / 96
Sample usage: borders, lines
Lighter grey
HEX: #F9F9F9 | CMYK: 78 / 0 / 22 / 96
Sample usage: light backgrounds (sidebars, blockquotes, callouts), light text on dark backgrounds
White
HEX: #FFFFFF | CMYK: 78 / 0 / 22 / 96
Sample usage: page background
4. Co-branding
Co-branding shows a partnership between your program/project/organization and another organization and represents an exchange of credibility between brands.
Display the WO/AO logo next to other logos in horizontal or vertical orientation.
- Make all logos appear visually equivalent
- Add visually consistent spacing around the logos
- Use the logos on white or very light backgrounds
WO/AO logo + Partner logo(s)
This option works for 2 or more equal logos:
- Horizontal lock-up: place WO/AO logo next to a brand partner logo.
- Stacked lock-up: place WO/AO logo above a brand partner logo.
- Separator: you may add a thin grey line in between the OCASI logo and the brand partner logo.
Logo wall
Co-branding works best with 2 equal partners. If more than 3 parties are involved or if the relationship among them is not equal, try using another treatment instead, like a logo wall.
5. Logo usage
The logo on background colours
The colour of the WO/AO logo is always:
- green, used on white or very light backgrounds
- black, used on white or very light backgrounds
- white, used on black, darker green, or dark grey backgrounds
Whenever possible, work with the WO/AO logo version on white backgrounds.
The logo on graphical backgrounds
There will be instances where a graphical background or photograph may be used. For example, a poster or video where the canvas or screen is fully occupied by a photograph. Under such scenarios:
- Make sure the logo has enough contrast with the background
- Do not use the WO/AO logo on top of a photograph, graphic, or gradient background unless it sits on a very light or very dark area of the image
Clear space
To provide appropriate visibility and legibility to your logo:
- keep a minimum clear space between the logo and other elements around
- use the height of the logo as a guide to determine a minimum clear space
- ideally, you may always leave more than the minimum clear space
Minimum size
Whenever possible, the size of the logo should be larger than the minimum size.
- for print materials, the minimum size is 1.25 cm (about 1/2 in) in height
- on digital screens, the minimum size is 40 pixels in height
🤔 🤔 🤔
As a rule of thumb, do not scale the logo to a point where it does not look good or has poor legibility.
Resizing proportionally
The proportions of the brand logo should never be altered:
- avoid stretching or narrowing the brand logo
- keep the same proportions (image aspect ratio) when the brand logo is resized
🤔 🤔 🤔
There are some keyboard shortcuts to resize the logo depending on the software you are working with. You can try to hold down the shift key when scaling the image to maintain the correct proportions.
Positioning
Only use your logo in one location per layout, print or digital page or other materials (PDFs, social media posts materials, banners).
Place your logo on the top-left of your layout as a standard practice since it is easier to remember by users:
- bottom-left, top-centred, or bottom-centred placements could work in some cases (i.e., footers, newsletters, covers, videos), better ask your designer
- avoid right-logo placements
6. Symbol
WO/AO visual identity does have a representative symbol also included in the logo.
The WO/AO symbol may be used on badges and social media profiles and it contains a graphic of the map on Ontario inside a solid circle.
- The colour of the map of Ontario is always white on green
- The symbol is always coloured
7. Typography
For your WO/AO designs, use the OCASI brand font. You can:
8. Icons
The purpose of the icons used on different materials and UI should be informative and used to drive the eyes of your audience to specific areas of interest.
Small icons
- small icons are glyph icons small in size
- use icons that are very simple and recognizable
- solid style is preferred when possible
- use for lists
- use as a user interface element on menus or small areas
As for website icons, see the web application icons section in the Bootstrap Framework guide.
Large Icons
- large icons should be straight forward
- large icons have 2 levels of detail (background and main icon)
- use large icons to highlight subsections without too much content, or on banners and callouts