About
Who, what and how of the NSW Design System.
Get started
Practical guidance and tools to get you started with the NSW Design System.
Stay on brand
For NSW Government Masterbrand products, a blue diamond highlights Design System features that support alignment with the brand guidelines.
Core styles
Core styles establish the visual and structural base of NSW digital products.
Brand
- 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
- Graphic elements Required for NSW Government Masterbrand products
Layout
Components
Components are reusable interface elements grouped by purpose.
Actions and controls
Content
- Accordion
- Card carousel
- Cards
- Content blocks
- Link list
- List items
- Media
- Show more
- Support list
- Tables
- Tags
Feedback and status
Forms and inputs
Navigation
- Back to top
- Breadcrumbs
- In-page navigation
- Main navigation
- Pagination
- Side navigation
- Tabs
- Utility list
Overlays
Page structure
- Footer Required for NSW Government Masterbrand products
- Header Required for NSW Government Masterbrand products
- Hero banner
- Masthead Required for NSW Government Masterbrand products
Search and task flow
Utility classes
Utility classes are single-purpose helpers for common spacing, layout, visibility and styling needs.
Methods
Methods explain how to apply components to common design and service problems.
Templates
Templates provide starter page layouts and examples, available under Get started.
Track releases and the roadmap.
Reach out to collaborate, share and learn with teams across NSW Government.
Follow our dev work in progress, report bugs and make code contributions.
View and raise issues and bugs through our Issues tracker on Github
We welcome all contributions to the NSW design system.
Anyone can suggest a new component or feature.