Brand Style Guide

Table of contents

1. Primary logo usage

Primary logo

The primary logo should be used wherever possible and in full color where viable. This version of the logo features the "mother" icon, and should be used in most circumstances.

Download logo

What to avoid

The primary logo letterforms should not be seprated, scaled, stacked or altered in color or color arrangement, except in very specialized circumstances.

2. Alternate icon usage

How to use the logo with icons

The logo may be used with multiple icons to add variety.

Icon 1 is the "mother" icon. It should be used in most placements, in print and when providing the logo to those outside the company. It should also be used internally to ensure consistency and prevent confusion. 

In special circumstances (and with designer approval), alternate versions of the logo may be used.

3. Secondary logos

Solid marks

The solid versions of the logo should be used when the full-color version of the logo would be obscured (e.g., placed over an image, solid color, pattern, or would otherwise become less visible), or when the logo is not a critical or primary element. The colours shown to the right should be used in most circumstances, though other colors from the full palette may be considered when warranted.

Download secondary marks

Website mark

The website mark may be used when referencing the website in print reports, advertisements or social media graphics when not used in conjunction with the Primary Logo. This mark may be displayed in the same solids as shown above or in full color as displayed here.

Download Website Mark

4. Logo color usage

Examples of proper usage

When possible, the logo should only be used on white and in full color. The examples on the right illustrate proper use of solid versions of the logo over various backgrounds when a white background isn’t feasible. Keep in mind color accessibility combinations when using the logo in any place where visibility is critical.

When using the logo over images, the image should have a duotone color treatment to ensure visibility, except in special cases. In rare circumstances where an image has a large dark or light area, a solid version of the logo that contrasts well may be used. The full color version of the logo should not be used over imagery.

The logo should not be used over patterns. The contrast is generally not sufficient and can obscure the visibility of the logo.

5. Logo size

Large

There are two sizes of the full logo mark in each color variation. One is for standard usage at most sizes, the other is intended for any placement where the logo will appear at a width of less than 1 inch or 150 pixels. Note the difference in size of the word "FUND," which extends under the “L.” Do not manually resize “FUND” to any other sizes. It can compete with the logo or become too small.

Download large logo

6. Social icon

M symbol

The M symbol should be used only in scenarios where the full name of the organisation will appear next to each use (e.g., social media profiles). The background should be Malala navy, and the colours of the symbol should not be modified as they use special variations of the color palette for legibility.

Download M icon

7. Icons

Select icons

Icons are used as accents throughout the Malala Fund brand. They reflect the individuality of the girls Malala Fund serves.

The icons should primarily be used in solid format in grayscale (as shown here, with cutout strokes to show the distinctive shapes), and always used in solid when used in multiples. They may appear sparsely over images, limited to only 1 image or hero image per page or setting, and can be used as markers above girls as a graphic representation. 

Colour icons should be used sparingly. Their usage is only permissible when the icon appears alone. These icons are more appropriate for collateral, such as buttons, t-shirts or other cases where the icon is a primary visual element that stands alone. These should not be used over an image or in layout designs with multiple icons.

Download icons

8. Base patterns

Select patterns

Patterns add a bold and global visual element to the brand.

Patterns are generated using icons created from the grid system. Pattern colours are based on one hue only, with variations in tint or shade to separate the pattern from the background. White and grayscale may also be used.

Patterns may be used as backgrounds, to add texture or to emphasise. Patterns should not appear over images, and copy should not appear over patterns with the exception of large headlines or titles. 

Download base patterns

9. Country patterns

Pattern examples

Country patterns are an exception to the pattern colour usage rule. Country patterns should use a unique icon, which will not be used elsewhere or for other patterns. The colours should reflect the country they represent. For example, the colours may reference that nation's flag or represent other elements specific to the region, such as clothing or geography. This sets them apart and makes them distinctive in all places that a particular country is referenced. 

Download country patterns

10. Colours

Primary colours

The brand palette is expansive with 5 primaries and 2 secondaries. In total there are 37 colours in the palette to work with. Always follow accessibility guidelines for colour to ensure critical content and design elements are legible for all users.

The primary colors should be used for primary elements, such as in the logo mark, titles, calls to action or instances with limited colours so that the core of the brand is consistent and represented completely.

Download colour guide

Secondary colours

In instances where additional colors are viable, secondary colours may be introduced (e.g., on the website, print reports or patterns). Zaynab purple should be reserved for special use cases, such as a special program or event. Najlaa teal may be used more frequently in patterns, background colours, and as an accent colour, or on web as a rollover or highlight colour.

11. Duotones

Navy duotones

Duotone images allow for a cohesive and branded look for images of lower quality.

Duotone treatements should be used very sparingly. They are primarily suited for accents, special treatment of images of lower quality, or for use when text or the logo must be used over an image. Multiple duotone images should generally not be used consecutively in the same page or design. They are best suited for smaller placements except in special circumstances.

Colours should be strictly adhered to for consistency, and to prevent images from straying into a rainbow direction. The priorities when selecting a treatment and exact colours are legibility, visibility and maintaining the character of the brand.

Warm gray duotones

These additional colours expand on the navy blue shadow tone, instead using a warm gray. Colour selection should be based upon placement. The goal should be cohesion with the design and the chosen colour should work well with the selected image.

12. Typography

Chiavettieri

Chiavettieri ("Chia") is the primary brand font for usage in headlines, headers and other large placements.

Chiavettieri should be used for all headlines in both print and digital. 

Headlines should also be used in primary brand colours, while subheads and lead-in sentences can use secondaries or grayscale.

Chiavettieri can be used through Adobe TypeKit.

View Chiavettieri on TypeKit

Pluto Sans & Lato

Pluto Sans and Lato are the two brand-approved san-serif fonts. Pluto Sans should be used for all body copy and secondary subheads for print, while Lato is reserved for web usage only, and replaces Pluto in all scenarios online.

Body copy should always appear in grayscale or navy, except in special circumstances.

Pluto Sans requires a license to use, so contact press@malalafund.org if usage is required. Lato is available through Adobe TypeKit (below), or from Google Fonts.

View Lato on TypeKit

About Malala Fund

Malala Fund is working for a world where all girls can choose their own future. Learn more about our work to ensure every girl has access to 12 years of safe, quality education at malala.org.

Download Full Brand Package