A NSW Government website
Design System v3.0.5

Header

🔹 Needed for NSW Government Branding

The NSW Government header displays across the top of all NSW Government sites. It helps users see which service they are using.

Figma React

Usage

The header sits under the masthead on all NSW Government websites, products and services.

There are two versions of the header:

Masterbrand

The masterbrand header contains the NSW Government logo and site descriptor (site name), with optional secondary descriptor and search.

Co-brand

The co-brand header contains the NSW Government logo and co-brand logo, with optional search.

The default header caters for square logos. A class can be added for rectangular logos to ensure logos are visually equal in size, in line with brand guidelines.

There are also two mobile header options depending on your logo’s width:

Horizontal stacked: On mobile the NSW Government and co-brand logo will appear side by side. Consider this option when the co-branded logo does not exceed 130px in width when at 48px in height. If it does, always test to ensure it does not overlap search and menu functions on smaller devices.

Vertical stacked: On mobile the NSW Government will appear on top of the co-brand logo. Consider this option when the co-branded logo does exceed 130px in width when at 48px in height.

NSW Government Logo

The NSW Government logo reinforces the connection to NSW Government and should always appear in the top left to create a consistent experience across digital product or services. It should appear no smaller than 76px on large screens and never smaller than the co-branded logo.

Descriptors

Descriptor: Where it is important for a customer to identify a department or agency within NSW Government, a descriptor can be used. The text descriptor is treated, not as a competing logo (or coupled), but as a navigational device to help customers where they need to identify an entity.

Secondary Descriptor: In the rare case where there is a customer need to relay back to the overarching department, two descriptors can be coupled together. Usage for this requires approval from the NSW Government Brand Team. The secondary descriptor is located directly under the primary descriptor in smaller font.

Search

The search displays on the right hand side and can be omitted if not required.

Accessibility

All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

Masterbrand with descriptor

digital.nsw

Masterbrand with secondary descriptor

digital.nsw
Department of Customer Service

Co-brand - mobile horizontal stacked

Co-brand - mobile vertical stacked