Skip to main content

Neighbours, Friends and Families

Know how to make good use of the IRCNFF campaign logo, colours, co-branding, and other other visual identity elements


On this page:

  1. Logo composition
  2. Download logo
  3. Colours
  4. Co-branding
  5. Logo usage
  6. Symbol
  7. Typography
  8. Icons

1. Logo composition

IRCNFF stacked logo in colour IRCNFF horizontal logo in colour

Please note that the IRCNFF logo consists of 2 elements stacked or horizontally aligned:

  1. the symbol, which is composed of 3 “people” shapes horizontally aligned and interlaced.

  2. the proper name of the campaign “Neighbours, Friends and Families”, in title case and placed underneath the symbol (stacked version) or besides it (horizontal version). Below the proper name the following wording reads “Immigrant & Refugee Communities” in title case.

In instances where the wording in the logo is not easy to read due to its small size, the symbol should go alone.

The IRCNFF logos will be used with funders, partners, editorial, and promotional work.

You can download the IRCNFF logos from its download section under assets, including low and high resolution files.

3. Colours

The brand colour palette consists of:

  • 1 primary core hue (IRCNFF blue) used as a solid colour
  • 1 solid accent hue (magenta)
  • 2 secondary accent hues (amber and green)

The main colour usage is IRCNFF blue combined with white or light accented backgrounds and darker grey or black for text.

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

Main colours

Primary blue

HEX: #0A77A7 | CMYK: 88 / 46 / 17 / 1

Sample usage: dark pink backgrounds (footers, aside blocks, covers), coloured headlines

Primary darker blue

HEX: #055F86 | CMYK: 94 / 60 / 28 / 9

Sample usage: call-to-actions (CTAs), dark topbars, dark footers

Primary accent pink

HEX: | CMYK: 14 / 99 / 16 / 0

Sample usage: links, accents, icons

Accent amber

HEX: | CMYK: 1 / 26 / 94 / 0

Sample usage: accents for graphics, illustrations

Accent green

HEX: | CMYK: 26 / 1 / 96 / 0

Sample usage: accents for graphics, illustrations

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

Logos of IRCNFF and OCASI

Co-branding shows a partnership between your program/project/organization and another organization and represents an exchange of credibility between brands.

Display the IRCNFF 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

IRCNFF logo + Partner logo(s)

This option works for 2 or more equal logos:

  • Horizontal lock-up: place IRCNFF logo next to a brand partner logo.
  • Stacked lock-up: place IRCNFF logo above a brand partner logo.
  • Separator: add a thin grey line in between the IRCNFF 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

Logo of IRCNFF on white background

Do

Logo of IRCNFF on blue background

Do

Logo of IRCNFF in gray on white background

Do

Logo of IRCNFF in white on gray background

Do

Logo of IRCNFF in black on white background

Do

Logo of IRCNFF in white on black background

Do

Logo of IRCNFF on blue background

Don’t

Logo of IRCNFF on black background

Don’t

Logo of IRCNFF in pink on white background

Don’t

Logo of IRCNFF in black on pink background

Don’t

The colour of the IRCNFF logo is always:

  • coloured, used on white or very light grey backgrounds
  • black, used on white or very light backgrounds
  • white, used on black, darker purple, or dark grey backgrounds
  • gray, used on white backgrounds for neutral design treatments

Whenever possible, work with the full IRCNFF coloured 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 coloured IRCNFF 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

Logo of IRCNFF narrowed

Don’t

Logo of IRCNFF stretched and rotated

Don’t

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

Symbol of IRCNFF on white background

Do

Symbol of IRCNFF on blue background

Don’t

IRCNFF visual identity does have a representative symbol also included in the logo.

The IRCNFF symbol may be used on badges and social media profiles and it contains an illustration of 3 “people” shapes horizontally aligned and interlaced.

  • The symbol should use always its coloured version.

7. Typography

For your IRCNFF digital and print 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