Overview
You can use this design system to create digital products and services that prioritise customer needs while adhering to branding and WCAG 2.1 AA accessibility guidelines. Additionally, it assists in meeting the Digital service standards, which focus on designing for user needs. The design system provides a comprehensive breakdown of the Qld Government brand, including core styles that establish:
- the visual identity
- base components that serve as building blocks for user interfaces
- UX guidance for creating consistent user experiences.
To get started, we suggest you:
Get started with Figma
View the design system Figma pattern library.
Figma has developed some easy to follow guides and video tutorials that step you through different processes:
If you're interested in adopting the design system for your website, please contact us to discuss your options.
Common terms
Atomic Design
Atomic Design is a methodology inspired by chemistry for designing user interfaces that was introduced by Brad Frost, a web designer and developer.
It's based on the idea that user interfaces can be broken down into smaller, reusable parts, just like atoms in the real world. These parts can then be combined in different ways to create more complex user interface elements, or molecules. These molecules can then be combined to form larger, more complex structures, or organisms. The goal of atomic design is to create a consistent, modular design system that can be used to build user interfaces more efficiently.
The 5 levels of atomic design are:
- Atoms: These are the smallest, most basic UI elements, such as buttons, inputs, and icons.
- Molecules: These are groups of atoms that function together as a unit, such as a search form or a navigation menu.
- Organisms: These are groups of molecules that function together to form a larger, more complex UI element, such as a header or a footer.
- Templates: These are layouts that show how the organisms and molecules will be arranged on a page.
- Pages: These are the final, fully-realized user interfaces that are built using the templates and the organisms, molecules, and atoms.
By following the principles of atomic design, designers and developers can create a cohesive, scalable Design Aystem that can be easily maintained and updated over time.
Core styles
Govern the typography, grids, effects (shadows) and colours. They're available through pre-set styles defined in the Design System master file.
Base elements
These are the fundamental building blocks of our ‘master components’.
Components
Components are reusable parts of the Design System. Each component has been developed to meet a user interface need. All components work together to create different patterns and templates.
Component library
A collection of available components or patterns you can browse to use in your designs.
DTA
The Australian Government Design System produced by the Digital Transformation Agency (DTA). It provides a framework and a set of tools to help designers and developers build government products and services more easily.
Master components
Master components are the source of truth for each component in our Design System. When you use our components in your designs you create instances (duplicates) of these master versions. These instances are linked to the master component and receive any updates made to the component.
Patterns
Patterns are best practice design solutions for specific user-focused tasks and page types. Patterns use one or more components and explain how to adapt them to the context.
Variants
Components with variants will have toggles or drop downs that show unique options for that component.
Variables
Default styles assigned using SASS to help organise and structure the core design of the site. These are often referred to as design tokens and classes.
COA
This is an acronym commonly used to the describe the Queensland Government Coat of Arms (below).