Skip to main content

Design tokens

Design tokens store static values for a variety of design attributes. Use them in place of hardcoded values to ensure consistency in your user interface.

Colour

See the colour and state for information on the colour design tokens.

Fonts

VariableDefault Value / Description
$font-family-baseAlias, points to $font-family-light
$font-family-lightThe typeface used for the majority of body text
$font-family-regularUsed for <strong> type
$font-family-fallback (deprecated)A simpler typeface used for legacy browsers (Internet Explorer 8)
$font-family-monospaceUsed for <code> and <kbd> examples
$font-size-base16px
$font-size-small1.5
$font-size-medium$font-size-base × 0.75
$font-size-large$font-size-base × 1.25
$font-size-xlarge$font-size-base × 1.5
$font-size-xxlarge$font-size-base × 2

Spacing

VariableDefault Value / Description
$gutter-width20px - Used to separate elements, either through margins or padding as required

Margins

VariableDefault Value / Description
$margin-base10px
$margin-base-horizontal12px
$margin-small-horizontal10px
$margin-large-horizontal16px
$margin-base-vertical6px
$margin-small-vertical5px
$margin-large-vertical10px

Padding

VariableDefault Value / Description
$padding-base10px
$padding-base-horizontal12px
$padding-small-horizontal10px
$padding-large-horizontal16px
$padding-base-vertical6px
$padding-small-vertical5px
$padding-large-vertical10px

Responsive breakpoints

VariableDefault Value / Description
$screen-xsmall $screen-phone480px
$screen-smaller $screen-phablet600px
$screen-small $screen-tablet767px
$screen-small-max $screen-tablet-max$screen-medium − 1
$screen-medium $screen-desktop992px
$screen-large $screen-large-desktop1200px
$screen-xsmall $screen-phone480px

Borders

VariableDefault Value / Description
$border-radius4px
$border-radius-large20px

Z-index

VariableDefault Value / Description
$zindex-tour1000
$zindex-footer1020
$zindex-flash1050
$zindex-tooltip1055
$zindex-sticky1060
$zindex-dropdown1060
$zindex-nav-secondary1070
$zindex-nav1080
$zindex-popover1090
$zindex-modal3000