These guidelines are for agencies looking to create and update interactive learning modules on third-party platforms like Articulate, Elucidat, Adobe Captivate, etc. It is important agencies follow these guidelines so content on nsw.gov.au is consistent and site visitors' experience is seamless. Also, each platform will have different levels and options for customisation, so sticking to these guidelines as much as you can is best, while also considering accessibility needs.
Core styles – styles that need to be adhered to as much as possible.
Components – optional styles that should be adhered to for those who are using platforms with extended options for customisation.
Core styles
These are from the NSW Brand Toolbox which is the ultimate source of truth for such styles.
Logo
The NSW Government Waratah logo shows at the top left of all NSW Government pages, so it doesn’t need to be added to your learning modules if the module is to be embedded in an Iframe.
If the module will be linked to and will open in its own window, the logo will be required. Refer the NSW Brand Toolbox for correct usage.
Typography
We use the Public Sans font throughout nsw.gov.au which is a free font that you can access on Google fonts. Arial is our fall-back font, so if Public Sans isn't available, or can’t be uploaded, Arial can be used instead. We also use Grey 01 / #22272B for all text, and Brand Dark blue / #002664 for all links (links are also styled with an underline). Some platforms may not allow you to choose the colours for text and links, so if they are visibly different from each other with links underlined, then that is acceptable.
Headings
On the pages that will display these learning modules, there will already be a H1 in the heading, so that style has been left out here.
Some platforms may not allow you to specify heading size. If that is the case then this section doesn’t apply.
| Element | Size | Line height | Weight (text thickness) |
|---|---|---|---|
| H2 | 2rem / 32px | 1.25rem / 40px | 700 / bold |
| H3 | 1.5rem / 24px | 1.33rem / 32px | 700 / bold |
| H4 | 1.25rem / 20px | 1.4 rem / 28px | 700 / bold |
| H5 | 1rem / 16px | 1.5 rem / 24px | 700 / bold |
| Body | 1rem / 16px | 1.5 rem / 24px | 400 / default |
Colours
When choosing colours, ensure that there is enough contrast to make the content accessible. Further guidance can be found on the Text colour and accessibility section of the NSW Government Brand Toolbox.
Core/brand colours
These Brand colours denote the connection to NSW Government or Brand. It uses Blues, Reds and Greys from the NSW Government wider colour palette to communicate a strong association with NSW Government. If you can only choose one colour in your platform, use Brand dark.
|
Brand dark Blue 01 (Core) #002664 |
Brand light Blue 04 #CBEDFD |
Brand Supplementary Blue 02 #146CFD |
Brand accent Red 02 (core) #D7153A |
Grey
To be used for backgrounds, borders and divider lines to build contrast.
|
Grey 03 #C0C6C9 |
Off white #F2F2F2 |
Text
These are to be used for various text states.
|
Text dark #22272B |
Text light #FFFFFF |
Text visited #551A8B |
Text focus #0085B3 |
Iconography
We use Material design icons (filled versions) to illustrate actions, status and signage. If you are not able to choose the icon set, then please use icons that are similar in style and if possible, use the Brand dark colour #002664.
Pictograms/Illustrations
Pictograms represent a word or idea using simple and clean illustration, and are used to visually support and highlight content, making it quickly identifiable on the page. NSW Government uses pictograms from the NSW Government Brand Toolbox. However, if you’re not able to upload illustrations, choose images that align with the NSW Government Brand style.
Pictogram colour
NSW Government also uses pictograms that are two-toned. This may not be possible in the platform that you are using – if this is the case then use either the ‘Text dark’ #22272B or ‘Text light’ #FFFFFF. If you're able to use a second tone, use ‘Brand supplementary’ #146CFD.
Images
Images can support and reinforce the content. Ensure media used is relevant and impactful.
Background images
Please do not use background images, and instead go for a solid background colour.
Accessible images
Graphics and images can make content and information easier to understand, especially for those with cognitive and learning disabilities. However, the use of graphics and images can also create major barriers when they are not accessible, affecting users with visual impairments. Please look at the graphics and images guidelines for further information.
AI generated images
Images can be used that have been generated from an AI, but it’s important to check before uploading as AI has several risk factors. Please consult the Using Artificial Intelligence Guidelines and the NSW Artificial Intelligence Assessment Framework.
Also, all images that have been generated from an AI must state as such in the caption.
Components
These optional styles must be adhered to when using platforms with extended options for customisation.
Navigation and supporting resource links
Navigation links need to appear on the top left of the modules, while any supporting resource links should show on the top right.
Buttons
Buttons provide users with the ability to submit an action or follow a link to another location.
We don’t recommend using a disabled button as it's bad for accessibility and general usability, so that hasn’t been included here.
We have 3 different button styles for different purposes – Primary, Secondary and Alert.
Primary
- Use for the primary action
- Primary buttons should be placed on the left of your page if possible, before any secondary or tertiary buttons.
- Limit of 1 primary button per section.
Styling
Uses Brand dark #002664 for the button colour, and Text light #FFFFFF for the text. However if the background colour is dark, then the white variation can be used with White #FFFFFF for the button colour, and Text dark #22272B for the text.
Secondary
- Use secondary buttons for actions that are less important than the primary one.
Styling
This button doesn’t have a background colour, but instead has an outline. There are 2 variants, dark and light. The dark variant which is to be used on light backgrounds, uses Brand dark #002664 for the outline and text, while the light variant which is to be used in dark backgrounds, uses Brand light #CBEDFD for the outline and text.
Alert
- Only use a red alert button for destructive actions like deleting.
- Don’t use the red alert button for primary calls to action, instead use a primary button.
- Don't use the alert button for visual interest on a page.
Styling
Alert buttons can only sit on white or off-white backgrounds, and uses #B81237 for the button colour, and Text light #FFFFFF for the button text.
Cards
Cards are grouped clickable elements that give a summary of content and display information in an organized way, making it easier for the audience to find information.
We display cards with 4 different colour variations: white, brand dark, brand light and brand supplementary. We also use an arrow icon on the bottom left of cards, and a 4px radius on the card corners, however your learning platform may not allow for this.
White
White cards can sit on any background colour, and use White #FFFFFF for the background, #CDD3D6 for the border and Text dark #22272B for the text.
Brand light
Brand light cards can only sit on a white or an off-white colour, and use Brand light #CBEDFD for the background, no border, and text dark #22272B for the text.
Brand dark
Brand dark cards can only sit on a white or an off-white colour and use Brank dark #002664 for the background, no border and text light #FFFFFF for the text.
Brand supplementary
Brand supplementary cards use #146CFD for the background, no border and text light #FFFFFF for the text.
Modals/Dialogs
Modals make a user stop and think by presenting them with a critical action or piece of information required to continue. The 4 types of modals are as follows:
- Transactional – alert a user to urgent information they must acknowledge before continuing
- Single call to action – when a single acknowledgement is required from the user
- Danger – alert a user to a destructive or irreversible action they must confirm before continuing
- Dismissible – when an action does not need to be selected and the user can return to the previous state with no change.
Accordions
Accordions turn sections of content into a scannable list, allowing the audience to view only the content they need and ignore what they don’t.
Styling
Accordion titles use the H4 (20px and bold) heading style.
When accordions are closed, they use Off white #F2F2F2 for the background colour, text dark #22272B for text, and Brand dark #002664 for the chevron.
When accordions are open, they use Brand dark #002664 for the background colour, text light #FFFFFF for the text and the chevron.
Graphs
Use graphs and charts to easily show relationships, patterns and trends visually between data sets to users. Use the chart or graph type that best tells the story of the data and clearly represents the core insights.
Representing data using graphics can be more widely understood by those with reading disabilities, accessibility needs or those for whom English is not their first language.
Further, to ensure that your graph is accessible make sure to have text descriptions to provide explanations for those with sight-based access needs, as well as checking the contrast of the colours that you want to use. If you are struggling with this, you can use solid borders and pattern fills for pie, area and column charts, different shapes for plot points and dashed lines for line graphs.
Styling
Colour plays a large role in data visualisation to communicate insights. Use colours from the brand colour set, and if you need extra colours, use the NSW palette.
Single colour
For charts with a single dataset, you can use just one colour. In most cases, aim to use the brand dark colour, or brand light if the chart sits on a dark background.
Multiple colours
If you're displaying data side-by-side, such as a pie chart, use colours from the NSW palette.
Need any more help?
If you have any questions, or require assistance with anything mentioned in this article, submit a request via the webform.