Skip to content
Skip to navigation
A NSW Government website
NSW Government
NSW Design System
v3.28.0
menu
Open
Menu
search
Show
Search
Search site for:
search
Search
0
results found.
close
Close search
Menu
close
Close Menu
Get started
keyboard_arrow_right
keyboard_arrow_left
Back
to previous menu
close
Close Menu
Get started
Understand the NSW Design System, choose the right starting point for your role and find implementation guidance.
About the NSW Design System
Supporting different roles
Our ecosystem
For designers
For developers
Figma UI Kit
Templates
Theming
Extending
Core styles
keyboard_arrow_right
keyboard_arrow_left
Back
to previous menu
close
Close Menu
Core styles
Core styles that create the NSW Government look and feel.
Logo
🔹
Required for NSW Government Masterbrand products
Colour
🔹
Required for NSW Government Masterbrand products
Typography
🔹
Required for NSW Government Masterbrand products
Iconography
🔹
Required for NSW Government Masterbrand products
Pictograms
🔹
Required for NSW Government Masterbrand products
Grid
Page layout
Section
Graphic elements
🔹
Required for NSW Government Masterbrand products
Components
keyboard_arrow_right
keyboard_arrow_left
Back
to previous menu
close
Close Menu
Components
Reusable interface building blocks with guidance, code examples and variants.
Actions and controls
Content
Feedback and status
Forms and inputs
Navigation
Overlays
Page structure
Search and task flow
Utility classes
keyboard_arrow_right
keyboard_arrow_left
Back
to previous menu
close
Close Menu
Utility classes
Single-purpose classes for applying spacing, layout, visibility and other common styling utilities.
Background
Borders
Box shadow
Display
Flex
Float
Overflow
Position
Reflow
Spacing
SVG
Text
Vertical alignment
Visibility
Z-index
Methods
keyboard_arrow_right
keyboard_arrow_left
Back
to previous menu
close
Close Menu
Methods
Best practice design solutions for specific user-focused tasks and page types.
Charts and graphs
Easy Read
Inactive fields
Maps
Search and filters
You are here
Release notes
Home
Position
Utility classes
Utility classes
Background
Borders
Box shadow
Display
Flex
Float
Overflow
Position
Reflow
Spacing
SVG
Text
Vertical alignment
Visibility
Z-index
Position
Utilities for controlling how an element is positioned in the DOM.
Copy
content_copy
Copy
content_copy