Digital Style Guide

Main page content begins here

The digital style guide defines the visual identity for edmonton.ca. From use of the colours and fonts, to the style of photography, you'll find guidelines for all the visual basics here.

Accessibility

Edmonton.ca and any of its associated sites are required to meet the Accessibility standards set by the Web Content Accessibility Guidelines (WCAG). Sites that are part of the City of Edmonton should:

Maintain site-wide consistency with colours and visual design assets
Be usable through a screen reader
Be mindful of colour for interactive items including no red/green buttons or toggles

Visual Identity Standards

Learn more about the City of Edmonton logo, colours, photography and symbols in our Visual Identity Standards.

Visual Identity Standards: Foundational Elements

This document is a designer manual, specifically intended to support graphic designers and creative professionals in expressing the City’s brand consistently, creatively and effectively.

Policy

Compliance to the Visual Identity Standards is mandatory for all staff and materials that do not comply are prohibited.

The City's VisuaI Identity Standards are under the authority of the Communications Administrative Policy, which applies to all employees, as well as to contractors and consultants working on behalf of the City. Please note the square logo is the City's primary visual identifier. The creation of any other logos to identify, represent, advertise or promote a department, branch, program or other City entity is prohibited.

Logo Guidelines

The responsive edmonton.ca site uses an alternate treatment of the city logo.

Because the site templates have the ability to be themed, the logo background colour should be flexible and appear in unity with the theme colours. In order to maintain flexibility, the gradient in the standard background of the Edmonton logo has been removed and an interchangeable, solid background colour has been kept.

The squared logo is present above the minimum browser width of 1024px. The maximum width and height of the square is set to be 147px. The default colour of the background is set to be #005087 blue on standard, un-themed pages.

The wordmark is for smaller screens when you have a constrained height.

Colour Guidelines

The Edmonton colour palette includes primary and secondary colours. The primary colours are used for reproduction of the corporate signature. Secondary colours are used in the expression of the Edmonton brand.

Primary Colours

There are three main variants of blue used by the City:

City Blue
#005087

Dark Blue
#193A5A

Medium Blue
#0081BC

Complement Colours

Use these colours optionally on buttons and other interactive elements.

Orange
#E1853E

Yellow
#F4D043

Red
#CF464D

Green
#66B677

Supporting Colours

Colours for text, line, and background elements

Black
#444444

Dark Shade
#B6D0E2

Medium Shade
#D0E0EA

Light Shade
#F3F4F5

Photography

The photographic direction for both the City of Edmonton's digital and print collateral should fit in the following criteria.

People

All photos of people should capture them in a manner that show connection in a natural environment. This may be a connection with a physical object, other people or an environment. The interaction should begin to tell the story, which will increase the value of the message.

Environment

All photos of the City’s natural environment should capture the beauty in a way that emphasizes a unique landmark, region or feature. This reminds the viewer how amazing the City can be and encourages personal connection. Unique angles, cropping and depth of field help to create emotion and inspire connection.

Structure and Artifacts

These photos should tell a story of past or future while aligning it to community connection. Use a shallow depth of field to add interest to the composition and highlight your subject.

Assets

The City captures and collects photography relative to its services, events and business. Please contact brandteam@edmonton.ca prior to organizing a shoot or purchasing photos.

Licensing

Please note the City of Edmonton must obtain proper licence or include appropriate attribution for all image and video assets.

Image optimization

Users may be limited by their internet speed so reducing image file size is important to ensure a fast and enjoyable experience on the web.

Writing for the Web

On edmonton.ca, we aim for the language to be:

Smart and simple
Clear and concise
Understanding and professional
Receptive and responsive

We defer to the Canadian Oxford Dictionary and Canadian Press Stylebook, recognizing there are some exceptions applicable to the web.

We know that most people who use our site are on mobile and they are here to do something. Visitors generally want to find information, register/pay for something or report a concern. This is top of mind in the design of our pages.

Typography

Font style and weight selection has been filtered for the web.

Because each custom web-font variant and weight may be loaded individually by the browser, only a few specific font variants have been selected from the city's corporate type standards.

Please contact b randteam@edmonton.ca for more information around font licenses for print, desktop, web and apps.

Prelo is used for headings.

Open Sans is used for paragraphs and lists.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

USE UPPERCASE TEXT

Use uppercase text sparingly for titles as an optional stylistic treatment.

Titles use 'Title Case' or 'Sentence case'

Generally, title case is more official while sentence case is more casual. For the City's online presence, the preference is to use title case over sentence case.

Regardless of which case is used, that style must be applied consistently throughout each section, and using either a bigger font-size than the paragraph text, or in bold to preserve typographical hierarchy.

Font weights used

Prelo - Bold, Book

Open Sans - Bold, Regular, Light

Base font size should be set to 16px on screen. Scaling fonts should be done using em sizing. Please keep line lengths to an average of 10-17 words per line. Longer line lengths will make paragraphs more difficult to read, as would very short line lengths.

Contact Us

Brand Team

If you have questions about the proper application of the standards, contact the Brand Team.

Email	brandteam@edmonton.ca