A NSW Government website
Design System v3.18.4

What is Design System

The NSW Design System is a single source of truth for the design and development of digital products and services in NSW Government. Our mission is to help teams build products and services that meet user needs and deliver great user experiences.

Our design guidelines and development documentation guide you on how to use the NSW Design System. Embracing a code first approach, all parts of the design system have been built in alignment to deliver simple and consistent solutions.

Building from a single, best practice base ensures consistency with how our users engage and interact with NSW Government digitally. Resulting in easy to use products and services.

Benefits

Build faster and at scale

Save time and money with an ecosystem that is made to work together. The design system features a library of styles, components and templates, and well as advice and guidance for how and when to use each one. Delivered in ready to go UI and code kits, say goodbye to building from scratch.

Out-of-the-box brand and accessibility compliance

Understand, apply and meet brand standards, with features required for brand compliance indicated with a 🔹 blue diamond. Supporting the NSW Government Brand Framework, the Design System can be used by (and bring value) to any brand classification. Our Design System has been updated to align with WCAG 2.2 level AA standards, providing components designed to support accessibility and inclusivity.

While these components are built to meet accessibility guidelines, achieving compliance for your product will depend on how they are integrated and used. Accessibility is influenced by your implementation choices including content creation, customisation and interaction design.

To maximise compliance:

  • Adhere to accessibility best practices when implementing components.
  • Test your product with diverse users, including those with disabilities.
  • Regularly review and update your product to maintain accessibility.

For additional support, explore our digital accessibility training resources. Alternatively, contact our team for implementation advice.

Design System Updates for WCAG 2.2 Compliance

We've updated the components in the NSW Design System to achieve compliance with WCAG 2.2 Level AA. Please review your digital products to determine if adjustments are needed to align with these updates.

For detailed explanations of each WCAG 2.2 success criterion, visit the W3C website.

Component

Relevant WCAG 2.2 Criteria

Accordion

Target size (minimum)

Breadcrumbs

Target size (minimum)

Card carousel

Target size (minimum), Dragging movements

Footer

Target size (minimum)

Hero banner

Target size (minimum)

Hero search

Target size (minimum), Redundant entry

In-page navigation

Target size (minimum)

Keep an eye on this page for more updates, and sign up to our mailing list to hear from us about future events and updates.

Consistent code and design language

When using our foundations, components and themes, get access to fully synchronised UI and code kits for both designers and developers. This means everyone uses the same atomic components, with extended guidance also bridging the gap to help avoid design drift.

Quality across all layers

The design system provides full-stack foundations and base components which are engineered for a good user experience. They go beyond the look-and-feel to also include branding, UX guidance, and front-end components.

Support

Questions

If you have any questions or would like to chat to us further about using the NSW Design System reach out to us at [email protected].

Report issues

View and raise issues and bugs through our Issues tracker on Github or via Report a bug on the Community.