Developing

Overview

The Queensland Government Design System (QGDS) provides a suite of resilient, pre-tested code implementations to help teams build consistent digital services.

Rather than building UI from scratch, you can leverage our shared infrastructure which includes built-in accessibility (WCAG 2.2), responsive behaviour, and Queensland Government brand compliance out-of-the-box.

Choosing your implementation

We know that every project has different technical requirements and framework constraints. To support this, we currently offer three distinct pathways to implement the design system. We don't mandate one over the other - we suggest choosing the one that best fits your team's existing workflow and long-term goals.

QGDS Vanilla

Best for: Projects requiring the core foundation originally developed by Queensland Health.

This is the lightweight, dependency-free CSS/JS codebase that served as the foundation for the system. It's a great choice for teams who prefer to maintain their own build pipelines or are supporting existing services built on this architecture.

  • A note on support: This codebase is provided "as-is" for teams to integrate as they see fit. While it remains a stable reference, it is not formally supported or actively updated by our core team.
  • Source code: Queensland Health GitHub Repository and the code examples on this website.

QGDS Bootstrap 5

Best for: Teams familiar with the Bootstrap ecosystem or those who need a robust, utility-first framework.

This is an independent implementation of the Design System based on Bootstrap 5. It's perfect for rapid layout development and is managed via the QLD-GOV-AU GitHub space.

QGDS Web Components (Recommended for Modern Web)

Best for: Framework-agnostic projects (React, Angular, Vue, Svelte), web apps, or static sites.

We are currently developing a collection of platform-agnostic Web Components. These are built on the Lit 3 framework and integrate our Design Tokens for a consistent UI experience. The goal is to allow you to drop a single HTML tag into any environment and receive a fully functional, styled, and accessible component.

Why use our code?

Every implementation pathway, whether Vanilla, Bootstrap, or Web Components is designed to handle the hidden layers of the development process:

  • Standardised accessibility: We've baked in the ARIA roles, keyboard traps, and screen-reader optimisations so you don't have to.
  • Responsive by default: Everything is pre-tested across mobile, tablet, and desktop breakpoints.
  • Reduced testing cycles: Because the core UI logic is already tested, your QA focus can shift to your business logic rather than fixing UI regressions.
  • Shift from "writing" to "consuming": Our goal is to help you move away from writing custom CSS and toward consuming production-ready components, helping you ship features faster.

Last updated: April 2026

Back to top