Here is the intended semantics for how these colors are to be used in designs:

• Primary, Secondary, and Tertiary are meant to set brand tone.
  • These colors shold have similar intensity, so that they can be used interchangeably for variability.
  • Secondary should be different from Primary
  • Tertiary can be mapped to Primary or Secondary -- whichever has to be more dominant.
• Accent color is more prominent than any other color in the palette, to be used on small elements.
• Action color will be used for call-to-action controls (mostly buttons):
  • Can be mapped to one of these: Primary, Secondary, Tertiary.
  • Accent color should be different from Action:
    • Where extreme prominence is required, Accent should be preferred.
    • Accent can be used as a state-change color to Action, e.g. when [Add to Cart] changes to [Checkout].
• Neutral should be a scale of grays:
  • Neutral-Darkest will be mapped to $black which is used as contrasting color for text on light backgrouds.
  • Neutral-Intense can be used as a background for active buttons, so it should not be too light to avoid confusion with disabled buttons.
  • Neutral-Lightest will be mapped to $white which is used a contrasting color for text on dark backgrounds.
  • Neutral-Darkest, Neutral-Darker and Neutral-Dark should be dark enough to give enough contrast for text on -light, -lighter and -lightest backgrounds correspondingly.
• Ground will be alternative for Neutral, primarily meant for toned-down backgrounds that need to be different from Neutral.

The above color names can be used in SCSS like this:

@include cds-background-color(primary-intense);
@include cds-background-color(primary-intense, important);

@include cds-color(primary-intense);
@include cds-color(primary-intense, important);

.has-primary-accent-background-color
.has-primary-accent-color

color: cds-brand-color(primary-accent)
border-color: 2px solid cds-brand-color(primary-accent)

.dangerous-button {
	@include cds-color-contrast(notice-danger);
	@include cds-background-color(notice-danger)
}

.dangerous-button {
	@include cds-color(cds-contrast(notice-danger));
	@include cds-background-color(notice-danger);
}