1. Logo composition

Please note that the LearnAtWork logo works as a descriptor and consists of 2 elements horizontally aligned:

1. the OCASI logo in colour (OCASI green)
2. the letter-mark “LearnAtWork”, written in title case without spaces in between letters and the tagline “Online Learning” placed underneath.

2. Download logo

The LearnAtWork logos will be used with funders, partners, media, and promotional work, including e-learning materials and videos.

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

3. Colours

The LearnAtWork colours are the same as the OCASI’s brand colour palette.

The LearnAtWork logo uses one solid primary solid hue (black) for its descriptor: the “LearnAtWork” letter-mark and the tagline “Online Learning”.

The main colour usage is OCASI green combined with white and darker grey or black for text.

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 LearnAtWork 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

LearnAtWork logo + Partner logo(s)

This option works for 2 or more equal logos:

• Horizontal lock-up: place LearnAtWork logo next to a brand partner logo.
• Stacked lock-up: place LearnAtWork 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 LearnAtWork logo is always:

• green and black, 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
• gray, used on white backgrounds for neutral design treatments

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

LearnAtWork does not not include a representative symbol.

Symbols are commonly used on social media profiles. If needed, use the OCASI letter-mark in white on a solid OCASI green background as a logo to refer to your presence 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

For your LearnAtWork designs, use the OCASI brand font. You can:

• download IBM Plex fonts
• check the visual identity guide on typography

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

9. Badges

You may use badges to help your users visually identify some pieces of content (for example, courses). Do not confuse with digital badges, used for authentication or recognition.

Badges should:

• identify the content of the course
• be simple and easy to scan (short names or acronyms)
• use branded colours when possible
• you may use different accent colours to identify different groups of courses

You can download your course badges from the assets page.

10. Certificates

LearnAtWork uses certificate backgrounds that are uploaded to the system.

The certificate designs should:

• be simple to not interfere with content
• have white or very light background
• have enough white spaces

You can download the certificate backgrounds under the assets section.