Designers

The OneGov Design System provides a consistent visual language that helps designers create user interfaces aligned with GNWT branding and accessibility standards.

This section introduces how to work with the system’s shared design assets to ensure what you design matches what’s implemented in code.

The design system has been designed and developed to meet WCAG 2.1 AA accessibility guidelines. Where possible, designers should aim for WCAG 2.1 AAA accessibility to account for a wide range of abilities and user groups.

The design system uses Bootstrap v5.3 as a base framework. Aspects such as responsive behaviour, component structure, icons, and variables are generally derived from Bootstrap.

Figma

Designers can use the design system Figma file to create design deliverables. The Figma file includes styles, design tokens, components, and patterns that correlate with what is available for use in development.

Access the design system library through the Government of Northwest Territories Figma workspace. You must have permission or request access in order to access the file. Other Figma libraries may also be used in the system for external assets, such as Bootstrap Icons.

Updates to the developed assets should be reflected in the Figma file to ensure that the designs align with what is already available to developers and are cohesive with the OneGov digital presence. Make sure to check for any library updates in Figma to ensure you are using the most up-to-date assets.

There are also some design assets and components included in the Figma design system that may not be available as a reusable piece of code in the development documentation. These may be components or assets created for niche situations and are not as broadly applicable in the system. However, these assets are likely built on a OneGov site and may be a helpful reference for solving similar needs in the future.

Designers should use the design system assets by default. Use existing components and patterns first and all new components or patterns should apply the established styling. Consistency across the Government’s digital products is important for positive user experience. Contact the digital office if you have any questions about using the design system or have requests for updates to the design system.

Design tokens

The design system in Figma and code uses variables as design tokens. Design tokens streamline communication between design and development by creating semantic names for design specifications. Design tokens include attributes such as colour, spacing, and radius. Using tokens instead of the specific values ensures that values are applied consistently throughout the system.

For example, instead of giving a hex value for a colour to the developer like #F3CD4E, you can provide them with the token name, --warning-alert. The value of this colour is managed in a central location and applies across the design system. If that warning colour needs to be updated, it can be updated in one central location within the code and updated across the system for efficiency and consistency.

Styles

Styles are the core visual attributes of the design system, such as colours, typography, spacing, borders, etc. Styles often have design tokens to standardize and communicate them. It is crucial that OneGov sites apply consistent styling for a cohesive digital presence and alignment with the GNWT’s visual identity package (VIP). Consistent styling is also crucial for signifying functionality and behaviour of UI elements.

Page templates

When creating mockups and prototypes for new pages, start by using the page templates to structure the page. There are page templates for standard Drupal content types available in Figma. Keep in mind that each content type on Drupal has a curated selection of components available for content authors to use. This guides a consistent content structure on similar pages and reduces complexity for content authors. While the available components are included in the page templates, always double-check on Drupal to confirm which components are currently available for the content type.