GC Design System Components Installation Page templates Contact us Get involved Find a demo GC Design System Components

Signature
<gcds-signature>

Also called: wordmark.

The signature is the Government of Canada landmark identifier found in the header or footer.

Signature component preview

Signature anatomy

  1. The Government of Canada Signature is a brand identifier found in the site's header. The signature is used as a global link to the site's homepage.
  2. The Canada Wordmark is a brand identifier found in the site's footer. It reinforces the brand by communicating to a site visitor that they're reading content from the Government of Canada.
Signature with labels “Government of Canada Signature” and “Canada Wordmark”. Each individual element of the component has a number pointing to it.

Design and accessibility for the signature

Check signature requirements

The signature is required in the header and the wordmark is required in the footer on Canada.ca pages and GC sites.

Always include the signature in the header and maintain default settings.
  • Use black text, do not select white text.
  • Keep placement in the top-left corner of the header on both desktop and mobile.
  • Link to the Canada.ca homepage.
Always include the wordmark in the sub-footer band and maintain default settings.
  • Use black text, do not select white text.
  • Keep placement in the bottom-right corner of the footer.
Note: Default settings for the Signature and Wordmark follow the Design Standard for the Federal Identity Program.

Set the language order in the signature

Note: The image is linked to the Canada.ca homepage in the same Official Language as the current page.

Apply non-standard colours accessibly

An image presenting both variations of the signature component. The signature type is on the left and the wordmark type is on the right.
Caption: The standard colour style uses black text and a red flag applied to a white backdrop.
An image presenting both variations of the signature component. The signature type is on the left and the wordmark type is on the right. This variation has white text on a black back drop
Caption: The reversed colour style uses white text and a red flag applied to a black backdrop.
An image presenting two signature and wordmark pairings. One where the signature and wordmark are all black on a white backdrop and the second where the signature and wordmark are all white on a black backdrop.
Caption: The black and white style uses all black or all white. All black is the more common use.
An image showing the the signature and wordmark in dark purple on a light purple backdrop. There are bars and boxes simulating text and pictures, you are to assume this is a mock webpage. The text and pictures boxes are also dark purple.
Caption: Single colour style uses another colour if that colour is the only colour used in the product.

Help us improve

Have questions or a request? Give feedback on our contact form.

Something's wrong? Raise it through GitHub with an account. You'll have access to the team's direct responses, progress made on your issue, and issues raised by others.

Give feedback Report an issue on GitHub
2025-05-06