Here you will find the main user interface color palette for the out of the box theme. Shades of orange, green, white and grey are used for backgrounds, boders, buttons and text all along the application.

The Primary Color is used for primary actions and highlighted information.

The Secondary Color is used for secondary actions. Different shades of this color are used for theme backgrounds, borders and text.

The neutral shade palette is a scale from 1000 (dark) to 0 (light). This theme defines a couple of medium scale values. The developer might find useful to add more intermetiate colors within the scale that might be referenced to this scale. Bootstrap doc reference

The following color palette defines those colors that are used across different contexts.

In addition to the Brand Theme Palette, the following colors are used only in the theme context. These colors are defined based on Bootstrap Theme Colors variables: Bootstrap doc reference

Bootstrap doc reference

Font families are not loaded from the Component Library since different themes probably use different fonts. So, these variables are setted with a default value but they must be overridden in the Theme source code.

$font-family-primary: 'Avenir Next LT Pro', Arial, Helvetica, sans-serif
$font-family-secondary: 'Avenir Next LT Pro Demi', Arial, Helvetica, sans-serif
$font-family-tertiary: 'Noto Serif JP', Arial, Helvetica, serif

$font-size-base: 1rem
$font-size-lg: $font-size-base * 1.25
$font-size-sm: $font-size-base * .875

Use the spacing scale when building individual components. It includes small increments needed to create appropriate spatial relationships for detail-level designs. Spacing levels are built from a default Sass map ranging from .25rem to 3rem.

$spacing-01: 2px;
$spacing-02: 4px;
$spacing-03: 8px;
$spacing-04: 12px;
$spacing-05: 16px
$spacing-06: 24px;
$spacing-07: 32px;
$spacing-08: 40px;
$spacing-09: 48px;