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