Developers
Whether you’re building in Drupal or working on an external application, the GNWT Design System supports your development workflow.
By including the GNWT Design System CSS Bundle in a project, you gain access to all of the styling that the GNWT OneGov flagship site utilizes to achieve it's brand aligned appearance.
By aligning your work with this design system, you support faster development, and a consistent user experience across government services.
GNWT Design System CSS Bundle
The GNWT Design System CSS bundle provides the core styles needed to apply the approved GNWT visual design to web projects. It includes design tokens, utility classes, and element styles used on the GNWT flagship Drupal site, combined into a single CSS file.
You can add this CSS bundle to third-party platforms and external services. Use the HTML examples from the design system documentation to apply these styles and achieve a consistent look and feel with the GNWT flagship website and design system.
This approach helps teams and external vendors apply GNWT-approved styles, support accessible design, and build interfaces using tested, reusable front-end patterns.
css • 250.12KB • Mar 19, 2026
css • 205.09KB • Mar 19, 2026
About the GNWT Design System CSS bundle
The GNWT Design System CSS bundle includes a customized Sass-based version of Bootstrap 5.3.3. This version has been modified to support the GNWT visual design and accessibility requirements.
Many, but not all, Bootstrap utility classes are included in the GNWT Design System. For additional guidance on these utilities, the Bootstrap documentation may be helpful when using utility classes that are part of the GNWT Design System CSS bundle.
Changelog and Previous Versions
View the changelog to access older versions of the GNWT Design System and review what changed in each release before updating your project.
Typography: Noto Sans
The GNWT Design System uses Noto Sans as its primary typeface. Noto Sans is a modern, highly readable sans-serif font family developed by Google. It was chosen for its clarity, multilingual support, and accessibility across digital platforms.
To include Noto Sans in your project, add the following lines to the <head> of your HTML file:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
This will load the full Noto Sans variable font family with a wide range of weights and styles, ensuring visual consistency across GNWT digital services.
Once included, you can apply it using standard CSS:
.some-class {
font-family: "Noto Sans", sans-serif;
}
Using Components and Scripts
Some components in the GNWT Design System rely on Bootstrap JavaScript plugins to function correctly, such as for interactive behaviour. When this is the case, the required Bootstrap script will be listed as a dependency on the component’s documentation page.
External projects are encouraged to include the appropriate Bootstrap scripts when using these components.
Using Component Demo Code
When viewing a component demo in the design system documentation, you may see HTML, CSS, and JavaScript code examples.
The HTML shows how to structure the component.
Any additional CSS or JavaScript is shown separately in the demo code.
This additional CSS or JavaScript is not included in the main GNWT Design System CSS bundle and must be added to your project separately.