Pour commencer

The GNWT Design System is a shared foundation for building consistent, accessible, and trustworthy digital experiences across Government of the Northwest Territories websites. It provides the tools, standards, and guidance required to design, develop, and maintain user-centered public services — whether you're working within the OneGov Drupal platform or implementing GNWT-branded services externally.

This section is your entry point to understanding what the design system offers and how to use it effectively. It is intended for designers, developers, content editors, quality assurance teams, and vendor partners.

By adopting the OneGov Design System, teams benefit from:

  • Consistency – A unified visual and structural language across all GNWT sites
  • Efficiency – Reusable components and shared styles that accelerate project delivery
  • Scalability – A system that supports small departmental pages and large multi-site platforms alike
  • Trust and clarity – Interfaces that reflect the GNWT identity and meet residents’ expectations

Whether you’re creating a simple landing page or building out a service portal, this system ensures your work aligns with GNWT standards in appearance, accessibility, and function.

Why Use the GNWT Design System?

The GNWT Design System accelerates development while ensuring government services meet accessibility standards and provide consistent user experiences across all territorial digital platforms. By adopting our design system from the start, your team gains:

Accelerated Development

  • Pre-built components: Leverage tested components that integrate seamlessly with any web development workflow by referencing the component demo HTML, CSS, and JavaScript code snippets.
  • Reduced development overhead: Skip the foundational work and focus on delivering unique features that serve Northwest Territories residents.
  • Proven patterns: Implement established interaction patterns that users already understand from other GNWT services.

Built-in Compliance

  • Accessibility by default: All components meet WCAG 2.1 AA standards, ensuring your service is inclusive for all territorial residents.
  • Government standards: Components follow branding guidelines and meet digital service requirements.
  • Quality assurance: Each component undergoes rigorous testing across devices and assistive technologies.

Seamless Team Collaboration

  • Shared vocabulary: Designers and developers work from the same component library, reducing miscommunication.
  • Consistent implementation: Components maintain visual and functional consistency whether built by different team members or external vendors.
  • Documentation-driven: Clear usage guidelines help teams implement components correctly the first time.

Focus on What Matters Most

When you build with existing design system components, your team can redirect energy toward high-impact activities that directly benefit territorial residents:

  • Service design and user journey optimization
  • Content strategy and plain language implementation
  • User research and community engagement
  • Performance optimization for remote communities
  • Integration with territorial systems and databases
  • Multilingual content development (English and French)
  • Mobile-first experiences for on-the-go access

How do I implement the GNWT Design System?

Start by adding the GNWT Design System CSS bundle and Noto-sans font family from the getting started section for developers, then integrate component code snippets into your service. Most components cover 75–85% of common government needs and can be adapted to be used with any web technology stack. When user research reveals new needs or opportunities, collaborate with the design system team to suggest improvements by utilizing the feedback form at the bottom of the relevant design system page.

Implementation Approach

  1. Use the GNWT Design System CSS bundle: This CSS file provides the foundation for achieving a consistent look and feel with the GNWT. It includes utility class styling that can be utilized to customize the experience to your services needs.
  2. Use existing components first: Browse the library and copy HTML, CSS, and JavaScript snippets that match your service. Adapt the HTML to fit your implementations needs or frameworks.
  3. Validate with real users: Test components with Northwest Territories residents to confirm accessibility and usability.
  4. Review early: Engage with the design system to plan how it can serve your unique requirements.
  5. Prototype and test: Build quick prototypes using existing components, then refine them based on user feedback.
  6. Share your learnings: Document any improvements or adaptations to support future GNWT projects.
Mis à jour: 20 mars 2026