1 of 38

Design Element Reference Slides

References for ADB presentations

2 of 38

BASIC INFO:

​

Font:

  • Raleway Modified for ALL headings & titles
  • Open Sans for all body text

​

Logo:

  • Logo must be included on first and last slide of presentation – additional use is voluntary
  • White logo ONLY used on black background
  • Black logo ONLY be used on white background

​

Text Size & Quantity:

  • Title/heading text MIN 30pt font
  • Body text MIN 20pt font
  • Avoid paragraphs

​

​

​

​

​

​

​

​

Government of Ontario Style Guide

Linked here

3 of 38

OPS �Colour Palettes

The OPS has many designated colour palettes to be used across presentations, digital media, and any OPS owned content. 

​

  1. System Colours:

Used for assigned purposes across digital platforms and systems. 

​

2. Greyscale Palette:

Used for hard-coded elements like tables. Can be mixed with the accent palette with discretion.

​

3. Accent Palette:

Used for digital marketing or other page elements. This is the primary colour palette used for presentations and slideshows.

​

​

​

Government of Ontario Style Guide

Linked here

4 of 38

System Colours

Text

#1A1A1A

Primary Buttons

#FFFFFF

Alert

#CD0000

Alert

Light

#FCEFF0

Success

#118847

Success

Light

#E5F0E9

Warning

#FFD440

Warning

Light

#FEF6DC

Information

#1080A6

Link

#0066CC

Information Light

#E2F0F4

Link - Hover

#00478F

Secondary -

Hover

#E0F0FF

Secondary - Active

#C2E0FF

Link - Active

#002142

Link - Visited

#551A8B

Tertiary - Hover

#E8E8E8

Tertiary - Active

#D1D1D1

Focus Ring

#009ADB

5 of 38

Greyscale Palette

#999999

#F2F2F2

#CCCCCC

#4D4D4D

#666666

Contrast note: When using lighter greys as backgrounds, use black text #1A1A1A

Contrast note: When using darker greys as backgrounds, use white text #FFFFFF

6 of 38

OPS�Accent Palette

Every colour in the accent palette has a Base, Dark (to use with system white text), and Light (to use with system black text) version.

​

The accent palette should be used for all design purposes given that;

  1. System colours are used for assigned elements (like link text) 
  2. Accessible contrast ratios are maintained

​

​

​

Government of Ontario Style Guide

Linked here

May be used for:

  • Non-link icons
  • Illustrations 
  • Infographics 
  • Timelines 
  • Callouts 
  • Banner images
  • Images 

​

May NOT be used for:

  • Page backgrounds
  • Form elements
  • Table elements
  • Any elements listed in the system colour palette.

​

7 of 38

​

​

Gold

​

Yellow

​

Taupe

​

Green

​

Lime

​

Teal

Base

#CBA52E

#FCAF17

#C1B28F

#39B54A

#8DC63F

#49A7A2

Light

#F0E7CC

#F8E5C3

#EBE7DB

#D1EFD4

#DDEDC7

#CFEDED

Dark

#86743D

#8A600D

#7B725C

#2B8737

#5F8129

#367A76

​

​

Sky

​

Blue

​

Purple

​

Orange

​

Red

​

Magenta

Base

#00B2E3

#3193CC

#B975B7

#F15A22

#F0454B

#F03093

Light

#C5EEFA

#DBE9F5

#F1E3F2

#FEE1D9

#FFE0E2

#FEDFF0

Dark

#1080A6

#0369AC

#92278F

#C64A1C

#D81A21

#C00264

8 of 38

OPS �Design Elements

​

Use the following slides to easily find design elements to use throughout your presentations. 

All visuals are free use; created by/for OPS employees for OPS use. No credits needed.

​

Copy & Paste elements from the following slides throughout your presentation as needed, then delete the reference slides after.

​

Ctrl + c / Ctrl + v Windows

Or

Command + C / Command V on Mac

​

​

​

​

​

Government of Ontario Style Guide

Linked here

9 of 38

Use on white

background only

​

The logos must be incorporated at the beginning and end of a presentation, but are encouraged to be incorporated throughout where possible

Use on black background only

​

​

10 of 38

Ontario Logos

​

For use on light background

11 of 38

Ontario Logos

​

For use on dark background

12 of 38

Ontario Coat of Arms

​

3 colour variants

13 of 38

Ontario Shield of Arms

​

3 colour variants

14 of 38

Ontario

International

Identifiers

15 of 38

Primary Icons

16 of 38

Secondary Icons:

Feedback

17 of 38

Secondary Icons:

Maps & Transportation

18 of 38

Secondary Icons:

Payment

19 of 38

Secondary Icons:

Communication and Social Media

20 of 38

Secondary Icons:

Multimedia

21 of 38

Secondary Icons: Interactions

22 of 38

Secondary Icons:

Accounts and Web Applications

23 of 38

Unique Shapes – Coloured Versions

​

Using OPS official colours

24 of 38

Unique Shapes – Black & White

​

OPS colour versions available slides 27-38

25 of 38

Additional Design Tools

​

Free Transparent Icons:

  • The Noun Project – Link
  • Canva (account required) - Link
  • FLATICON - Link

​

Free Images:

  • Unsplash - Link
  • Take or use your own photos!
  • Canva (account required) - Link

​

Inspiration/Templates:

  • Pinterest
  • Canva (account required) - Link
  • SlidesCarnival - Link
  • SlidesGo - Link

​

​

​

​

​

​

​

Government of Ontario Style Guide

Linked here

26 of 38

Additional OPS �Tools

​

Design:

Visual identity directive - link

Social media design guide - link

OPS official style guide - link

​

Elements:

Ontario logo download files - link

Old OPS PP template - link

​

Accessibility:

Copyright policy - link

Web accessibility guidelines - link

​

​

​

​

​

​

​

​

Government of Ontario Style Guide

Linked here

27 of 38

Unique Shapes – Dark Red

28 of 38

Unique Shapes – Dark Orange

29 of 38

Unique Shapes – Dark Yellow

30 of 38

Unique Shapes – Dark Taupe

31 of 38

Unique Shapes – Dark Gold

32 of 38

Unique Shapes – Dark Lime

33 of 38

Unique Shapes – Dark Green

34 of 38

Unique Shapes – Dark Teal

35 of 38

Unique Shapes – Dark Sky

36 of 38

Unique Shapes – Dark Blue

37 of 38

Unique Shapes – Dark Purple

38 of 38

Unique Shapes – Dark Magenta