Design System

Our design system is made from interconnected patterns of repeating elements that combine to create a cohesive experience.

About the design system

Our system enables us to guide website users through an integrated, accessible and readable content experience.

A modular approach brings to life our information architecture and content strategy, which prioritises linking users with policy topics and entities at all the right touch points. As well as providing multiple pathways into critical, timely and timeless information.


These are our visual styles to create the look and feel of our department’s interconnected web presence.
Visit Page


Components are reusable patterns for our content types. They are building blocks that come together to create modular page patterns.
Visit Page

Page Patterns

These are distinct layouts that help to present information in order of timeliness and relevance, and to aid content discovery.
Visit Page


Our design system is consistent, but flexible; integrated, but modular. Integrated to optimise page patterns for particular purposes and modular to meet various user needs. As our department and our work evolves we can more easily introduce new patterns or combine them in new ways.

Our six governance principles from the website governance framework

We incorporate the six principles in our design system:

  • Information integrity
  • Content management
  • User focus
  • Digital first
  • Accessibility
  • Readability

How this translates to our design system

To visually capture these six principles, we’ve defined key design system principles:

People First

Our UI has no needless parts. Each element contributes to an accessible, scalable experience.

We place critical information in the use's focus and guide them with hierarchy and curation, using intuitive text styles, interactions, component designs, and page patterns.


Our design system connects relevant, topic-based content with contextual navigation patterns and integrated hierarchy.

Hub, topic and sub-topic pages relate content and allow users to self-select, drill further into information, and discover interests along the way.


Our page patterns emphasise critical information, then contextually weave in news, publications, and events.

We curate related content through modular cards and offer users intuitive navigation patterns to search for and explore topics of interest.

System specific principles

We complement the governance framework principles with 2 design system

User-centred design

We champion critical information and tasks first. We contextually promote publications, news, case studies, events and videos where there’s an established user need or business requirement. Our UI has no unnecessary parts. Each element is designed with purpose, and contributes to an integrated, intuitive and seamless user experience.

Design integrity

We follow the system rules. We do not apply any of the elements in unestablished combinations. The system works holistically and accommodates many interdependencies. We do not consider design iterations or improvements

Design system use

This design system is for products and tools only.


The Digital Experience and Engagement team maintains the design system.


Last Updated: