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
Variable | Default Value / Description |
---|
$font-family-base | Alias, points to $font-family-light |
$font-family-light | The typeface used for the majority of body text |
$font-family-regular | Used for <strong> type |
$font-family-fallback (deprecated) | A simpler typeface used for legacy browsers (Internet Explorer 8) |
$font-family-monospace | Used for <code> and <kbd> examples |
$font-size-base | 16px |
$font-size-small | 1.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
Variable | Default Value / Description |
---|
$gutter-width | 20px - Used to separate elements, either through margins or padding as required |
Margins
Variable | Default Value / Description |
---|
$margin-base | 10px |
$margin-base-horizontal | 12px |
$margin-small-horizontal | 10px |
$margin-large-horizontal | 16px |
$margin-base-vertical | 6px |
$margin-small-vertical | 5px |
$margin-large-vertical | 10px |
Padding
Variable | Default Value / Description |
---|
$padding-base | 10px |
$padding-base-horizontal | 12px |
$padding-small-horizontal | 10px |
$padding-large-horizontal | 16px |
$padding-base-vertical | 6px |
$padding-small-vertical | 5px |
$padding-large-vertical | 10px |
Responsive breakpoints
Variable | Default Value / Description |
---|
$screen-xsmall $screen-phone | 480px |
$screen-smaller $screen-phablet | 600px |
$screen-small $screen-tablet | 767px |
$screen-small-max $screen-tablet-max | $screen-medium − 1 |
$screen-medium $screen-desktop | 992px |
$screen-large $screen-large-desktop | 1200px |
$screen-xsmall $screen-phone | 480px |
Borders
Variable | Default Value / Description |
---|
$border-radius | 4px |
$border-radius-large | 20px |
Z-index
Variable | Default Value / Description |
---|
$zindex-tour | 1000 |
$zindex-footer | 1020 |
$zindex-flash | 1050 |
$zindex-tooltip | 1055 |
$zindex-sticky | 1060 |
$zindex-dropdown | 1060 |
$zindex-nav-secondary | 1070 |
$zindex-nav | 1080 |
$zindex-popover | 1090 |
$zindex-modal | 3000 |