Brand Style Guide

Table of contents

1. Primary logo usage

Primary logo

The primary logo should be used wherever possible and in full colour 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 colour or colour arrangement, except in very specialised 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-colour version of the logo would be obscured (e.g., placed over an image, solid colour, patterns 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 colours 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 colour as displayed here.

Download website mark

4. Supporter logos

Large supporter logos

This version of the logo should be used in print where the size will be larger than 3" wide. For smaller or digital usage, please use the small version of this logo below. The logo should be used in full color where possible but navy and white variations are available for use cases where this isn't possible.

Download large supporter logos

Small supporter logos

This version of the logo should be used for digital use cases, or when used in print at less than 3" wide. The logo should be used in full color where possible but navy and white variations are available for use cases where this isn't possible.

Download small supporter logos

5. Logo color usage

Examples of proper usage

When possible, the logo should only be used on white and in full colour. 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 colour 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 colour 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 colour 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.

6. Logo size

Large

There are two sizes of the full logo mark in each colour 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 one 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

7. 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 colour palette for legibility.

Download M icon

8. Icons

Select icons

Icons are used as accents throughout the Malala Fund brand.

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

9. 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. Copy should not appear over patterns with the exception of large headlines or titles. 

Download base patterns

10. 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 in 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

11. Colours

Primary colours

The brand palette is expansive with five primaries and two secondaries. There are 37 colours in the palette in total. 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 colours 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 programme or event. Najlaa teal may be used more frequently in patterns, background colours, accents or on web as a rollover or highlight colour.

12. Duotones

Navy duotones

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

Duotone treatments 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.

13. 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 Fonts.

View Chiavettieri on TypeKit

Pluto Sans & Lato

Pluto Sans and Lato are the two brand-approved sans 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. Contact press@malalafund.org if usage is required. Lato is available through Adobe Font (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