| Subtotal: | $24.24 |
| PST: | $1.70 |
| GST/HST: | $1.21 |
| Total: | $27.15 |
This guide will show you WorkSafeBC typography usage and some examples to help you use the right typography.
Every firm registered with WorkSafeBC is assigned a classification unit based on their main business undertaking. Others with similar businesses will share the classification unit, and they'll all pay the same base premium rate for their insurance. Every firm registered with WorkSafeBC is assigned a classification unit based on their main business undertaking. Others with similar businesses will share the classification unit, and they'll all pay the same base premium rate for their insurance.
This is bolded
This is the fine print: WorkSafeBC collects your personal information for the purpose of enabling online portal services and administering your WorkSafeBC claim or account. The personal information you provide is collected in accordance with section 26 of the BC Freedom of Information and Protection of Privacy Act. If you have any questions about the collection of your personal information, please contact our
Default text linkWorksafeBC uses a modified Halis font as the official spec. This guide includes the main headings, body copy, links and default paragraphs.
Heading 1 is used for the first-level titles. Normally it's is used as the title of the page and there is only one Heading 1 on each page.
Heading 1 works as the title of the entire page to describe the content of the page. Use Heading 1 under Header.
Heading 1 can be used as the title of a page error message with customized CSS of font size and color. Follow the style of the error message page. See more examples: Error 403, Error 404, Error 500
We’re currently upgrading our systems to serve you better. As a result, our systems are temporarily unavailable. Please try again later.
We apologize for the inconvenience.
Return to worksafebc.com.
Heading 2 is used for second-level titles. It works as page substitle and the title for sections inside a page. There is no more than one Heading 2 in each section in addition to the ones used in components as UX library suggested.
In most situations, use default orange color #ED8B00 for Heading 2. There are some exceptions in components, if so, always follow the library.
When used for the section title, there can be a pargraph following the Heading 2 to explain the content in the section in details and/or tell users what they need to do.
Heading 2 used as page subtitle and section title
Heading 2 used for section titles, followed by a explaination paragraph
This is an introductory paragraph about what you are about to do. The Lazy Form template is designed to capture key information before starting a process or application, without overwhelming users.
Please enter the following information to proceed.
Heading 2 used in some components
This is a sentence to tell users not to refresh their browsers or close tab
Heading 2 used in some components
View generated reports for workers and employers.
View generated reports for workers and employers.
View generated reports for workers and employers.
View generated reports for workers and employers.
Heading 3 is used for the third-level titles. It's normally used as the title of a block of content in a section under Heading 2. Some components also use Heading 3 in it, if so, always follow the library.
In most situations, use default color #453f39 for Heading 3. There are some exceptions in components, if so, always follow the library.
Heading 3 used for content block title
The UX Library is a design system for WorksafeBC. This UX/UI library contains a collection of css/html components, angular components, templates, references and working examples.
The UX Library is a website containing design specifications for designing web applications in WorkSafeBC.
Heading 3 used in some components
| Claim number: | 12345678 |
| Customer Care Number: | 000000001 |
We’ve added the estimated premium for 2020 to your account balance. You may print or save this page for your records. Next, please make your payment.
Please note that you still need to report your actual payroll for 2020 in early 2021. We’ll send you a reminder at that time. If your actual payroll is different than the estimate you provided today, we’ll adjust your account balance accordingly.
Bolded body texts are widely used in the design in many different situations.
Bolded body texts are used for:
Thank you for reporting your injury to us. Your claim number is 00000000.
This is body text
Body text is commonly used for plain texts like paragraphs and detail contents.
Use #453f39 for body text except some special sitations such as error messages and body text inside some specific components. Use sunsetorange #DC4405 for error messages. If you think you need to use another color for body text in your app, please consult with UX team before you do so.
In the past, you indicated you would like us to send emails confirming we’ve received your reimbursement request and letting you know when we’ve processed your request to the email address below. Please remove or update the email address before continuing if needed.
Use sunsetorange #DC4405 for error messages.
Text link is used to direct users to another screen or used in CTA link component and other specific components to replace buttons. Text link is clickable.
Always use mountainblue #6399AE for text link.
We're enhancing our online services to serve you better
We’re seeking feedback from injured workers to improve our online services and make it easier for you to manage your claim online. If you have a suggestion for us or would like to tell us about your online experience, please provide your feedback.
In some components there may be other sizes and colors used for texts. If so, please follow the component style.
If in your application, it's necessary to use another typography design, please consult with UX team.