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 |