Explore the system

Get started

Get the tools and building blocks to design and develop consistent and accessible experiences.

Start developing Start designing

Colours

Our brand colours are inspired by the values shared by government and New Brunswickers.

Brand colours

Blue #004A98
Green #006055
Yellow #D6A329
Red #79242F

Status and interactions

Success #006055
Success/Hover #009343
Warning #D6A329
Warning/Hover #EFB300
Critical #79242F
Critical/Hover #AA1F2E
Info #004A98
Info/Hover #1565C0
Dark #000000
Dark/Hover #333333
Light #EEEEEE
Light/Hover #DDDDDD

Grayscale

White #FFFFFF
Gray 100 #F3F3F3
Gray 200 #EEEEEE
Gray 300 #DDDDDD
Gray 400 #AAAAAA
Gray 500 #777777
Gray 600 #333333
Black #000000

Colour tokens

You can incorporate colour tokens into any additional CSS or SASS that you create to ensure consistency with the design system.