Technical specifications for the Web and mobile presence

1.1.1. Canada Wordmark

Location:

• Aligned horizontally with the left edge of the Government of Canada navigation bar.
• Centred vertically.

Dimensions:

• Width: 90 pixels.
• Height: 22 pixels.

Presentation:

• Foreground colour: White (#fff).
• Background colour: Transparent.
• White flag symbol.
• Text equivalent: "Symbol of the Government of Canada".
• Image: wmms.

1.1.2. Home button

Location:

• When the menu button is present: Aligned horizontally with the left edge of the menu button.
• When the menu button is omitted and the search button is present: Aligned horizontally with the left edge of the search button.
• When both the menu button and the search button are omitted: Aligned horizontally with the left edge of the settings button.

Dimensions:

• Width: 46 pixels.
• Height: 32 pixels.

Presentation:

• Foreground colour: White (#fff).
• Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.
• Icon: House (), 18 pixels by 18 pixels, centred horizontally and vertically.
• Text equivalent: "Home".

Behaviour:

• Activating the home button returns the user to the home page/screen.

Exceptions:

The home button is omitted when:

• The page/screen is the home page/screen.
• The back button is present.
• Activating the home button is likely to cause user error or loss of data, for example, in a transactional workflow.
• The site/application does not have a home page/screen.
• The site/application is a single-page/screen site/application.

1.1.3. Back button

Location:

• When the menu button is present: Aligned horizontally with the left edge of the menu button.
• When the menu button is omitted and the search button is present: Aligned horizontally with the left edge of the search button.
• When both the menu button and the search button are omitted: Aligned horizontally with the left edge of the settings button.

Dimensions:

• Width: 46 pixels.
• Height: 32 pixels.

Presentation:

• Foreground colour: White (#fff).
• Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.
• Icon: Back arrow (), 18 pixels by 18 pixels, centred horizontally and vertically.
• Text equivalent: "Back."

Behaviour:

• Activating the back button return the user to the previously-viewed page/screen.

Exceptions:

The back button is omitted when:

• There is no previously-viewed page/screen.
• The home button is present.
• Activating the back button is likely to cause user error or loss of data, for example, in a transactional workflow.
• The site/application is a single-page/screen site/application.

1.1.4. Menu button

Location:

• When the search button is present: Aligned horizontally with the left edge of the search button.
• When the search button is omitted: Aligned horizontally with the left edge of the settings button.

Dimensions:

• Width: 46 pixels.
• Height: 32 pixels.

Presentation:

• Foreground colour: White (#fff).
• Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.
• Icon: Three bars (), 18 pixels by 18 pixels, centred horizontally and vertically.
• Text equivalent: "Menu."

Behaviour:

• Activating the menu button displays the navigation overlay.

Exceptions:

The menu button is omitted when:

• Navigation is provided in the body.
• Activating a menu item is likely to cause user error or loss of data, for example, in a transactional workflow.
• The site/application is a single-page/screen site/application.

1.1.5. Search button

Location:

• Aligned horizontally with the left edge of the settings button.

Dimensions:

• Width: 46 pixels.
• Height: 32 pixels.

Presentation:

• Foreground colour: White (#fff).
• Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.
• Icon: Magnifying glass (), 18 pixels by 18 pixels, centred horizontally and vertically.
• Text equivalent: "Search".

Behaviour:

• Activating the search button displays the search overlay.

Exceptions:

The search button is omitted when:

• Search is not a function of the site/application.
• Search is a primary function of the site/application and is provided in the body.
• Activating a search is likely to cause user error or loss of data, for example, in a transactional workflow.

1.1.6. Settings button

Location:

• Aligned horizontally with the right edge of the Government of Canada navigation bar.

Dimensions:

• Width: 46 pixels.
• Height: 32 pixels.

Presentation:

• Foreground colour: White (#fff).
• Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.
• Icon: Cog (), 18 pixels by 18 pixels, centred horizontally and vertically.
• Text equivalent: "Settings".

Behaviour:

• Activating the settings button displays the settings menu.

2.2.1. Server message blocks

Each server message block contains a server message title, a server message body and links to the home page and the contact information.

Location:

• First official language: Aligned vertically with the bottom edge of the last site/application title.
• Second official language: Aligned vertically with the bottom edge of the server message block in the first official language.
• Additional languages: Aligned vertically with the bottom edge of the previous server message block.

Dimensions:

• Width: 100% (full width of the page/screen).

2.2.2. Terms and conditions link

The terms and conditions link is displayed in each language in which the server message is provided.

Location:

• First official language: Aligned vertically with the bottom edge of the last server message block.
• Second official language: Aligned vertically with the bottom edge of the terms and conditions link in the first official language.
• Additional languages: Aligned vertically with the bottom edge of the previous terms and conditions link.
• Aligned horizontally with the left edge of the page/screen.

Presentation:

• Text:
  • First official language: "Terms and conditions" in the first official language.
  • Second official language: "Terms and conditions" in the second official language.
  • Additional languages: "Terms and conditions" in the additional language and in its native alphabet.

Behaviour:

• Activating the terms and conditions link takes the user to the notices described in Appendix C of the Standard on Web Usability.

2.2.3. Canada Wordmark

Location:

• Below the last terms and conditions link.
• Centred horizontally.

Dimensions:

• Width: 90 pixels.
• Height: 22 pixels.

Presentation:

• Foreground colour: Black (#000).
• Background colour: White (#fff).
• Black text and FIP red flag symbol.
• Text equivalent: "Symbol of the Government of Canada".
• Displayed as a block-level element.
• Image: wmms.

3.2.1. Site/application title in the first official language

Location:

• Aligned vertically with the top edge of the site/application title block.
• Aligned horizontally with the left edge of the site/application title block.
• On the same baseline as the site/application title in the second official language.

Presentation:

• Text: The title of the site/application in the first official language.
• Alignment: Left-aligned.

3.2.2. Site/application title in the second official language

Location:

• Aligned vertically with the top edge of the site/application title block.
• Aligned horizontally with the right edge of the site/application title block.
• On the same baseline as the site/application title in the first official language.

Presentation:

• Text: The title of the site/application in the second official language.
• Alignment: Right-aligned.

3.2.3. Site/application titles in additional languages

Location:

• Below the site/application title in the first and second official languages.
• First, third and subsequent odd-numbered additional language:
  • Aligned horizontally with the left edge of the site/application title block.
  • On the same baseline as the next even-numbered additional language.
• Second, fourth and subsequent even-numbered additional language:
  • Aligned horizontally with the right edge of the site/application title block.
  • On the same baseline as the previous odd-numbered additional language.

Presentation:

• Text: The title of the site/application in the additional language and in its native alphabet.
• Alignment:
  • First, third and subsequent odd-numbered additional language: Left-aligned.
  • Second, fourth and subsequent even-numbered additional language: Right-aligned.

3.3.1. Language link for the first official language

Location:

• Aligned vertically with the top edge of the language links block.
• Aligned horizontally with the left edge of the language links block.
• On the same baseline as the language link for the second official language.

Dimensions:

• Width: 50% of the width of the page/screen.
• Height: 36 pixels.

Presentation:

• Foreground colour: White (#fff).
• Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.
• Text: The official name of the first official language in its native language and alphabet.

3.3.2. Language link for the second official language

Location:

• Aligned vertically with the top edge of the language links block.
• Aligned horizontally with the right edge of the language links block.
• On the same baseline as the language link for the first official language.

Dimensions:

• Width: 50% of the width of the page/screen.
• Height: 36 pixels.

Presentation:

• Foreground colour: White (#fff).
• Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.
• Text: The official name of the second official language in its native language and alphabet.

3.3.3. Language link for additional languages

Location:

• Below the language links for the first and second official languages.
• First, third and subsequent odd-numbered additional language:
  • Aligned horizontally with the left edge of the language links block.
  • On the same baseline as the language link for the next even-numbered additional language.
• Second, fourth and subsequent even-numbered additional language:
  • Aligned horizontally with the right edge of the language links block.
  • On the same baseline as the language link for the previous odd-numbered additional language.

Dimensions:

• Width: 50% of the width of the page/screen.
• Height: 36 pixels.

Presentation:

• Foreground colour: White (#fff).
• Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.
• Text: The official name of the first official language in its native language and alphabet.

3.4.1. Terms and conditions link for the first official language

Location:

• Aligned vertically with the top edge of the terms and conditions links block.
• Aligned horizontally with the left edge of the terms and conditions links block.
• On the same baseline as the terms and conditions link for the second official language.

Dimensions:

• Width: 50% of the width of the page/screen.
• Height: 36 pixels.

Presentation:

• Foreground colour: White (#fff).
• Background colour: Top-to-bottom linear gradient from #f5f5f5 to #d5d5d5.
• Text: "Terms and conditions" in the first official language and in its native alphabet.

3.4.2. Terms and conditions link for the second official language

Location:

• Aligned vertically with the top edge of the terms and conditions links block.
• Aligned horizontally with the right edge of the terms and conditions links block.
• On the same baseline as the terms and conditions link for the first official language.

Dimensions:

• Width: 50% of the width of the page/screen.
• Height: 36 pixels.

Presentation:

• Foreground colour: White (#fff).
• Background colour: Top-to-bottom linear gradient from #f5f5f5 to #d5d5d5.
• Text: "Terms and conditions" in the second official language and in its native alphabet.

3.4.3. Terms and conditions link for additional languages

Location:

• Below the terms and conditions links for the first and second official languages.
• First, third and subsequent odd-numbered additional language:
  • Aligned horizontally with the left edge of the terms and conditions links block.
  • On the same baseline as the terms and conditions link for the next even-numbered additional language.
• Second, fourth and subsequent even-numbered additional language:
  • Aligned horizontally with the right edge of the terms and conditions links block.
  • On the same baseline as the terms and conditions link for the previous odd-numbered additional language.

Dimensions:

• Width: 50% of the width of the page/screen.
• Height: 36 pixels.

Presentation:

• Foreground colour: White (#fff).
• Background colour: Top-to-bottom linear gradient from #f5f5f5 to #d5d5d5.
• Text: "Terms and conditions" in the additional language and in its native alphabet.

4.1.1. Title

Location:

• Centred horizontally and vertically.

Dimensions:

• Width: The width of the title bar less the width of the back and close buttons.

Presentation:

• Foreground colour: White (#fff).
• Single-line, no wrapping.
• Overflow: ellipsis.

Exceptions:

The title is omitted when:

• It contains a single element, for example, a map, a photograph or a video.

4.1.2. Back button

Location:

• Aligned horizontally with the left edge of the title bar.

Dimensions:

• Width: 18 pixels.
• Height: 18 pixels.

Presentation:

• Foreground colour: White (#fff).
• Background colour: Transparent.
• Icon: Back arrow (), 18 pixels by 18 pixels, centred horizontally and vertically.
• Text equivalent: "Back."

Behaviour:

• Activating the back button returns the user to the content overlay or menu from which the content overlay was launched.

Exceptions:

The back button is omitted when:

• The content overlay was not launched from a content overlay or menu.
• The result of activating the back button is the same as the result of activating the close button.

4.1.3. Close button

Location:

• Aligned horizontally with the right edge of the title bar.

Dimensions:

• Width: 18 pixels.
• Height: 18 pixels.

Presentation:

• Foreground colour: White (#fff).
• Background colour: Transparent.
• Icon: X (), 18 pixels by 18 pixels, centred horizontally and vertically.
• Text equivalent: "Close".

Behaviour:

• Activating the close button removes the content overlay from view.

5.1.1. Title

Location:

• Centred horizontally and vertically.

Dimensions:

• Width: The width of the title bar less the width of the back and close buttons.

Presentation:

• Foreground colour: White (#fff).
• Single-line, no wrapping.
• Overflow: ellipsis.

5.1.2. Back button

Location:

• Aligned horizontally with the left edge of the title bar.

Dimensions:

• Width: 18 pixels.
• Height: 18 pixels.

Presentation:

• Foreground colour: White (#fff).
• Background colour: Transparent.
• Icon: Back arrow (), 18 pixels by 18 pixels, centred horizontally and vertically.
• Text equivalent: "Back."

Behaviour:

• Activating the back button return the user to the previous level of menu.

Exceptions:

The back button is omitted when:

• There is no previous level of menu.

5.1.3. Close button

Location:

• Aligned horizontally with the right edge of the title bar.

Dimensions:

• Width: 18 pixels.
• Height: 18 pixels.

Presentation:

• Foreground colour: White (#fff).
• Background colour: Transparent.
• Icon: X (), 18 pixels by 18 pixels, centred horizontally and vertically.
• Text equivalent: "Close".

Behaviour:

• Activating the close button closes all open menus.

5.2.1. Menu items

Location:

• If it is the first item in the menu's body: Aligned vertically with the bottom edge of the title bar.
• If it is the second or subsequent item in the menu: Aligned vertically with the bottom edge of the previous menu item.

Dimensions:

• Width:
  • When the menu body contains only menu items: 100% (full width of the menu).
  • When the menu body contains menu items and other elements: 100% (full width of the body).

Presentation:

• Background colour: Top-to-bottom linear gradient from #f5f5f5 to #d5d5d5.

Behaviour:

• Activating a menu item displays either a sub-menu, a page/screen or a content overlay.

6.1.1. Title

Presentation:

• Text: "Menu".

6.2.1. Breadcrumb navigation

The breadcrumb navigation contains horizontal list starting with a home link, followed by links to each of the pages/screens above the current page/screen in the site/application's hierarchy, and ending with the title of the current page/screen.

Location:

• Aligned vertically with the top edge of the body.

Presentation:

• Foreground colour:
  • Breadcrumb links: #295376.
  • Current page/screen: #555.
• Background colour: Top-to-bottom linear gradient from #f0efef to #dfdfdd.
• Text:
  • Home breadcrumb link: "Home".
  • Breadcrumbs links and current page/screen: The title of the corresponding page/screen.
• Separator: bcrumb-mobile.png.

Behaviour:

• Home breadcrumb link:
  • Activating the home link returns the user to the home page/screen.
• Subsequent breadcrumb links:
  • Activating the breadcrumb link takes the user to the corresponding page/screen.

Exceptions:

The breadcrumb navigation is omitted when:

• The page/screen is the home page/screen.
• Activating a breadcrumb item is likely to cause user error or loss of data, for example, in a transactional workflow.

6.2.2. Secondary navigation

Location:

• When the breadcrumb navigation is present: Below the breadcrumb navigation.
• When the breadcrumb navigation is omitted: At the top of the body.

Dimensions:

• 100% of the width of the body.

Exceptions:

The secondary navigation is omitted when:

• It is not used by the site/application.

6.2.3. Site/application navigation

Location:

• When the secondary navigation is present: Below the secondary navigation.
• When the secondary navigation is omitted and the breadcrumb navigation is present: Below the breadcrumb navigation.
• When both the secondary navigation and the breadcrumb navigation are omitted: At the top of the body.

Dimensions:

• 100% of the width of the body.

Exceptions:

The site/application navigation is omitted when:

• It is not used by the site/application.

7.1.1. Title

Presentation:

• Text: "Search".

7.2.1. Search input field

Location:

• Aligned vertically with the bottom edge of the title bar; centred horizontally.

Dimensions:

• Width: 100% of the width of the body.
• Height: 31 pixels.

Presentation:

• Label: "Search".

7.2.2. Search button

Location:

• Aligned vertically with the bottom edge of the search input field.
• Aligned horizontally with the right edge of the body.

Dimensions:

• Width: 100% of the width of the body.
• Height: 39 pixels.

Presentation:

• Foreground colour: Black (#000).
• Background colour: Top-to-bottom linear gradient from #f5f5f5 to #d5d5d5.
• Text: "Search".

Behaviour:

8.1.1. Title

Presentation:

• Text: "Settings".

8.2.1. Sign-in/sign-out menu item

The sign-in/sign-out menu item is identical to a menu item, except for the following differences.

Presentation:

• Text:
  • When the user is signed-in: "Sign out".
  • When the user is signed-out: "Sign in".

Behaviour:

• When the user is signed-in: Activating the sign-in/sign-out menu item signs the user out of the site/application.
• When the user is signed-out: Activating the sign-in/sign-out menu item allows the user to sign in of the site/application.

Exceptions:

The sign-in/sign-out mechanism is omitted when:

• The site/application does not require the user to sign-in to use it.

8.2.2. Language menu menu item

The language menu menu item is identical to a menu item, except for the following differences.

Presentation:

• Text: "Language".

Behaviour:

• Activating the language menu item displays the language menu.

Exceptions:

The language menu menu item is omitted when:

• Changing the language is likely to cause user error or loss of data, for example, in a transactional workflow.

8.2.3. User-modifiable setting menu items

User-modifiable setting menu items are identical to menu items, except for the following differences.

Behaviour:

• Activating a user-modifiable setting menu item either displays a sub-menu, a page/screen or a content overlay, or toggles or changes a setting.

8.2.4. About information overlay menu item

The about information overlay menu item is identical to a menu item, except for the following differences.

Presentation:

• Text: "About"

Behaviour:

• Activating the about information overlay menu item displays the about information overlay.

9.1.1. Menu title

Presentation:

• Text: "Language".

9.2.1. Language menu items

Each language menu item is identical to a menu item, except for the following differences.

Presentation:

• Text: The name of the language in its native language and alphabet.

Behaviour:

On websites and in Web applications:

• Activating a language menu item changes the language of the site/application to the selected language.

In device-based mobile applications:

• Activating a language menu item either changes the language of the device-based mobile application to the selected language or displays the instructions for obtaining the device-based mobile application in the selected language if the selected language is not installed.

10.1.1. Title

Presentation:

• Text: "About".

10.2.2. Version identifier

Location:

• Below the site/application title.
• Aligned horizontally with the left edge of the body.

Exceptions:

The version identifier is omitted when:

• A date of last modification is provided.

10.2.3. Terms and conditions link

Location:

• Below the version identifier
• Aligned horizontally with the left edge of the body.

Behaviour:

• Activating the terms and conditions link takes the user to the notices in Appendix C of the Standard on Web Usability and the End User License Agreement, where applicable.

10.2.4. Transparency link

Location:

• Below the terms and conditions link.
• Aligned horizontally with the left edge of the body.

Behaviour:

Website and Web applications:

• Activating the transparency link takes the user either to the department's main transparency page/screen or, where the site/application is not departmental, to the Government-wide Reporting page on the Treasury Board of Canada Secretariat website.

10.2.5. About us link

Location:

• Below the links to the notices.
• Aligned horizontally with the left edge of the body.

Presentation:

• Text: "About us".

Behaviour:

• Activating the about us link displays information about the site/application.

10.2.6. Contact us link

Location:

• Below the about us link.
• Aligned horizontally with the left edge of the body.

Presentation:

• Text: "Contact us".

Behaviour:

• Activating the contact us link displays the contact information for the site/application.

10.2.7. News link

Location:

• Below the contact us link.
• Aligned horizontally with the left edge of the body.

Presentation:

• Text: "News"

Behaviour:

• Activating the news link displays media products, such as press releases.

Exceptions:

The news link is omitted when:

• The site/application does not release media products, such as press releases.

10.2.8. Stay connected link

Location:

• Below the news link.
• Aligned horizontally with the left edge of the body.

Presentation:

• Text: "Stay connected"

Behaviour:

• Activating the stay connected link displays social media, email subscription and/or Web feeds.

Exceptions:

The stay connected link is omitted when:

• The site/application does not have social media, email subscriptions or Web feeds.

11.1.1. Government of Canada navigation bar

The Government of Canada navigation bar is located at the top of the header and includes header links and official language selection.

Dimensions:

• Height when using the Government of Canada signature: 41 pixels.
• Height when using the Arms of Canada signature: 65 pixels.

Presentation:

• 13 pixels below the top boundary of the Government of Canada navigation bar
• Background (outer width): black (#000) for the colour
• Canada.ca, Services, Departments ("Ministères"), and official language selection link are displayed from left to right, 10 pixels to the left of the inner right boundary of the Government of Canada navigation bar
• Each link is separated by a white (#fff) vertical bar with 13 pixels of space on each side of the vertical bar.
• Font: 9 point Verdana
• Foreground: white (#fff)
• Text is vertically centred in the Government of Canada navigation bar.
• Confirmation is requested from the user if switching between languages would cause the loss of data or a disruption in the process of a transactional service.

Behaviour:

• Canada.ca links to http://canada.ca/en/index.html or http://canada.ca/fr/index.html
• Services links to http://www.servicecanada.gc.ca/eng/home.shtml or http://www.servicecanada.gc.ca/fra/accueil.shtml
• Departments ("Ministères") links to http://canada.ca/en/gov/dept/index.html or http://canada.ca/fr/gouv/min/index.html
• Language selection links take the user to the equivalent content in that language.
• The official language selection link takes the user to the same Web page in the other official language.

Exceptions:

• For websites and Web applications in non-official languages the links to Canada.ca, Services, Departments ("Ministères") are replaced with the additional languages. The official languages are displayed at the furthest boundary, with additional languages displayed across the navigation bar. For languages that read right to left, this would mean official languages are left aligned.
• For websites and Web applications that require users to be logged-in and provide the option of selecting, setting, or changing the language preference, the language selection links can be removed from the navigation bar.

11.1.2. Site/application title

Provides the title of the site/application.

Location:

• 10 pixels to the right of the inner left boundary of the banner
• Centred vertically in the banner

Dimensions:

• Available width: 360 pixels
• Available height: 123 pixels

Presentation:

• Font: 22.5 point Arial or decreased to accommodate title length
• Text shadow:
  • Colour: dark grey (#333)
  • Position (right, down): 1 pixel, 1 pixel
  • Blur radius: 1 pixel
• Foreground: white (#fff)
• Background: transparent

Behaviour:

• Underlined for mouse hover and keyboard focus (not underlined otherwise)
• Links to the home page of the site/application.

11.1.3. Canada Wordmark

The Canada Wordmark (wmms-bg) is to be applied to all Government of Canada Web pages.

Location:

• 10 pixels to the left of the inner right boundary of the banner
• 39 pixels below the top of the banner

Dimensions:

• Width: 139 pixels
• Height: 33 pixels

11.1.4. Search

Location:

• "Search" ("Recherche") button is 10 pixels to the left of the inner right boundary of the banner
• Search text input field is 5 pixels to the left of the Search ("Recherche") button
• "Search" ("Recherche") button and search text input field are 5 pixels above the bottom of the banner

Presentation:

• Button foreground: Dark grey (#333)
• Button background (normal): search-button for the image and grey (#ccc) for the colour
• Button background (hover/focus): search-button-focus for the image and grey (#ddd) for the colour
• Button and search text input field are enclosed in a container with the following properties:
  • Background: #146094
  • Border-left: 1px solid #15527D
  • Border-right: 1px solid #15527D
  • Border-top: 1px solid #87AEC9
  • Padding (top, right, bottom, left): 11 pixels, 10 pixels, 6 pixels, 12 pixels
  • Font: 10 point Verdana
• Search text input field background is white (#FFFFFF).
• Search text input field width is 27 characters.

Behaviour:

• Submitting a search query sends the user to a search engine results page.

Exceptions:

Search element can be removed where:

• search engine results are displayed,
• search is the primary task of the page; or
• the act of executing the search would cause the loss of data or a disruption in the process of a transactional service.

11.1.5. Site/application navigation bar

Provides links for moving from section to section across the entire website or application.

Location:

• The site/application navigation bar is located immediately below the banner

Dimensions:

• Outer width: 100% (full width of the page)
• Inner width: 960 pixels (centred)

Presentation:

• Top Level
  • Foreground: white (#FFF)
  • Foreground (link, hover/focus/active): black (#000)
  • Background (inner width): menu-bg for the image and #23447E for the colour
  • Background (outer width): transparent
  • Background (link, normal): transparent
  • Background (link, hover/focus/active): grey (#CCC) for the colour
  • Down arrow (for submenus): menu-arrow
  • Border-bottom: 4 pixels solid grey (#CCC)
  • Font: 13 pixels Verdana bold
• Secondary menu
  • Foreground: black (#000)
  • Foreground (link, hover/focus/active): black (#000), underline
  • Background: grey (#CCC) for the colour
  • Background (link, normal): transparent
  • Font: 13 pixels Verdana and 16 pixels Verdana bold for mega menu column headings
  • Border-bottom: 4 pixels solid blue (#0F315B)
  • Link properties:
    • Border-left: 1px solid #124B79
    • Border-right: 1px solid #15598F
    • Padding (top, right, bottom, left): 6 pixels, 14 pixels, 6 pixels, 10 pixels

Behaviour:

• Links are text-based and are the same throughout the site/application.
• Link appearance for mouse hover and keyboard focus must be visually distinct from the default link appearance.
• Link appearance for the item selected on the primary navigation bar must be visually distinct from the unselected state.
• Content is limited to within the inner boundaries of the navigation bar. Only prescribed background colours and images can be used outside of those boundaries.

Exception

• The site/application navigation bar can be removed when menu links not associated with primary tasks are likely to cause user error or loss of data, for example, in a transactional workflow.

11.7.1. Site/application footer

Includes links to the site/application's Terms and conditions and Transparency pages as well as About us, News, Contact us and Stay connected.

Location:

• The site/application footer is located immediately below the body.
• "News" ("Nouvelles") link is removed where the site/application does not release media products such as press releases.
• "Stay connected" ("Restez branchés") link is removed where no social media, email subscriptions or Web feeds are available.

Dimensions:

• Outer width: 100% (full width of the page)
• Inner width: 960 pixels (centred)

Presentation:

• Foreground: dark grey (#222)
• Background (outer width): foot-bottom-deco for the image and light grey (#efefef) for the colour
• Background image (outer width) repeats horizontally
• Background (inner width): footer-deco for the image and light grey (#efefef) for the colour
• Left-most column is 10 pixels to the right of the inner left boundary of the site/application footer
• Font: 10.5 point Arial for the column headings and 9.5 point Arial for regular column text
• Column headings are not underlined by default
• Includes the following four links arrayed from left to right in the same order: "About us" ("À propos de nous"), "Contact us" ("Contactez-nous"), "News" ("Nouvelles") and "Stay connected" ("Restez branchés").
• Additional links may be included in columns below the top-most links. Each column of links is left aligned with the associated top-most link.
• Top-most links are bolded while the additional links are not.
• Link appearance for mouse hover and keyboard focus are underlined.
• Links are text-based and are the same throughout the website or application.
• Content is limited to within the inner boundaries of the site/application footer. Only background colours and images prescribed can be used outside of those boundaries.

Behaviour:

• "About us" ("À propos de nous") links to a page with information about the site/application.
• "Contact us" ("Contactez-nous") links to a page with contact information for the site/application.
• "News" ("Nouvelles") links to a page with media products such as press releases.
• "Stay connected" ("Restez branches") links to a page where social media, email subscriptions and/or Web feeds are available.

11.7.2. Government of Canada footer

Provides links to common Government of Canada resources.

Location:

The Government of Canada footer is located immediately below the site/application footer.

Dimensions:

• Height: 57 pixels
• Width: 100% (full width of the page)
• Inner width: 960 pixels (centred)

Presentation:

• Background: #040707 for the colour
• Only background colours and images prescribed can be used outside of those boundaries.
• HEALTH (SANTÉ), TRAVEL (VOYAGE), SERVICE CANADA, JOBS (EMPLOIS), and ECONOMY (ÉCONOMIE) links are displayed from left to right 10 pixels to the right of the inner left boundary of the Government of Canada footer. The domain names appear on the second line
• Canada.ca link is 15 pixels to the left of the inner right boundary of the Government of Canada footer
• Canada.ca link is separated from the other links by a grey vertical bar (#666) with 45 pixels of space between the Canada.ca link and the vertical bar
• Other links are separated by 45 pixels of space
  • Font: Arial
  • Font size ("Canada.ca"):16 point
  • Font size (other links): 9 point
  • Font colour is white (#fff)
  • Background: transparent
  • All links are vertically aligned in the middle of the Government of Canada footer
  • HEALTH links to http://healthycanadians.gc.ca/index-eng.php, and SANTÉ links to http://canadiensensante.gc.ca/index-fra.php
  • TRAVEL links to http://www.travel.gc.ca/index-eng.asp and VOYAGE links to http://www.voyage.gc.ca/index-fra.asp
  • SERVICE CANADA links to http://www.servicecanada.gc.ca/eng/home.shtml or http://www.servicecanada.gc.ca/fra/acscueil.shtml
  • JOBS links to http://www.jobbank.gc.ca/intro-eng.aspx, and EMPLOIS links to http://www.guichetemplois.gc.ca/Intro-fra.aspx
  • ECONOMY links to http://actionplan.gc.ca/en and ÉCONOMIE links to http://plandaction.gc.ca/fr
  • Canada.ca links to http://canada.ca/en/index.html or http://canada.ca/fr/index.html

Exception:

• No links are displayed when site/application is in non-official languages.

12.1.1. Government of Canada signature

The Government of Canada signature (sig-eng or sig-fra) is to be applied to all government server message pages.

Location:

• 10 pixels to the right of the inner left boundary of the header
• 20 pixels below the top boundary of the header

Dimensions:

• Width: 214 pixels
• Height: 20 pixels

12.1.2. Canada Wordmark

The Canada Wordmark (wmms) is to be applied to all Government of Canada server message pages.

Location:

• 10 pixels to the left of the inner right boundary of the header
• 10 pixels below the top boundary of the header

Dimensions:

• Width: 126 pixels
• Height: 30 pixels

12.1.3. Site/application title block

The site/application title block contains the site/application title in each language in which the server message is provided.

Location:

• 17 pixels below the Government of Canada signature and the Canada Wordmark.

Presentation:

• Columns:
  • When only one language is provided: 1 column.
  • When more than one language is provided: 2 columns.
• Foreground colour: #295376.
• Left margin: 10 pixels.
• Right margin: 10 pixels.
• Border: bottom only; 1 pixel solid #666.

12.2.1. Server message block in the first official language

Each server message block contains a server message title, a server message body and links to the home page and the contact information.

Location:

• In the first column.
• When the server message block in the second official language is present: On the same baseline as the server message block in the second official language.

Presentation:

• Alignment: Left-aligned.

12.2.2. Server message block in the second official language

Each server message block contains a server message title, a server message body and links to the home page and the contact information.

Location:

• In the second column.
• On the same baseline as the server message block in the first official language.

Presentation:

• Alignment: Left-aligned.

12.2.3. Server message block in additional languages

Each server message block contains a server message title, a server message body and links to the home page and the contact information.

Location:

• First, third and subsequent odd-numbered additional language:
  • In the first column.
  • 20 pixels below the previous server message block in the column.
  • On the same baseline as the next even-numbered additional language.
• Second, fourth and subsequent even-numbered additional language:
  • In the second column.
  • 20 pixels below the previous server message block in the column.
  • On the same baseline as the previous odd-numbered additional language.

Presentation:

• Alignment: Left-aligned.

12.3.1. Terms and conditions link in the first official language

Location:

• In the first column.
• When the terms and conditions link in the second official language is present: On the same baseline as the terms and conditions link in the second official language.

Presentation:

• Bottom padding: 11 pixels.
• Font: 9 point Verdana.
• Text: "Terms and conditions" in the first official language.
• Alignment: Left-aligned.
• Not underlined.

Behaviour:

• Links to a page in the corresponding language containing the notices in Appendix C of the Standard on Web Usability, or links to those same notices.

12.3.2. Terms and conditions link in the second official language

Location:

• In the second column.
• On the same baseline as the terms and conditions link in the first official language.

Presentation:

• Bottom padding: 11 pixels.
• Font: 9 point Verdana.
• Text: "Terms and conditions" in the second official language.
• Alignment: Right-aligned.
• Not underlined.

Behaviour:

• Links to a page in the corresponding language containing the notices in Appendix C of the Standard on Web Usability, or links to those same notices.

12.3.3. Terms and conditions link in additional languages

Location:

• First, third and subsequent odd-numbered additional language:
  • In the first column.
  • Below the previous terms and conditions link in the column.
  • On the same baseline as the next even-numbered additional language.
• Second, fourth and subsequent even-numbered additional language:
  • In the second column.
  • Below the previous terms and conditions in the column.
  • On the same baseline as the previous odd-numbered additional language.

Presentation:

• Bottom padding: 11 pixels.
• Font: 9 point Verdana.
• Text: "Terms and conditions" in the additional language and in its native alphabet.
• Alignment:
  • First, third and subsequent odd-numbered additional language: Left-aligned.
  • Second, fourth and subsequent even-numbered additional language: Right-aligned.
• Not underlined.

Behaviour:

• Links to a page in the corresponding language containing the notices in Appendix C of the Standard on Web Usability, or links to those same notices.

13.1.1. Government of Canada signature

The Government of Canada signature (sig-eng or sig-fra) is to be applied to all Government of Canada splash pages.

Location:

• 10 pixels to the right of the inner left boundary of the header
• 20 pixels below the top boundary of the header
• 10 pixels above the bottom boundary of the header

Dimensions:

• Width: 214 pixels
• Height: 20 pixels

13.2.1. Site/application title

Provides the title of the site/application.

Location:

• 62 pixels below Welcome / Bienvenue or Bienvenue / Welcome
• Left-aligned site/application titles are 10 pixels to the right of the inner left boundary of the body
• Right-aligned site/application titles are 10 pixels to the left of the inner right boundary of the body
• Site/application title in the first official language is aligned with the inner left boundary of the body.
• Site/application title in the second official language is aligned with the inner right boundary of the body.
• Site/application titles for the first and second official languages are vertically aligned.
• Site/application titles for additional languages are below the site/application titles for the first and second official languages.

Presentation:

• Foreground: black (#000)
• Minimum height (total): 90 pixels
• Font: 14 point Verdana decreased to accommodate title length
• Font size (site/application title in another language): 11.5 point or decreased to accommodate title length

13.2.2. Language selection links

Provides links to the home pages in the supported languages.

Location:

• 10 pixels to the right of the inner left boundary of the body
• 61 pixels below the site/application title
• Language selection links for the first and second official languages are vertically aligned below the site/application title.
• Additional language selection links are below the language selection links for the first and second official languages.

Presentation:

• Text for each link is the official name of the corresponding language, in its native language and alphabet.
• Foreground: dark grey (#333)
• Background (normal): sp-pe-button for the image and grey (#ccc) for the colour
• Background (hover/focus): sp-pe-button-focus for the image and grey (#ddd) for the colour
• 21 pixels of horizontal spacing between language selection links
• 14 pixels of vertical spacing between rows of language selection links
• Font: Verdana
• Width: 139 pixels
• Horizontal alignment: centre-aligned
• Padding-top/bottom: 10 pixels
• Padding-left/right: 30 pixels
• Border-bottom:1px solid #999
• Border-right: 1px solid #999
• Border-top: 1px solid #fff
• Border-left: 1px solid #fff

Behaviour:

• Each link is to the home page in the corresponding language.

13.2.3. Canada Wordmark

The Canada Wordmark (wmms) is to be applied to Government of Canada splash pages.

Location:

• 10 pixels to the left of the inner right boundary of the body
• 65 pixels below the site/application title

Dimensions:

• Width: 126 pixels
• Height: 30 pixels

13.3. Footer

The footer is located immediately below the body and includes the Terms and conditions ("Avis") link.

Dimensions:

• Outer width: 100% (full width of the page)
• Inner width: 960 pixels (centred)

13.3.1. Terms and conditions (Avis) link

Location:

• 10 pixels to the right of the inner left boundary of the footer
• Links are 10 pixels below the corresponding language selection link

Presentation:

• Links are not underlined
• 21 pixels of horizontal spacing between links
• Font: 9 point Verdana
• Width: 139 pixels
• Horizontal alignment: left-aligned
• Content is limited to the Terms and conditions ("Avis") link included in the footer. Only background colours and images prescribed can be used.

Behaviour:

• Each link is to a page in the corresponding language containing the notices in Appendix C of the Standard on Web Usability, or links to those same notices.

14.1.1. Government of Canada signature

Location:

• Aligned vertically with the top edge of the header.
• Aligned with the left edge of the header.

Dimensions:

• Width: 214 pixels.
• Height: 20 pixels.

Presentation:

• Image:
  • Pages in French: sig-fra.
  • Pages in English: sig-eng.

14.1.2. Canada Wordmark

Location:

• Aligned vertically with the top edge of the header.
• Aligned horizontally with the right edge of the header.

Dimensions:

• Width: 126 pixels.
• Height: 30 pixels.

Presentation:

• Image: wmms.

14.1.3. Site/application title

Location:

• Below the Government of Canada signature and the Canada Wordmark.
• Aligned horizontally with the left edge of the header.

Presentation:

• Foreground colour: Black (#000).
• Background colour: White (#fff).
• Font: Verdana.
• Font size: 16 points.