Contextual Sign in button: Canada.ca design system
- Last updated: 2022-09-23
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
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
Research and blog posts
Latest changes
- Expanded Sign in button guidance
Discussion
- Date modified: