GC Design System Components
Home Start to use Page templates overview Basic page Components overview Breadcrumbs Button Card Checkboxes Container Date input Date modified Details Error message Error summary Fieldset File uploader Footer Grid Header Heading Icon Input Language toggle Link Notice Pagination Radios Screenreader-only Search Select Side navigation Signature Stepper Text Textarea Theme and topic menu Top navigation CSS shortcuts overview Reset styles Responsive layout State Box sizing Container sizing Display Overflow Position Visibility Font Font family Font size Font style Font weight Line height Link colour Link size Link text decoration List style Text align Text colour Text overflow Text transform Word break Margin Padding Align content Align items Align self Flex Flex direction Flex grow Flex shrink Flex wrap Gap Grid columns Grid rows Justify content Justify items Justify self Order Place content Place items Place self Background colour Border colour Border radius Border style Border width Icon names Icon size Image Cursor Pointer events Transition Styles overview Design tokens Colour tokens Spacing tokens Typography tokens Contact us Get involved Find a demo

Signature
<gcds-signature>

Also called: wordmark.

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

  • Required on Canada.ca
  • Required on GC sites

  • GitHub
  • Figma

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

  • Display the French-first signature on French pages and the English-first on English pages.
  • Maintain “Government of Canada” for the English descriptive (alt) text and “Gouvernement du Canada” for the French.

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

Apply non-standard colours accessibly

  • Opt to apply non-standard colours when a higher level of contrast with the background is needed, like for dark mode.
  • Opt to apply non-standard colours when a single colour is used in a product, like in black and white.
  • When making changes to the flag colour, always match the colour of the flag symbol in the signature and in the wordmark.
  • Always apply the same colour combination in the signature and wordmark. For example, if one is black and white, the other needs to be as well.
  • For single colour, check the contrast ratio between the signature elements for, at minimum, WCAG AA compliance.
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-07-17