Design tokens
Design tokens are values which can be shared across multiple patterns, interfaces, or devices.
Design tokens can be used across multiple components and systems. They define single values which should be globally accessible within the application. They enable design consistency throughout the user experience. They encompass, for instance, items such as individual colors and font weights.
Color
This palette describes the colors for the default theme. A complete list of themes colors can be found in the Core repo here.
| Name | Hex | Swatch |
|---|---|---|
$action-primary-color |
#b0d372 |
|
$action-secondary-color |
#cfd2d6 |
|
$gray-100 |
#f4f5f6 |
|
$gray-200 |
#e5e6e8 |
|
$gray-300 |
#cfd2d6 |
|
$gray-400 |
#c2c5c9 |
|
$gray-500 |
#abafb4 |
|
$gray-600 |
#91959c |
|
$gray-700 |
#63676b |
|
$gray-800 |
#494b4e |
|
$gray-900 |
#262729 |
|
$color-info-dark |
#046da5 |
|
$color-info |
#049ff1 |
|
$color-info-light |
#e0f1fa |
|
$color-success-dark |
#376808 |
|
$color-success |
#68a10b |
|
$color-success-bright |
#8ad411 |
|
$color-success-light |
#e6fbc3 |
|
$color-warning-dark |
#7c5200 |
|
$color-warning |
#d99d03 |
|
$color-warning-bright |
#f9c339 |
|
$color-warning-light |
#fffac9 |
|
$color-error-dark |
#790708 |
|
$color-error |
#d51416 |
|
$color-error-bright |
#f54345 |
|
$color-error-light |
#fee4e4 |
Spacing
The spacing system is based on an exponential increase. Each spacing size doubles the previous one.
At the default font size, 1rem is equal to 10px.
$spacing-xs: 0.4rem; // 4px
$spacing-sm: 0.8rem; // 8px
$spacing-md: 1.6rem; // etc
$spacing-lg: 3.2rem;
$spacing-xl: 6.4rem;
Font size
$font-size-small: 1.2rem;
$font-size-medium: 1.4rem;
$font-size-large: 1.8rem;
$font-size-heading: 2.4rem;
Font weight
$font-weight-regular: 400;
$font-weight-semibold: 600;
$font-weight-bold: 700;
Transition speed
$fast-transition: 0.1s ease;
$base-transition: 0.35s ease;
$slow-transition: 0.5s ease;