Design Tokens published

Patterns
1

Hi all

We’re pleased to have published our design tokens to further assist in your development using the Design System.

The Design System uses Design Tokens to abstract key design attributes, such as colour or size. By assigning named variables (design tokens) to these design attributes, it is easier to make a systemic change to all instances of a design variable, such as link colour or the biggest font size used.

Full table can be found here:

https://www.digital.nsw.gov.au/design-system/style/design-tokens

2 Likes
2

Hi @andrei.vidaicu, I learned about applying theming through CSS variables on NSW Digital Design System - Theming (digitalnsw.github.io). However, I couldn’t find any information regarding tokens and their relationship with CSS variables in the documentation. I searched the term “token”, no results were displayed on the GitHub page.

Could you help me clarify if Token is still available?

Thanks,
Mike

3

Hi @mikegu, thank you for sharing.

We currently use -

‘CSS variables’ for colors, you can find them here -

We also have a theming page that utalizes the color ‘CSS variables’ (where you can change different themes by selecting the colors in the top right of the page) -
https://digitalnsw.github.io/nsw-design-system/templates/theming/full-page.html

image

And we have tokens available for the grid -

Hopefully that helps.

1 Like