Utility classes and design tokens

For faster prototyping and development, the WorkSafeBC design system includes dozens of utility classes and design tokens for positioning, colors, aligning, and spacing content.

Positioning

Classes dealing with positioning of elements in the UI

Class Effect
.fixed-bottom Fixes element to the bottom of the page
.footer-up bring up the footer 60px in order to accommodate fixed elements

Colors

Classes dealing with color backgrounds for elements

Class Color token
.sunsetorange Applies Sunset orange color background
.mountainblue Applies Mountain blue color background
.mossgreen Applies moss green color background
.white Applies white color background
.black Applies black color background
.grey Applies #776E64 color background
.orange Applies #ED8B00 color background
.mountainblue Applies #6399AE color background
.huckleberryred Applies #A4343A color background
.sunsetorange Applies #DC4405 color background
.sunriseyellow Applies #F1BE48 color background
.mossgreen Applies #888D30 color background
.fire Applies #f1a223 color background
.warmgrey1 Applies #E4E2E0 color background
.warmgrey2 Applies #C9C5C1 color background
.warmgrey3 Applies #ADA8A2 color background
.warmgrey4 Applies #47423C color background
.warmgrey5 Applies #453F39 color background
.ashgrey Applies #F1F0EF color background
.silvergrey Applies #E4E2E0 color background
.steelgrey Applies #C9C5C1 color background
.smokegrey Applies #ADA8A2 color background
.irongrey Applies #47423C color background

Form field widths

Classes to set the widths of input elements and form fields.

Class Width token
.input-50p Makes an input element 50px width
.input-75p Makes an input element 75px width
.input-100p Makes an input element 100px width
.input-150p Makes an input element 150px width
.input-200p Makes an input element 200px width
.input-250p Makes an input element 250px width
.input-300p Makes an input element 300px width

Fixed minimum heights

Classes to set the minimum heights of a container

Class Width token
.minheight-150p Makes the minimum height of an element 150px
.minheight-300p Makes the minimum height of an element 300px
.height-50p Makes the height of an element 50px
.height-75p Makes the height of an element 75px
.height-100p Makes the height of an element 100px
.height-150p Makes the height of an element 150px
.height-200p Makes the height of an element 200px
.height-250p Makes the height of an element 250px
.height-300p Makes the height of an element 300px
.height-350p Makes the height of an element 350px
.height-400p Makes the height of an element 400px

Zoom Utilities

Classes to set the Zoom

Class Zoom
.zoom110 Makes the zoom 110%
.zoom120 Makes the zoom 120%
.zoom130 Makes the zoom 130%
.zoom140 Makes the zoom 140%
.zoom150 Makes the zoom 150%
.zoom160 Makes the zoom 160%
.zoom170 Makes the zoom 170%
.zoom180 Makes the zoom 180%
.zoom190 Makes the zoom 190%
.zoom200 Makes the zoom 200%