Skip to main content

How to use

We use tokens instead of static values (like HEX codes) for color or sizing units.


You don’t need to install the tokens because they’re included as a dependency to ensure compatibility.

You can install the package on its own.

npm install --save @aemo/aemo-design-tokens

How to use

To use the default tokens, add an import in the file where you want to use the design tokens.

Supported format

Tokens are generated by JSON files from Figma, which enables us to transform this type of file into different ones. It should be possible to transform JSON into SASS, LESS, Stylus, XML, and others.

CSS Variables

@import url('tokens.css');

.class_name {
color: var(--gel-color-primary-purple-500);


@import "@aemo/aemo-design-tokens/dist/tokens.scss";

.class_name {
color: $gel-color-primary-purple-500;


@import (reference) "@aemo/aemo-design-tokens/dist/tokens.scss";

.class_name {
color: @gel-color-primary-purple-500;


import token from 'aemo-tokens.js';

document.getElementById(id).style.color = token.ColorPrimaryPurple500;


Download and paste to your Android project. Then:

<item android:color="@color/gel_color_primary_purple_500" />


Download and paste to your Swift project. Then:


Where is the code

The repo lives on Azure DevOps, and jFrog artefactory