Design Tokens

The NSW 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.


Brand colours

Token Value Example
nsw-primary-blue #002664


nsw-primary-highlight #d7153a


nsw-secondary-blue #2e5299


nsw-tertiary-blue #0085b3



Fills and stroke colours

Token Value Example
black #000000


dark80 #333333


dark70 #4c4f55


dark60 #6d7079


light40 #a0a5ae


light20 #e4e4e6


light10 #f4f4f7


white #ffffff




Utility colours

Token Value Example
info nsw-secondary-blue


success #00a908


warning #dc5800


critical #b81237


focus-color #0085b3


focus-color-light white



Text colours

Token Value Example
link-color nsw-primary-blue


link-color-light white


link-color-visited #551a8b


text-color dark80


text-color-light white


print-color black



Background colours

Token Value Example
background-brand nsw-primary-blue


background-dark dark80


background-light light10


background-white white



Border and divider colours

Token Value Example
border-brand nsw-primary-blue


border-dark dark80


border-medium light40


border-light light20


border-highlight nsw-primary-highlight



Disabled colours

Token Value Example
disabled-text-color light40


disabled-border light10


disabled-background light10



Notification colours

Token Value Example
notifications-info-background #eaedf4


notifications-info-color info


notifications-info-border info


notifications-success-background #e5f6e6


notifications-success-color success


notifications-success-border success


notifications-warning-background #fbeee5


notifications-warning-color warning


notifications-warning-border warning


notifications-critical-background #f7e7eb


notifications-critical-color critical


notifications-critical-border critical



Button colours

Token Value Example
buttons-primary-text-color white


buttons-primary-text-color-hover white


buttons-primary-background nsw-primary-blue


buttons-primary-background-hover #003182


buttons-primary-border nsw-primary-blue


buttons-primary-border-hover #003182


buttons-highlight-text-color white


buttons-highlight-text-color-hover white


buttons-highlight-background nsw-primary-highlight


buttons-highlight-background-hover #e92147


buttons-highlight-border nsw-primary-highlight


buttons-highlight-border-hover #e92147


buttons-outline-text-color dark80


buttons-outline-text-color-hover white


buttons-outline-background white


buttons-outline-background-hover nsw-primary-blue


buttons-outline-border nsw-primary-blue


buttons-outline-border-hover nsw-primary-blue


buttons-highlight-text-color dark80


buttons-highlight-text-color-hover dark80


buttons-highlight-background white


buttons-highlight-background-hover light20


buttons-highlight-border white


buttons-highlight-border-hover light20



Form colours

Token Value Example
form-input-border dark70


form-input-error-border critical


form-input-background white


form-input-background-hover #d4e6f0


form-input-error-background critical-background


form-input-selected nsw-primary-blue


form-fieldset-border dark70


form-fieldset-error-border critical



Sizes and spacing

Border radii

Token Value
border-radius-none 0
border-radius 4px
border-radius-round 50%


Border widths

Token Value
border-width-none 0
border-width-sm 1px
border-width-md 2px
border-width-lg 4px
highlight 6px


Spacing (margins and paddings)

Token Value Example
spacing-none 0


spacing-xs 8px


spacing-sm 12px


spacing-md 16px


spacing-lg 24px


spacing-xl 32px


spacing-xxl 48px


spacing-xxxl 64px


spacing-xxxxl 80px




Token Value
breakpoints-xs 0
breakpoints-sm 576px
breakpoints-md 768px
breakpoints-lg 992px
breakpoints-xl 1200p



Token Value
container-offset 16px
container-max-width 1200px



Token Value
grid-gutters 16px
grid-container-offset -16px


Grid margins

Token Value
grid-margins-xs 16px
grid-margins-sm 16px
grid-margins-md 32px
grid-margins-lg 32px
grid-margins-xl 32px


Grid column width

  Values at Breakpoints
Token xs sm md lg
grid-column-half 100% 50%
grid-column-third 100% 33.3%
grid-column-two-thirds 100% 66.6%
grid-column-quarter 100% 50% 25%
grid-column-three-quarters 100% 50% 75%



Typography sizes

Token Small screens
(< 992px)
Large screens
(≥ 992px)
font-size-xs 14px 14px
font-size-sm 16px 16px
font-size-md 18px 20px
font-size-lg 22px 24px
font-size-xxl 28px 32px
font-size-xxxl 36px 48px


Line heights

Token Value
nospace 1
default 1.25
paragraph 1.5


Font weights

Token Value
font-weight-regular 400
font-weight-heading 600


Z index

Token Value
zindex-top 900
zindex-upper 300
zindex-middle 200
zindex-base 100
zindex-below -100
Last updated