logo

Style Guide

March 2020

Typography

Typography is an important part of creating a cohesive brand identity for The Change Foundation. The chosen fonts are legible. They complement the existing brand materials and will contribute to a strong brand using the existing framework.

Primary Web Font: Nunito

Nunito is the web font used for headings. It's a clean, rounded, easy-to-read font that's freely available through Google Fonts.

Secondary Web Font: Montserrat

Montserrat is used for digital body copy. It's a modern, sans-serif typeface that's freely available through Google Fonts.

Typographic Styles

Use the following (font, case, size, colour) for headings and paragraph copy:

H1: Nunito Bold, All Caps, 60pt

H1: Nunito Bold, 48pt

H2: Nunito Semi-Bold, All Caps, 36pt

H2: Nunito Semi-Bold, 36pt

H3: Nunito Semi-Bold, 24pt

Body: Montserrat Regular, 18pt

Body Subtitle: Montserrat Bold, 20pt

Primary Fill Button

The primary fill button should be used for important calls-to-action. Think: what is the most important thing a user needs to accomplish on a page? Use buttons only for those tasks. We don't want to overuse this button on the website.

Secondary Fill Button

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tertiary Fill Button

This tertiary link will be used a lot on the site. Most often it'll be used as a callout link to direct users to other pieces of content on the website.

Download Button

These buttons should be used for "products" like reports and presentations. They're included to help users that want to quickly download and save a report.

Normal

Embedded Links

This is how links would appear within body copy. Don't overuse links within body copy.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum ultricies dolor, id fringilla mauris cursus vulputate. Pellentesque eget elementum lacus. Suspendisse ut eros non nisi faucibus tincidunt at a nulla. Vivamus nec egestas enim, et efficitur velit. Duis eu dolor scelerisque, sodales tellus ut, aliquam neque. Donec vel sapien.

Social Links

These custom designed social links appear in the footer. They can also be used in other digital/physical assets like newsletters, posters, etc.

Graphic Elements

Patterns

This graphic pattern should be used sparingly to highlight critical information. Text should never appear directly on top of the graphic pattern. A background must sit on top of the graphic pattern to house the text. This ensures the text is legible.

pattern-1

A pattern example is shown in context below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit mi sapien, sed pulvinar ante elementum at. Cras vestibulum est porttitor est elementum malesuada. Proin venenatis libero orci, vestibulum sodales leo hendrerit vitae. Integer in ante consectetur mauris pulvinar aliquet eget et eros. Morbi eu sem efficitur, ultrices quam vel, dapibus odio. Duis mauris nulla, feugiat sed leo et, eleifend porttitor ligula. Pellentesque in dignissim mi, vel fringilla tellus. Ut sit amet gravida leo.

Never put text directly on the patterns.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit mi sapien, sed pulvinar ante elementum at. Cras vestibulum est porttitor est elementum malesuada. Proin venenatis libero orci, vestibulum sodales leo hendrerit vitae. Integer in ante consectetur mauris pulvinar aliquet eget et eros. Morbi eu sem efficitur, ultrices quam vel, dapibus odio. Duis mauris nulla, feugiat sed leo et, eleifend porttitor ligula. Pellentesque in dignissim mi, vel fringilla tellus. Ut sit amet gravida leo.

Patterened Border

This patterned border is used to punctuate certain elements like landing page banners. Like the graphic background, it should be used sparingly.

The patterned border is shown in context below.

Arrows

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu est id mi euismod eleifend ultricies quis ipsum. In hac habitasse platea dictumst. Aenean vestibulum lorem eu justo pellentesque, vitae cursus quam cursus. Nunc quis cursus mauris. Morbi ut libero finibus, feugiat nisl ut, ullamcorper elit. Integer accumsan pharetra enim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu est id mi euismod eleifend ultricies quis ipsum. In hac habitasse platea dictumst. Aenean vestibulum lorem eu justo pellentesque, vitae cursus quam cursus. Nunc quis cursus mauris. Morbi ut libero finibus, feugiat nisl ut, ullamcorper elit. Integer accumsan pharetra enim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu est id mi euismod eleifend ultricies quis ipsum. In hac habitasse platea dictumst. Aenean vestibulum lorem eu justo pellentesque, vitae cursus quam cursus. Nunc quis cursus mauris. Morbi ut libero finibus, feugiat nisl ut, ullamcorper elit. Integer accumsan pharetra enim.

Colour

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum ultricies dolor, id fringilla mauris cursus vulputate. Pellentesque eget elementum lacus. Suspendisse ut eros non nisi faucibus tincidunt at a nulla. Vivamus nec egestas enim, et efficitur velit. Duis eu dolor scelerisque, sodales tellus ut, aliquam neque. Donec vel sapien.

Primary Colour

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum ultricies dolor, id fringilla mauris cursus vulputate. Pellentesque eget elementum lacus. Suspendisse ut eros non nisi faucibus tincidunt at a nulla.

R 105 G 55 B 125

#69377D

Secondary Colours

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum ultricies dolor, id fringilla mauris cursus vulputate. Pellentesque eget elementum lacus. Suspendisse ut eros non nisi faucibus tincidunt at a nulla.

R 24 G 181 B 192

#1BB5C0

R 241 G 90 B 41

#F15A29

Tertiary Colours

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum ultricies dolor, id fringilla mauris cursus vulputate. Pellentesque eget elementum lacus. Suspendisse ut eros non nisi faucibus tincidunt at a nulla.

R 126 G 206 B 204

#7ECECC

R 253 G 185 B 19

#FDB913

R 182 G 95 B 41

#B63B29

R 109 G 110 B 113

#6D6E71

Be Engaged.

Sign up for out newsletter, Top of Mind.


By submitting this form, you are consenting to receive marketing emails from: The Change Foundation, 200 Front Street West, , Toronto, ON, M5V 3M1, http://www.changefoundation.com. You can revoke your consent to receive emails at any time by using the SafeUnsubscribe® link, found at the bottom of every email. Emails are serviced by Constant Contact