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.

 

Colours

Brand colours

Token Value Example
nsw-primary-blue #002664

 

nsw-primary-highlight #d7153a

 

nsw-secondary-blue #2e5299

 

 

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
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

 

Breakpoints

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

 

Container

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

 

Grid

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

 

Grid margins

Token Value
grid-margins-xs 8px
grid-margins-sm 8px
grid-margins-md 8px
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

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-xl 26px 28px
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