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