1. Logo composition

The OCASI logo has been used online since 1999. The visual branding should meet the needs of our staff, funders, and audience.

Please note that the OCASI brand logo consists of 2 elements vertically aligned:

1. the letter-mark “OCASI”, which is composed of the organization’s initials (acronym), without periods after each letter, and all capital letters
2. the proper name of the organization (“Ontario Council of Agencies Serving Immigrants”), written in title case, and placed underneath the letter-mark

In instances where the name of the organization is not easy to read due to its small size, the letter-mark should go alone. The same happens for descriptors [add link to descriptors section.

2. Download logo

The brand logo (letter-mark + organization’s name) is the preferred usage with funders, partners, media, and promotional work, including reports, research materials, and guides.

• You can download the OCASI logo from the assets page
• Before downloading a logo, learn about the types of files and their usage

3. Colours

OCASI’s brand colour palette consists of one primary core hue (OCASI green) used as a solid colour. The main colour usage is OCASI green combined with white and darker grey or black for text.

Download colour schemes (.txt, .json)
Check accessibility contrast grid

Greens

Greys

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 OCASI brand 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

2 or more equal logos

OCASI logo + Partner logo(s)

• Horizontal lock-up: place OCASI brand logo next to a brand partner logo.
• Stacked lock-up: place OCASI brand logo above a brand partner logo.
• Separator: you may add a thin grey line in between the OCASI brand logo and the brand partner logo.

OCASI logo + OCASI program logo

• It applies to Accessibility Initiative, Gender Based Violence, LearnAtWork, Mental Health Promotion, OrgWise, and Positive Spaces Initiative.
• There is a separator line in between the 2 logos.
• The lock-up is always horizontal.

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 OCASI brand logo is always:

• green, “OCASI green”, used on white or very light grey backgrounds
• black, used on white or very light backgrounds
• white, used on black, dark green, or dark grey backgrounds
• gray, used on white backgrounds for neutral design treatments

Rule of thumb:

• Whenever possible, work with the OCASI green logo version on white backgrounds. You can use white on green too.
• Do not use the OCASI brand logo on different colours rather than the ones indicated before.

The logo on graphical backgrounds

• Make sure the logo has enough contrast with the background
• Do not use the OCASI green 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

OCASI visual identity does not include a representative symbol.

Symbols are commonly used on social media profiles. Instead, use the OCASI letter-mark in white on a solid OCASI green background as a logo to refer to our presence on social media, such as on profile pages, timelines, groups, threads, or events.

Examples of usage are app icons or profile avatar logos on Facebook, LinkedIn, Twitter, or other platforms to join.

7. Typography

Text is one of the primary ways OCASI communicates with our audience because it sets the mood, tone, and style of our documents and designs.

Our research papers, policy reports, handouts, presentations, kits, flyers, posters, videos, webpages, and other documents should be easy to eye-scan and read.

The following fonts font family serves the objectives indicated in OCASI statement of principles and objectives.

Font family

OCASI brand font is IBM Plex™, a typeface family designed by Mike Abbink (IBM Brand Experience & Design) and Bold Monday type foundry.

• It is a neutral style typeface
• It includes Sans, Sans Condensed, Mono, and Serif subfamilies
• It has good legibility in print, web, and mobile interfaces
• It is designed to work for small and large font sizes
• It comes in different weights and styles
• The different font designs work well independently and together
• It does not need to be combined with other fonts at OCASI since it contains fonts that fall into multiple classifications (font superfamily)

Download

• IBM Plex Sans from Google Fonts
  Sans serif fonts are more contemporary and are suited for body text, headings, user interfaces, and are recommendable for mobile.

• IBM Plex Sans Condensed from Google Fonts
  Sans Condensed font is suitable to style headings used for news content types on mobile devices. It also works for marketing pieces such as web banners.

• IBM Plex Serif from Google Fonts
  Use serif fonts for editorial storytelling and research papers on print. It is also recommendable for headings paired with body copy using the sans font.

• IBM Plex Mono from Google Fonts
  Monospaced fonts are used for coding by developers and should also be utilized to show code snippets

• IBM Plex fonts from Adobe Fonts
  It includes some font families for non-Latin languages

🤔 🤔 🤔
What is Serif and Sans Serif? and what is the difference?

License

• IBM Plex™ is licensed under the Open Font License
• Fonts can be used freely in print and digital projects at OCASI

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