Contextual Sign in button: Canada.ca design system

The Sign in button is an optional header element that directs people to government accounts that require authentication. It is a contextual and persistent call to action within a group of related pages.

On this page

• When to use
• What to avoid
• How to implement
• Research and blog posts
• Latest changes
• Discussion

When to use

Add the Sign in button when signing in to an account is a key task within a series of pages. This includes:

• pages where there is already a link or button to an account or accounts
• a set of pages that support a specific service (such as Employment insurance, GST)
• pages where analytics show people are using the menu or the search bar to access an account

What to avoid

• Use Sign in, not Log in
• Exclude the Sign in button from:
  • account-chooser pages or sign-in process pages
  • pages that aren’t related to the authenticated service

How to implement

• Identify the group of pages that should include the contextual Sign in button for a specific authenticated service
• Link the Sign in button directly to the page where you begin your sign-in process, or to an account-chooser page with the different accounts you can sign in to
• Use “Sign in” as the label
  • Small screens: total of 12 characters including spaces (no additional descriptive text)
  • Large/medium screens: total of 25 characters including spaces (for additional descriptive text if needed, such as “Sign in to [account name]”)

You can use the Sign in button in addition to a supertask button on the same page. If you have an existing super task button, don’t remove it. Instead, add the Sign in button. You may see changes in use over time in your analytics that show that you can remove the super task button.

Design specifications

Button structure

• border: 1px solid
• border-radius: 0
• font-weight: 400
• font-size: 16px
• margin-top: 0px
• padding-top: 10px
• padding-bottom: 10px
• padding-left: 14px
• padding-right: 14px
• color: #fff

Default state

• background-color: #26374a
• border-color: #26374a

Hover state

• background-color: #444
• border-color: #444

Code

GCWeb (WET) Variables, parameters and working examples

Research and blog posts

• Introducing the contextual Sign in button

Latest changes

2022-08-17

Expanded Sign in button guidance

Discussion

Discuss the pattern in github issues