GC Design SystemComponents
GC Design System Start to use Page templates overviewBasic page Components overviewAlertBreadcrumbsButtonCardCheckboxesContainerDate inputDate modifiedDetailsError messageError summaryFieldsetFile uploaderFooterGridHeaderHeadingIconInputLanguage toggleLinkNoticePaginationRadiosScreenreader-onlySearchSelectSide navigationSignatureStepperTableTextTextareaTheme and topic menuTop navigation CSS Shortcuts overview Reset styles Responsive layoutState Box sizingContainer sizingDisplayOverflowPositionVisibility FontFont familyFont sizeFont styleFont weightLine heightLink colourLink sizeLink text decorationList styleText alignText colourText overflowText transformWord break MarginPadding Align contentAlign itemsAlign selfFlexFlex directionFlex growFlex shrinkFlex wrapGapGrid columnsGrid rowsJustify contentJustify itemsJustify selfOrderPlace contentPlace itemsPlace self Background colourBorder colourBorder radiusBorder styleBorder width Icon namesIcon sizeImage CursorPointer eventsTransition Styles overviewDesign tokensColourSpacingTypography Contact usGet InvolvedFind 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

  • 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.
  • 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