Borders
Borders separate, define, divide and highlight content and components visually.
Colours
Our brand colours are inspired by the values shared by government and New Brunswickers.
Grid system
We use a mobile-first, 12-column flexbox grid to build layouts with 5 responsive tiers.
Iconography
Icons can communicate meaning and enhance the aesthetic appeal of user interfaces.
Spacing
Our design system uses an 8px grid for all spacing values such as padding and margins.
Typography
Establish information hierarchy and optimize legibility, readability, and accessibility.